Типографика — сильнейший инструмент для выражения посыла в веб-дизайне. С его помощью вы можете объединить текстовую и визуальную составляющие, что поможет вам достучаться до посетителя. Правильное использование типографики поможет избежать типичных ошибок, допускаемых дизайнерами при создании очередного шедевра. Постараемся понять, что же мы делаем не так, и как избежать ошибок в будущем.
Для начала давайте разберемся с терминологией. Наверняка большинство терминов вам знакомы, но еще разок ознакомиться с определениями не будет лишним. Возможно, это дополнит ту информацию, которой вы уже обладаете.
Типографика — свод законов, правил и норм оформления текста, основанных на изучении восприятия набора читателем. Знание и понимание типографики превращают текст в инструмент построения композиции, делают его живым, придают характер и способность передать идею не только при помощи содержания, но и графически.
Гарнитура — шрифт или несколько шрифтов, имеющих стилистическое единство начертания. Состоит из набора знаков. Часто это понятие путают с понятием «шрифт», хотя шрифт — это определенное начертание знаков, в то время как гарнитура определяет общее «семейство» шрифтов.
Гарнитуры можно разделить на две основные категории:
- Антиква — шрифты с засечками.
- Гротеск, соответственно, — шрифт без засечек.
В проектах можно использовать любой, правильного и неправильного варианта тут нет. Нужно смотреть по ситуации, какой проект вы делаете и что более актуально для него.
Шрифт с засечками, как бы держит строку, а соответственно повышается удобочитаемость. Часто шрифты с засечками создают ощущение профессионализма и авторитетности предоставляемой информации, выражают уважение, подчеркивают стабильность и консерватизм в лучшем понимании этого слова. Шрифты без засечек, как правило, акцентируют рациональность, следование стилю, молодость и современность. Помогают создать пространство между буквами, а также отделить один знак от другого.
Кегль — высота буквы, включающая в себя нижние и верхние выносные элементы. Измеряется в типографских пунктах (обозначается как pt). Например, текст набранный 14 кеглем, будет равен 14 pt по высоте.
Интерлиньяж — межстрочный интервал. Расстояние между базовыми линиями соседних строк.
Кернинг — расстояние между буквами. Основная суть кернинга — подбор различных интервалов между различными парами конкретных букв для увеличения удобочитаемости.
Есть замечательная игра-тренажер — Kern Type. Просто расставьте все буквы по местам. На самом деле это не так-то просто. Процесс достаточно сложен и требует отличного глазомера. Особенно этот опыт будет полезен при создании логотипов.
Что мы делаем не так?
Используем большое количество шрифтов
Желательно использовать не более 3-х начертаний. Это могут быть шрифты как одной гарнитуры, так и разных. Например, гарнитура Roboto содержит довольно большое количество различных начертаний. Из них легко можно выбрать три, которые, как мы считаем, подойдут для нашего сайта. Допустим, это будут Light, Regular и Bold. Для заголовков можно использовать шрифт Bold или Light, для кнопок Bold, для основного текста Regular. Таким образом, используя одну гарнитуру, мы обеспечили наш сайт правильной типографикой. Естественно, все зависит от тематики сайта и идеи, которую вы планируете заложить в дизайн. Мой пример относится к универсальным и не претендует на что-то уникальное или неординарное.
Не знаем какого размера должен быть шрифт
Размер текста в вебе не должен быть меньше 12 пикселей. Лучший выбор — в пределах 14–18 px для основного текста. Не слишком большой и в то же время удобочитаемый. Причем, если уж мы выбрали размер 16 px, он должен оставаться 16 px на всех страницах сайта и не скакать плюс-минус 1 px от блока к блоку. Относится это и к интерлиньяжу, он везде должен быть одинаков.
Размер шрифтов надо указывать целыми числами, не используя десятичныхдробей, например 16,28 px. И, конечно же, в фотошопе необходимо перевести pt в px. Для этого выбираете в меню: Редактирование — Установки — Основные. Далее — Единицы измерения и линейки. Меняете в выпадающих меню «Текст», «Линейки» пункты на пиксели. Жмете «OK».
Длина строки — разве это важно?
Длина строки не должна превышать 600 px. Это оптимальный размер для комфортного перемещения взгляда с одной строчки на другую. Очень широкую контентную часть тяжело читать — часто просто теряешь ту строчку, на которую собирался перейти после прочтения длинной предыдущей строки. Если все-таки необходимо растянуть текстовый блок на 1000 px и более по ширине, можно попробовать разбить текст на две или более колонок. Другой вариант — сделать межстрочное расстояние чуть больше обычного, чтобы визуально сильнее отделить строки друг от друга. Не забывайте разделять текст абзацами, это также поможет сделать его легко читаемым.
Интерлиньяж соответствует размеру шрифта
Расстояние между строками практически всегда должно быть больше размера шрифта. За исключением заголовков. Чтобы достигнуть баланса между текстом и «воздухом», сделайте межстрочное расстояние примерно в полтора раза больше высоты строчных букв. Или устанавливаем интерлиньяж, равный 150% размера шрифта. Например размер текста 14 px, тогда интрерлиньяж — 21 px. 14 / 2 = 7 + 14 = 21.
Выбираем любой понравившийся шрифт
Думаю, уже всем известно, что шрифты для дизайна веб-сайтов лучше всего использовать с fonts.google.com и webfont.ru, если, конечно, заказчик не предоставил вам свой шрифт.
O Lorem, lorem...
Совершенно естественно, что при разработке сайта почти никогда не используется тот контент, который там будет — зачастую, это контента ещё просто не существует. Поэтому дизайнеры (да и верстальщики тоже) используют «рыбу» — произвольный текст, который вписывается в контентные блоки. Это довольно удобно, особенно для дизайнеров, ведь теперь пресловутый «Lorem Ipsum...» можно вставить прямо из фотошопа (Меню: Текст — Вставить Lorem Ipsum). Но для русскоязычных сайтов делать это не рекомендуется — латиница не дает представления о том, как будет выглядеть текст, набранный кириллическим шрифтом. Поэтому генератор текстов вам в помощь.
Ссылки
Проверка дизайна на правильность проста: если зритель, не притрагиваясь к мыши, может угадать, где ссылка, а где нет, — перед нами хороший сайт. Поэтому необходимо заранее продумать, как будут выглядеть все ссылки на сайте. Допустим, все кликабельные элементы — одного цвета, например красные, а не кликабельные другого — черного. Тогда никто не будет путаться.
Часто встречается такое: заголовок выделен красным цветом (ведь надо его как-то выделить), дальше еще несколько очень важных фраз УТП синего цвета и все это вперемешку с обычным текстом черного цвета. В конце текста кнопочка, тоже красная. Понятно, что надо кликать на кнопку, но, оказывается, кликабельным был еще и текст, окрашенный в синий (он открывал дополнительную информацию). Но кто знал, кто знал…
Выравнивание
Есть текстовые блоки, которые очень часто выравниваются неправильно — это выравнивание по ширине, выравнивание посередине и выравнивание по правому краю. Во всех этих случаях читать текст неудобно, и визуально он выглядит непривлекательно. Выравнивание ВСЕГДА должно быть по левому краю. Даже если очень хочется сделать его по правому краю (просто потому что вам кажется — композиционно должно быть именно так) — это неправильно Исключением может быть одно или два коротких предложения, которые, скорее всего, являются подзаголовками для основного текста.
Контраст
Контраст — это одно из основных средств выразительности в дизайне. Не нужно бояться больших форм и пустых пространств! Нарочито крупная типографика становится самостоятельным элементом, не требующим дополнительных графических средств оформления. Хороший пример контраста в цветах, формах и размерах всех объектов.
Стили
Нужно всегда думать о том, какую информацию вы пытаетесь донести посетителю. Выбирая шрифт, следует помнить, что счастливые сообщения должны сопровождаться легкими, воздушными и мягкими формами шрифтов, в то время как сообщения каких-то более мрачных тем (например, Хэллоуин) лучше было бы сопровождать шрифтами с более жестким начертанием. С помощью типографики веб-дизайнеры подчеркивают атмосферу и стиль страницы, а также создают благотворную почву для эмоционального отклика.
Хорошая типографика – это качество, которое человек, заходя на ваш сайт, не замечает, но чувствует.
Комментарии (31)
Loki3000
27.03.2017 16:19+4Размер текста в вебе не должен быть меньше 12 пикселей
А что такое размер текста? Это кегль, интерлиньяж или, может, высота букв без выносных элементов? А то внезапно это понятие появилось в тексте — как хочешь, так его и понимай.
alexkunin
27.03.2017 17:26+2Там если абзац дочитать, то ясно, что это не интерлиньяж — т.к. «Относится это и к интерлиньяжу». А вообще раз уж мы о вебе, то вроде как можно задать только две вертикальных характеристики — «кегль» и интерлиньяж. Методом исключения получается «кегль».
Но дальше, кстати, путаница, поэтому кегль в кавычках. Быстрый гуглеж на английском не дал вообще ничего: The font-size CSS property specifies the size of the font. Спасибо, Кэп.
Быстрый гуглеж на русском дал вот что: Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки (по ссылке картинка, из которой видно, что это не кегль). Авторитетность источника под вопросом.
Ну, и 12 пикселей звучит очень категорично. А если у девайса 450 ппи? Или 36 ппи? Я бы скорее дал формулу, в которой совместил бы предполагаемое расстояние до глаз читателя (или усреднить для наладонника и стационарного дисплея?) и количество точек на дюйм (возможно, два варианта — без сглаживания и со сглаживанием, во втором случае можно и пониже опустить планку в пикселях).Loki3000
27.03.2017 17:47+1Ну вот, прояснили так, что ничего не прояснили. Пришлось брать и самому мерить. Получилось что источник по ссылке прав: высота шрифта составляет кегль + некий отступ сверху. Для 12 и 16 шрифта этот отступ составил 1px, для 24 и 36 — 2px. Резонно предположить что этот отступ как-то вычисляется от высоты шрифта.
Так что метод исключения не сработал.
И сглаживание, кстати, на высоту шрифта не влияет — только на ширину.alexkunin
27.03.2017 17:57+1Я и не прояснил, а только показал начало «расследования», и вывод — дело темное, вопрос неоднозначный, авторитеты не дают определения.
И как это так метод исключения не сработал, если однозначно привел к ЦСС-свойству font-size из двух возможных: font-size и line-height? Очень даже сработал.
Про сглаживание — я говорил о читаемости. 6 пикселей без сглаживания можно только на спец-шрифте прочитать, который специально выверяли для мелких кеглей (это в эру Вин 3.1 было распространено, процесс кажется хинтинг называется), а со сглаживанием можно почти любой шрифт без подготовки, и будет сносно. Стало быть, при одинаковых прочих условиях (расстояние до глаз, ППИ-ДПИ, шрифт, размер шрифта) на монохромном электронно-чернильном экране минимальный размер будет больше, чем на экране любой другой технологии с градациями серого.Loki3000
27.03.2017 18:04+1И как это так метод исключения не сработал, если однозначно привел к ЦСС-свойству font-size из двух возможных: font-size и line-height? Очень даже сработал.
От font-size к font-size и привел? Это было ожидаемо:)
Методом исключения получается «кегль».
А вот и не получается, как оказалось. А что получается и откуда берется как раз и непонятно.alexkunin
27.03.2017 18:13+1Какое-то кардинальное недопонимание. Еще раз: статья о типографике в вебе; упомянут минимальный размер текста в пикселях; общепринято размер текста — некое вертикальное измерение; из вертикальных измерений в вебе настраиваются два — font-size и line-height; из недочитанного вами абзаца следует, что line-height исключатеся. Я воспользовался неким условным термином «кегль» — именно в кавычках, и дальше пояснил, отчего в кавычках, и обрисовал проблему с четким определением, что же именно регулируется величиной, указанной с свойстве font-size.
Для меня цепочка выглядит вполне логичной и связанной, метод исключения очевидным и однознаным образом приводит к единственно верному ответу в терминах предметной области.
Если для вас это не так логично или не очень связно, то, похоже, наши с вами понятия о логичности и связности кардинально отличаются, и вести дискуссию мы не можем, так не имеем область пересечения понятий и методик (вплоть до чтения и анализа текстов).
Спасибо за внимание, на сем закругляем эту ветку.
JeStoneDev
28.03.2017 12:59+1А вот и не получается, как оказалось. А что получается и откуда берется как раз и непонятно.
Высота букв как и высота области размещения букв зависит от параметров шрифта.
Тут можно подробнее почитать
dmitry_ch
04.04.2017 15:50Бросайте уже эти «пиксели». Пиксель — это элемент картинки (picture element), который на все большем проценте экранов даже уже и не виден.
А число 12 — вообще, откуда вы его взяли. Знаю людей, которые и с меньшими шрифтами рады работать (им удобно), знаю, наоборот, тем, кому и более крупный кегль совершенно не нравится. И это не только вкусовщина, просто у кого-то зрение и чувство эстетики одни, у кого-то — другие.
Про выравнивание тем более примечательно читать. Не надо так категорично, для начала. Если мы имеем дело с узкими колонками, то выравнивание по двум сторонам будет во многих случаях разумнее (при условии, что мы имеем переносы).
Страшная статья. Не надо так категорично ни о чем. Важно общее впечатление, а это называется «вкус». Так вот если текст оформлен со вкусом, то никакого анализа размеров и отступов не нужно будет.
TutmeeAgency
04.04.2017 18:21Дизайнеры рисуют в пикселях, верстальщики верстают тоже в пикселях, так зачем же их бросать? Мне кажется еще рано это делать.))
Шрифт, размером меньше 12-ти — это шрифт, которым написано число и год над вашим комментарием. (10px) Если весь текст был бы такого размера — читать было бы сложновато.
Браузеры пока не умеют переносить часть слова на следующую строку (без подключения специального плагина), поэтому выравнивание на всю ширину пока лучше не делать.
helshi
05.04.2017 08:01+1Правильно! Зачем нам эти пиксели! Давайте работать "на глаз". Тут — так, там — сяк. Главное — со вкусом, который у всех разный)))
dmitry_ch
05.04.2017 08:55Браузеры пока не умеют переносить часть слова на следующую строку
Уже умеют, хотя пока зависит от браузера. Для нормальной совместимости неплохо расставить в отдаваемом клиенту тексте невидимые (soft) переносы (­), чтобы браузер даже без словаря переносов осилил этот процесс.
А с пикселями: мне самому нравится указывать размер в точках, но с переходом на экран высокого разрешения (4K или Retina) мы сталкиваемся с попытками браузера на большем числе точек отрисовать меньшее разрешение, т.е. все равно теряем прямой контроль на процессом в старом смысле «точка-в-точку». В то же время дизайн, построенный на относительных размерах, в иных случаях тоже неплох.
В общем, я лично жду единообразного отображения размеров между браузерами. Пока без css-ресета тяжеловато, да.
ewal
27.03.2017 17:02-1Отличная статья! Думаю про трекинг тоже стоило сделать выноску) Автор молодец!
ewal
27.03.2017 20:13-1ппц, за что -1 поставили?) Видимо ставит гамнодизайнер, который не знает что такое трекинг в шрифте?))) Простите
fredjansen25
30.03.2017 09:10+1За использование для основного текста шрифтов отличных от дефолтных (font-style статья) и с отличным от дефолтного размера (font-size: 100%) в браузере дизайнерам нужно отрывать ноги!
А то поналепят серифов с размером кегля 8 пикселей, так на экране с высоким разрешением читать невозможно :(
Оставьте пользователю право решать, каким шрифтом какого размера он хочет читать текст!
Спасает только Reader-плагин в браузере.ewal
30.03.2017 09:13+2да вы батько, далеки от понятия дизайна) Думаю вам стоит больше набираться опыта
Areso
28.03.2017 10:06+1Если у нас не моноширинный шрифт, то чем плохо выравнивание по ширине? Не дизайнер, просто спрашиваю.
hardtop
28.03.2017 10:20+1Нет ничего страшного в выравнивании по ширине. В печатных изданиях этим давно пользуются и всё ок — какой-нить PageMaker еще 20 лет назад умел менять кернинг и размер пробела так, что текст нормально читался, и правый край колонки смотрелся хорошо.
А вот браузеры и Word — вот они так не умеют менять кернинг, поэтому просто меняют размер пробела. Расстояние между словами скачет, что сильно ухудшает читаемость. И так верстают только...
hardtop
28.03.2017 10:11+2Если дизайнер вставляет в макет Lorem Ipsum — это грусть-тоска. Броский заголовок, написанный хорошим шрифтом всегда лучше продаёт (заказчику, клиенту, потребителю), чем нерелевантный сгенерированный текст. Попробуйте на сайте Икеи или Эппл поменять контент на Лорем Ипсум… Дрянь же получится.
zahmTOD
28.03.2017 12:19+2Заголовки да. Можно поднапрячься, и выдумать что-то правдоподобное. А вот с массивами текста уже не выйдет, особенно если у проекта текста чуть больше чем в лэндинге.
Я, например, использую fishtext.ru, вместо lipsum.com в русско-язычных проектах.
shimanskybiz
28.03.2017 12:50+1Для тех кто имеет дело с веб типографикой достаточно усвоить что в принтдизайне с помошью магиических программ можно выравнивать по бейслайну. В веб типографике — всевозможные костыли что бы выравнивать по бейслану либо плюнуть и хотя бы укдладываться в кратную сетку 4x мобильная и 8x десктопная. Стандартный подход: элементы интерфейса кратны 8, шрифты же — 4. В любом случае если пользоваться наложенной сеткой и пользоваться модуларскейл — результаты будут заметными а дальше каждый идет свои путем
OlegZH
28.03.2017 16:20+2Интересно, а кто-нибудь пытался делать Web-вариант TeX'а?
maria-tyan
05.04.2017 08:48+1Так Википедия вполне себе для отображения сложных математических формул использует старый добрый TeX.
OlegZH
06.04.2017 13:27+1Речь идёт о том, чтобы писать весь исходный код в TeX'е, а на выходе получать то, что можно просмотреть в браузере.
helshi
04.04.2017 15:38+1Интересно оформлены иллюстрации)) Но не хватает примеров или рисунков к тексту во второй части статьи — «Что мы делаем не так?».
TutmeeAgency
04.04.2017 15:38Спасибо!) Больше примеров и рисунков будет в следующей статье по этой теме;)
risotto
TutmeeAgency
Спасибо, за замечание. Исправил. Видимо, в процессе правок, корректировок и переноса статьи на сайт послетали тексты.