27 марта в 14:59

Типографика в вебе

Статья поможет разобраться с основными терминами в типографике. А чтобы информация лучше и легче воспринималась, скучные тексты проиллюстрированы веселыми картинками. Так же в статье собраны самые распространенные ошибки, которые допускаются веб-дизайнерами при работе с текстом и даны рекомендации как их избежать.

image

Типографика — сильнейший инструмент для выражения посыла в веб-дизайне. С его помощью вы можете объединить текстовую и визуальную составляющие, что поможет вам достучаться до посетителя. Правильное использование типографики поможет избежать типичных ошибок, допускаемых дизайнерами при создании очередного шедевра. Постараемся понять, что же мы делаем не так, и как избежать ошибок в будущем.

Для начала давайте разберемся с терминологией. Наверняка большинство терминов вам знакомы, но еще разок ознакомиться с определениями не будет лишним. Возможно, это дополнит ту информацию, которой вы уже обладаете.

Типографика — свод законов, правил и норм оформления текста, основанных на изучении восприятия набора читателем. Знание и понимание типографики превращают текст в инструмент построения композиции, делают его живым, придают характер и способность передать идею не только при помощи содержания, но и графически.

Гарнитура — шрифт или несколько шрифтов, имеющих стилистическое единство начертания. Состоит из набора знаков. Часто это понятие путают с понятием «шрифт», хотя шрифт — это определенное начертание знаков, в то время как гарнитура определяет общее «семейство» шрифтов.

image

Гарнитуры можно разделить на две основные категории:

  • Антиква — шрифты с засечками.
  • Гротеск, соответственно, — шрифт без засечек.

В проектах можно использовать любой, правильного и неправильного варианта тут нет. Нужно смотреть по ситуации, какой проект вы делаете и что более актуально для него.

image

Шрифт с засечками, как бы держит строку, а соответственно повышается удобочитаемость. Часто шрифты с засечками создают ощущение профессионализма и авторитетности предоставляемой информации, выражают уважение, подчеркивают стабильность и консерватизм в лучшем понимании этого слова. Шрифты без засечек, как правило, акцентируют рациональность, следование стилю, молодость и современность. Помогают создать пространство между буквами, а также отделить один знак от другого.

Кегль — высота буквы, включающая в себя нижние и верхние выносные элементы. Измеряется в типографских пунктах (обозначается как pt). Например, текст набранный 14 кеглем, будет равен 14 pt по высоте.

image

Интерлиньяж — межстрочный интервал. Расстояние между базовыми линиями соседних строк.

image

Кернинг — расстояние между буквами. Основная суть кернинга — подбор различных интервалов между различными парами конкретных букв для увеличения удобочитаемости.

Есть замечательная игра-тренажер — Kern Type. Просто расставьте все буквы по местам. На самом деле это не так-то просто. Процесс достаточно сложен и требует отличного глазомера. Особенно этот опыт будет полезен при создании логотипов.

Что мы делаем не так?


image

Используем большое количество шрифтов

Желательно использовать не более 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). Но для русскоязычных сайтов делать это не рекомендуется — латиница не дает представления о том, как будет выглядеть текст, набранный кириллическим шрифтом. Поэтому генератор текстов вам в помощь.

Ссылки

Проверка дизайна на правильность проста: если зритель, не притрагиваясь к мыши, может угадать, где ссылка, а где нет, — перед нами хороший сайт. Поэтому необходимо заранее продумать, как будут выглядеть все ссылки на сайте. Допустим, все кликабельные элементы — одного цвета, например красные, а не кликабельные другого — черного. Тогда никто не будет путаться.

Часто встречается такое: заголовок выделен красным цветом (ведь надо его как-то выделить), дальше еще несколько очень важных фраз УТП синего цвета и все это вперемешку с обычным текстом черного цвета. В конце текста кнопочка, тоже красная. Понятно, что надо кликать на кнопку, но, оказывается, кликабельным был еще и текст, окрашенный в синий (он открывал дополнительную информацию). Но кто знал, кто знал…

Выравнивание

Есть текстовые блоки, которые очень часто выравниваются неправильно — это выравнивание по ширине, выравнивание посередине и выравнивание по правому краю. Во всех этих случаях читать текст неудобно, и визуально он выглядит непривлекательно. Выравнивание ВСЕГДА должно быть по левому краю. Даже если очень хочется сделать его по правому краю (просто потому что вам кажется — композиционно должно быть именно так) — это неправильно Исключением может быть одно или два коротких предложения, которые, скорее всего, являются подзаголовками для основного текста.

Контраст

Контраст — это одно из основных средств выразительности в дизайне. Не нужно бояться больших форм и пустых пространств! Нарочито крупная типографика становится самостоятельным элементом, не требующим дополнительных графических средств оформления. Хороший пример контраста в цветах, формах и размерах всех объектов.

Стили

Нужно всегда думать о том, какую информацию вы пытаетесь донести посетителю. Выбирая шрифт, следует помнить, что счастливые сообщения должны сопровождаться легкими, воздушными и мягкими формами шрифтов, в то время как сообщения каких-то более мрачных тем (например, Хэллоуин) лучше было бы сопровождать шрифтами с более жестким начертанием. С помощью типографики веб-дизайнеры подчеркивают атмосферу и стиль страницы, а также создают благотворную почву для эмоционального отклика.

image

Хорошая типографика – это качество, которое человек, заходя на ваш сайт, не замечает, но чувствует.
Mikle @TutmeeAgency
карма
4,0
рейтинг 0,0
Web development, IT
Похожие публикации

Комментарии (31)

  • +3
    помогают создать пространство между буквами, а также отделить один знак от другого
    Да ладно! Наоборот. Засечки связывают текст в линию, скрадывая пробелы между символами. Это аксиома академической школы шрифтового дизайна.
    • 0
      Спасибо, за замечание. Исправил. Видимо, в процессе правок, корректировок и переноса статьи на сайт послетали тексты.
  • +4
    Размер текста в вебе не должен быть меньше 12 пикселей

    А что такое размер текста? Это кегль, интерлиньяж или, может, высота букв без выносных элементов? А то внезапно это понятие появилось в тексте — как хочешь, так его и понимай.
    • +1
      Вероятно, имелось в виду значение font-size
      • +1
        Это очевидно. А какой из размеров задается этим параметром? Что такое «высота текста 12px»? Это в каком именно месте его надо измерять?
    • +2
      Там если абзац дочитать, то ясно, что это не интерлиньяж — т.к. «Относится это и к интерлиньяжу». А вообще раз уж мы о вебе, то вроде как можно задать только две вертикальных характеристики — «кегль» и интерлиньяж. Методом исключения получается «кегль».

      Но дальше, кстати, путаница, поэтому кегль в кавычках. Быстрый гуглеж на английском не дал вообще ничего: The font-size CSS property specifies the size of the font. Спасибо, Кэп.

      Быстрый гуглеж на русском дал вот что: Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки (по ссылке картинка, из которой видно, что это не кегль). Авторитетность источника под вопросом.

      Ну, и 12 пикселей звучит очень категорично. А если у девайса 450 ппи? Или 36 ппи? Я бы скорее дал формулу, в которой совместил бы предполагаемое расстояние до глаз читателя (или усреднить для наладонника и стационарного дисплея?) и количество точек на дюйм (возможно, два варианта — без сглаживания и со сглаживанием, во втором случае можно и пониже опустить планку в пикселях).
      • +1
        Ну вот, прояснили так, что ничего не прояснили. Пришлось брать и самому мерить. Получилось что источник по ссылке прав: высота шрифта составляет кегль + некий отступ сверху. Для 12 и 16 шрифта этот отступ составил 1px, для 24 и 36 — 2px. Резонно предположить что этот отступ как-то вычисляется от высоты шрифта.
        Так что метод исключения не сработал.
        И сглаживание, кстати, на высоту шрифта не влияет — только на ширину.
        • +1
          Я и не прояснил, а только показал начало «расследования», и вывод — дело темное, вопрос неоднозначный, авторитеты не дают определения.

          И как это так метод исключения не сработал, если однозначно привел к ЦСС-свойству font-size из двух возможных: font-size и line-height? Очень даже сработал.

          Про сглаживание — я говорил о читаемости. 6 пикселей без сглаживания можно только на спец-шрифте прочитать, который специально выверяли для мелких кеглей (это в эру Вин 3.1 было распространено, процесс кажется хинтинг называется), а со сглаживанием можно почти любой шрифт без подготовки, и будет сносно. Стало быть, при одинаковых прочих условиях (расстояние до глаз, ППИ-ДПИ, шрифт, размер шрифта) на монохромном электронно-чернильном экране минимальный размер будет больше, чем на экране любой другой технологии с градациями серого.
          • +1
            И как это так метод исключения не сработал, если однозначно привел к ЦСС-свойству font-size из двух возможных: font-size и line-height? Очень даже сработал.

            От font-size к font-size и привел? Это было ожидаемо:)

            Методом исключения получается «кегль».

            А вот и не получается, как оказалось. А что получается и откуда берется как раз и непонятно.
            • +1
              Какое-то кардинальное недопонимание. Еще раз: статья о типографике в вебе; упомянут минимальный размер текста в пикселях; общепринято размер текста — некое вертикальное измерение; из вертикальных измерений в вебе настраиваются два — font-size и line-height; из недочитанного вами абзаца следует, что line-height исключатеся. Я воспользовался неким условным термином «кегль» — именно в кавычках, и дальше пояснил, отчего в кавычках, и обрисовал проблему с четким определением, что же именно регулируется величиной, указанной с свойстве font-size.

              Для меня цепочка выглядит вполне логичной и связанной, метод исключения очевидным и однознаным образом приводит к единственно верному ответу в терминах предметной области.

              Если для вас это не так логично или не очень связно, то, похоже, наши с вами понятия о логичности и связности кардинально отличаются, и вести дискуссию мы не можем, так не имеем область пересечения понятий и методик (вплоть до чтения и анализа текстов).

              Спасибо за внимание, на сем закругляем эту ветку.
            • +1
              А вот и не получается, как оказалось. А что получается и откуда берется как раз и непонятно.

              Высота букв как и высота области размещения букв зависит от параметров шрифта.
              Тут можно подробнее почитать
    • 0
      конечно же имеется ввиду кегль. Именно = размер текста))
    • 0
      Бросайте уже эти «пиксели». Пиксель — это элемент картинки (picture element), который на все большем проценте экранов даже уже и не виден.

      А число 12 — вообще, откуда вы его взяли. Знаю людей, которые и с меньшими шрифтами рады работать (им удобно), знаю, наоборот, тем, кому и более крупный кегль совершенно не нравится. И это не только вкусовщина, просто у кого-то зрение и чувство эстетики одни, у кого-то — другие.

      Про выравнивание тем более примечательно читать. Не надо так категорично, для начала. Если мы имеем дело с узкими колонками, то выравнивание по двум сторонам будет во многих случаях разумнее (при условии, что мы имеем переносы).

      Страшная статья. Не надо так категорично ни о чем. Важно общее впечатление, а это называется «вкус». Так вот если текст оформлен со вкусом, то никакого анализа размеров и отступов не нужно будет.
      • 0
        Дизайнеры рисуют в пикселях, верстальщики верстают тоже в пикселях, так зачем же их бросать? Мне кажется еще рано это делать.))

        Шрифт, размером меньше 12-ти — это шрифт, которым написано число и год над вашим комментарием. (10px) Если весь текст был бы такого размера — читать было бы сложновато.

        Браузеры пока не умеют переносить часть слова на следующую строку (без подключения специального плагина), поэтому выравнивание на всю ширину пока лучше не делать.
      • +1

        Правильно! Зачем нам эти пиксели! Давайте работать "на глаз". Тут — так, там — сяк. Главное — со вкусом, который у всех разный)))

        • 0
          Браузеры пока не умеют переносить часть слова на следующую строку

          Уже умеют, хотя пока зависит от браузера. Для нормальной совместимости неплохо расставить в отдаваемом клиенту тексте невидимые (soft) переносы (­), чтобы браузер даже без словаря переносов осилил этот процесс.

          А с пикселями: мне самому нравится указывать размер в точках, но с переходом на экран высокого разрешения (4K или Retina) мы сталкиваемся с попытками браузера на большем числе точек отрисовать меньшее разрешение, т.е. все равно теряем прямой контроль на процессом в старом смысле «точка-в-точку». В то же время дизайн, построенный на относительных размерах, в иных случаях тоже неплох.

          В общем, я лично жду единообразного отображения размеров между браузерами. Пока без css-ресета тяжеловато, да.
  • –1
    Отличная статья! Думаю про трекинг тоже стоило сделать выноску) Автор молодец!
    • –1
      ппц, за что -1 поставили?) Видимо ставит гамнодизайнер, который не знает что такое трекинг в шрифте?))) Простите
    • +2
      Спасибо за отзыв! ;)
    • +1
      За использование для основного текста шрифтов отличных от дефолтных (font-style статья) и с отличным от дефолтного размера (font-size: 100%) в браузере дизайнерам нужно отрывать ноги!
      А то поналепят серифов с размером кегля 8 пикселей, так на экране с высоким разрешением читать невозможно :(

      Оставьте пользователю право решать, каким шрифтом какого размера он хочет читать текст!

      Спасает только Reader-плагин в браузере.
      • +2
        да вы батько, далеки от понятия дизайна) Думаю вам стоит больше набираться опыта
  • +1
    Если у нас не моноширинный шрифт, то чем плохо выравнивание по ширине? Не дизайнер, просто спрашиваю.
    • +1
      Нет ничего страшного в выравнивании по ширине. В печатных изданиях этим давно пользуются и всё ок — какой-нить PageMaker еще 20 лет назад умел менять кернинг и размер пробела так, что текст нормально читался, и правый край колонки смотрелся хорошо.

      А вот браузеры и Word — вот они так не умеют менять кернинг, поэтому просто меняют размер пробела. Расстояние между словами скачет, что сильно ухудшает читаемость. И так верстают только...
  • +2
    Если дизайнер вставляет в макет Lorem Ipsum — это грусть-тоска. Броский заголовок, написанный хорошим шрифтом всегда лучше продаёт (заказчику, клиенту, потребителю), чем нерелевантный сгенерированный текст. Попробуйте на сайте Икеи или Эппл поменять контент на Лорем Ипсум… Дрянь же получится.
    • +2
      Заголовки да. Можно поднапрячься, и выдумать что-то правдоподобное. А вот с массивами текста уже не выйдет, особенно если у проекта текста чуть больше чем в лэндинге.
      Я, например, использую fishtext.ru, вместо lipsum.com в русско-язычных проектах.
  • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    Интересно, а кто-нибудь пытался делать Web-вариант TeX'а?
    • +1
      Так Википедия вполне себе для отображения сложных математических формул использует старый добрый TeX.
      • +1
        Речь идёт о том, чтобы писать весь исходный код в TeX'е, а на выходе получать то, что можно просмотреть в браузере.
  • +1
    Интересно оформлены иллюстрации)) Но не хватает примеров или рисунков к тексту во второй части статьи — «Что мы делаем не так?».
    • 0
      Спасибо!) Больше примеров и рисунков будет в следующей статье по этой теме;)

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.