Самый понятный учебник веб-шрифтов и основных принципов типографики
Под "веб-типографикой" понимают внешний вид всего текста на сайте. Она включает основные свойства текста CSS, например, какой тип шрифта использовать, когда выделять курсивом. Но типографика - это намного больше. Это пространство между и вокруг букв, слов и строк. Это размер различных участков текста по отношению друг к другу и история каждого семейства шрифтов.
Многие типографические решения вам подскажет дизайнер. Проблема в том, что типографика - это "невидимое" искусство. Чтобы понять, о чем просят дизайнеры, нужно уметь видеть типографику так же, как они.
Этот урок посвящен не только механике добавления веб-шрифтов на сайт или свойствам CSS для перемещения текста. Мы также выясним, как правильно использовать все эти инструменты для создания красивых, профессиональных сайтов. Допустим, дизайнер спрашивает: "Можно ли увеличить отступы в этом абзаце?" Так вот, к концу этого урока вы будете не только понимать о чем говорят дизайнеры, но и почему они этого хотят.
Можно позабыть конкретные свойства CSS, но концепции типографики, рассмотренные ниже, останутся с вами навсегда, потому что это не случайные правила - они основаны на функциях. Они делают ваш контент более читабельным и помогают эффективнее доносить информацию.
Начнем с изучения того, как отображать веб-страницы собственным* шрифтом, ибо это самый интересный аспект современной веб-типографики. За последние несколько лет веб-шрифты сильно изменились, поэтому, прежде чем приступить к созданию нашего примера, вам необходимо получить базовое представление о различных форматах шрифтов в Интернете.
* - в оригинале: custom font - "пользовательский шрифт".
Давным-давно существовали только "безопасные веб-шрифты". Их было около дюжины и они были предустановлены на большинстве компьютеров. Не было такого понятия, как пользовательский файл шрифта, отправляемый браузерам для использования на вашем сайте.
Если вам был нужен особый шрифт, единственным вариантом было экспортировать изображение текста и включить его в веб-страницу с помощью элемента <img/>. Это безумно ограничивало возможности веб-дизайнеров и приводило к довольно сложным ситуациям для разработчиков. Честно говоря, мы не знаем, как мы выжили в ту эпоху HTML и CSS.
Примерно в 2010 году браузеры начали поддерживать собственные шрифты, что было замечательно. Однако для каждого браузера и дивайса требовался свой формат файла. Соответственно, большинство веб-сайтов предоставляли 4 разных файла веб-шрифтов:
| ФОРМАТ ФАЙЛА | БРАУЗЕР/УСТРОЙСТВО |
| .svg | Очень старые Safari (iOS и десктоп) |
| .eot | Internet Explorer |
| .ttf | Все кроме Internet Explorer |
| .woff | Более новые браузеры |
В результате появился "пуленепробиваемый синтаксис" Bulletproof @font-face syntax, с которым вы наверняка столкнетесь в какой-то момент своей карьеры веб-разработчика.
С недавнего времени* были стандартизированы Web Open Font Format (WOFF), и жить стало немного проще. Более 90% современных браузеров поддерживают шрифты в формате .woff. Также растет и поддержка его следующей эволюции - .woff2. WOFF2 похож на оригинальный формат WOFF, но предлагает значительное уменьшение размера файла (что увеличивает производительность).
* - Данный учебник был опубликован в 2017 году.
Со временем, вероятно, вы полностью перейдете на WOFF2, но сейчас мы рекомендуем как WOFF, так и WOFF2. Это обеспечит безотказную работу на старых браузерах и повысит производительность на современных. Если только устаревшие браузеры не составляют большую часть вашей целевой аудитории, шрифты .ttf, .svg и .eot уходят в прошлое.
В Интернете есть множество мест, где можно скачать как бесплатные, так и премиум шрифты. Три наших фаворита перечислены ниже. Какой шрифт использовать, обычно решает ваш дизайнер (и его бюджет), но для разработчика полезно знать компромиссы между этими вариантами.
| САЙТ | ЦЕНА | КАЧЕСТВО | ВЫБОР |
| Font Squirrel | Халява | Пан-Либо-Пропал | Огромный |
| Google Fonts | Халява | Хорошее | Приличный |
| Fontspring | Дорого | Хорошее | Превосходный |
Шрифты WOFF разработаны специально для современного веба, в то время как шрифты для ноутбуков/ПК содержат дополнительные функции, полезные для программ редактирования графики, таких как Adobe Illustrator. Обязательно загрузите или приобретите веб-версию шрифтов, которые вы хотите использовать, а не только версию для ноутбука/ПК.
Итак, мы готовы к экспериментам с веб-шрифтами. Для этого мы создадим этот пример веб-сайта. Мы подумали, что вам, вероятно, не захочется начинать его с нуля, поэтому загрузите начальный проект. Распакуйте его и откройте папку web-typography в своем любимом текстовом редакторе. Если у вас нет любимого текстового редактора, воспользуйтесь редактором Atom.
У нас есть 6 HTML-документов, использующих таблицу стилей typo.css. Мы продемонстрируем различные принципы типографики, добавив в каждый из этих HTML-файлов некоторые стили для конкретной страницы.
Откройте один из HTML-файлов в браузере. Вы увидите, что наш исходный проект очень близок к финальному, за исключением веб-шрифтов и других типографических свойств CSS.
Существует два различных способа добавления веб-шрифтов на ваш сайт: локальное размещение [locally hosted] и внешнее размещение [externally hosted]. Ниже мы рассмотрим оба способа. Сначала в наш проект мы добавим локально размещенный веб-шрифт. Этот процесс состоит из трех шагов:
Мы будем работать с файлами web-fonts.html и typo.css. Откройте их в текстовом редакторе, если вы еще этого не сделали.
Итак, нам нужен веб-шрифт. В нашем примере используется бесплатный шрифт Roboto. Скачайте его с Font Squirrel. Убедитесь, что выбрана вкладка Webfont Kit, а не кнопка Download TTF. Снимите флажки со всех форматов, кроме WOFF, поскольку мы будем использовать только его. Затем нажмите на Download @font-face Kit.
В итоге вы получите ZIP-файл с лицензией, инструкциями и папкой web fonts с кучей поддиректорий. Шрифт Roboto имеет множество различных начертаний - светлое, обычное, полужирное, курсивное и конденсированное. Каждая из этих папок содержит разные начертания. Нужная нам называется roboto_light_macroman. Откройте ее и скопируйте файл Roboto-Light-webfont.woff в наш проект.
Отлично. У нас есть файл WOFF. Для использования на нашей веб-странице, нужно вставить его в таблицу стилей с помощью правила @font-face. Веб-шрифты всегда должны быть включены в верхнюю часть таблицы стилей, поэтому добавьте код в самое начало typo.css:
@font-face {
font-family: 'Roboto';
src: url(
'Roboto-Light-webfont.woff') format(
'woff');
}
Свойство font-family определяет, как мы будем ссылаться на этот шрифт в дальнейшем. Оно работает как внутренний ярлык, поэтому может быть любым. Оно не обязательно должно совпадать с официальным названием шрифта, но это упрощает интуитивное понимание. Как будет показано ниже, стоит оставить название как можно более общим (например, Roboto вместо Roboto Light).
Далее у нас есть свойство src, определяющее путь к файлу .woff через нотацию url(). Путь может быть абсолютным, относительным или корневым. При использовании относительного пути, как в нашем случае, он всегда будет относительным к .css-файлу, а не к HTML-документу. Нотация format() позволяет браузерам узнать, к какому формату относится файл веб-шрифта.
Перезагрузив страницу web-fonts.html, вы не увидите никаких изменений, потому что @font-face предоставил нам доступ только к нашему файлу .woff. Нам все еще нужно использовать его где-то еще в нашей таблице стилей.
В секции Выбор шрифтов говорилось про CSS-свойство font-family, определяющее, какой шрифт используется в конкретном HTML-элементе. После добавления правила @font-face at-rule мы можем использовать Roboto в качестве допустимого значения font-family в любом другом месте нашей таблицы стилей.
Давайте сделаем Roboto Light шрифтом по умолчанию для всего нашего проекта. Для этого изменим font-family в селекторе body файла typo.css:
body {
font-family: 'Roboto', sans-serif;
/* Добавьте 'Roboto' сюда */
font-size: 18px;
line-height: 1.8em;
color: #5D6063;
}
Теперь весь текст должен отображаться шрифтом Roboto Light. А это значит, что мы потеряли сравнение с системным шрифтом sans-serif в файле web-fonts.html. Исправим это, добавив внутренние стили в <head> файла web-fonts.html:
<style>
.system-fonts {
font-family: sans-serif;
}
</style>
Класс .system-fonts применяется ко второму блоку в файле web-fonts.html. Вышеуказанное правило имеет приоритет над правилом body в typo.css, поэтому, открыв web-fonts.html в браузере, увидим наш Roboto Light сверху и стандартный системный шрифт снизу:
Одно семейство шрифтов состоит из нескольких шрифтовых "лиц" [faces]*. Каждое начертание шрифта имеет в семействе свой вес или стиль. "Вес" [weight] это жирность конкретного шрифта, а "стиль" [style] - его начертание: романское (вертикальное), курсивное, конденсированное, расширенное или какое-либо другое.
* - "лицо" шрифта принято называть начертанием.
В нашем примере Roboto Light - один из шрифтов семейства Roboto. Остальные 17 шрифтов в скачанном ранее ZIP можно представить так:
В CSS вес шрифта выражается в виде числовых значений от 100 до 900. К счастью, для каждого из этих значений существуют стандартные, относительно удобные для понимания термины. "Черный" обычно означает 900, "полужирный" - 700, "обычный" - 400 и т. д. Как показано выше, большинство семейств не поставляют лица для каждого веса. В Roboto отсутствуют extra light (200), semi bold (600) и extra bold (800).
Стоит отметить, что каждая комбинация стиля и веса разработана как совершенно отдельное лицо. В высококачественном семействе шрифтов конденсированные стили - это не просто сжатые версии латинского шрифта, а полужирный шрифт - это не просто более "толстая" версия. Каждая буква в каждом начертании прорабатана вручную, чтобы обеспечить равномерное начертание текста.
Это особенно заметно в курсивных и латинских начертаниях многих шрифтов с засечками. Например, строчная буква "а" в Century Schoolbook FS (шрифт, который вы сейчас читаете) приобретает совершенно другую форму, когда она выделена курсивом.
Почему так важен этот вес и стиль? В дизайне обычно используется несколько шрифтов одного семейства, поэтому следует знать, как встроить несколько файлов .woff, представляющих родственные шрифты.
Но сначала давайте посмотрим, что происходит, когда мы не предлагаем несколько шрифтовых лиц. Обновите левый абзац в файле web-fonts.html и добавьте в него элементы <em> и <strong>:
<section class= 'section section--gray'
>
<h2>Web Fonts<h2>
<p>This paragraph is using a web font call
<em>Roboto Light</em>. It’s a
little more refined and lends some <strong>unique character </strong> to
the web page.</p>
</section>
Перезагрузив страницу, вы заметите, что полужирный текст на самом деле не такой уж и полужирный. Это происходит потому, что он синтезируется. Мы не указали начертание полужирного шрифта для элемента <strong>, поэтому браузер пытается его подделать, автоматически преобразуя Roboto Light в более толстое начертание. То же самое происходит и с курсивом в элементе <em>, но определить это немного сложнее. Такое автоматическое преобразование почти всегда приводит к некачественной типографике.
Чтобы убедиться, что полужирный и курсивный шрифты действительно синтезируются, добавьте в typo.css следующее правило. Свойство font-synthesis определяет, разрешено ли браузеру подделать его или нет. На момент написания этой статьи* только Firefox обращает внимание на font-synthesis, поэтому в Chrome или Safari это не сработает:
/* Это работает только в Firefox */
em, strong {
font-synthesis: none;
}
Откройте файл web-fonts.html в Firefox, и элементы <em> и <strong> перестанут быть курсивными или полужирными - весь абзац будет набран латинским шрифтом Roboto Light.
* - Данный учебный курс был опубликован в 2017 году.
Давайте попробуем добавить в наш проект шрифты Roboto Light Italic и Roboto Bold. Скопируйте из ZIP-файла Roboto, который мы скачали ранее, в папку web-typography следующие файлы:
Файл .woff представляет собой шрифтовое лицо одного семейства шрифтов, а @font-face позволяет нам внедрить это лицо в таблицу стилей. Наивным способом внедрения этих новых WOFF-файлов было бы простое добавление объявлений @font-face и изменение свойства font-family и по мере необходимости src. Добавьте в верхнюю часть файла typo.css следующее:
/* НЕ НАЗЫВАЙТЕ СЕМЕЙСТВА ШРИФТОВ ТАК */
@font-face {
font-family: 'Roboto Light Italic';
src: url('Roboto-LightItalic-webfont.woff') format('woff');
}
@font-face {
font-family: 'Roboto Bold';
src: url('Roboto-Bold-webfont.woff') format('woff');
}
Затем, чтобы использовать эти начертания в элементах <em> и <strong>, нам понадобятся следующие правила:
/* ЭТО НЕУКЛЮЖИЙ КОД */
em {
font-family: 'Roboto Light Italic', serif;
}
strong {
font-family: 'Roboto Bold', serif;
}
Это будет работать, и теперь при перезагрузке web-fonts.html в браузере вы должны увидеть правильные курсивные и полужирные шрифты. Проблема в том, что вручную указывать font-family каждый раз, когда мы хотим использовать курсивный или полужирный шрифт, как-то странно. Для этого следует использовать свойства CSS font-style и font-weight.
Мы оказались в этой неуклюжей ситуации из-за того, как именно мы внедрили эти новые .woff-файлы. Использование отдельных значений font-family в @font-face заставляет их выглядеть как совершенно несвязанные начертания шрифтов. Хотя на самом деле все они из семейства Roboto.
По этой причине никогда не используйте описанную выше технику для вставки нескольких начертаний одного семейства шрифтов. Прежде чем двигаться дальше, удалите оба приведенных выше фрагмента.
Чтобы сохранить родственные связи между тремя нашими шрифтами, все они должны использовать общее значение Roboto для свойства font-family. Чтобы различать светлый*, курсивный и полужирный шрифты, мы добавим в at-правило свойства font-style и font-weight. Замените все объявления @font-face в typo.css на следующие:
* - слово light из оригинала переводится в MDN по-разному: "светлый"; "сверхлегкий"
@font-face {
font-family: 'Roboto';
src: url('Roboto-Light-webfont.woff') format('woff');
font-style: normal;
font-weight: 300;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-LightItalic-webfont.woff') format('woff');
font-style: italic;
font-weight: 300;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Bold-webfont.woff') format('woff');
font-style: normal;
font-weight: 700;
}
Считайте, что каждое правило @font-face - это описание файла .woff. Первое at-правило @font-face гласит, что это шрифт романский (нормальный) Roboto, вес шрифта 300 (light - "светлый*"). Второе гласит, что он также относится к семейству Roboto и имеет вес 300, но он курсивный. Наконец, третье сообщает браузеру, что Roboto-Bold-webfont.woff содержит романический шрифт весом 700 (bold - "полужирный**").
* - кроме "светлый" и "сверхлегкий" light в MDN переводится как "сверхтонкий";
** - bold вместо ожидаемого "жирный" в MDN переводится как "полужирный".
Поскольку браузер знает, что наши шрифты связаны, наш CSS становится гораздо более интуитивным. В селекторе body мы можем задать стандартные семейство и вес шрифта. А когда мы захотим использовать курсив или полужирный шрифт для какого-либо элемента, можно просто указать font-style или font-weight, и браузер извлечет соответствующий файл .woff:
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
/* ... */
}
em {
font-style: italic;
}
strong {
font-weight: bold; /* Or 700 */
}
Значения font-style и font-weight для элементов <em> и <strong> установлены по умолчанию. Поэтому нам не нужно включать сюда последние два правила. Заметьте, что единственными удобными для человека ключевыми словами для font-weight являются normal (400) и bold (700). Все другие уровни жирности должны задаваться числами.
Ладно, все это было сложно. Существует способ использования веб-шрифтов попроще: внешнее размещение от Google Fonts. Мы сможем пропустить первые два шага, связанные с локальным размещением. Вместо добавления файлов .woff в наш проект и встраивания их с помощью @font-face, Google Fonts сделать все это за нас.
Сейчас мы будем работать с файлом history.html, поэтому откройте его как в текстовом редакторе, так и в веб-браузере. Если вы хотите узнать краткую историю типографики, начиная с первого печатного станка, прочтите текст примера. Сейчас в каждом разделе history.html используется шрифт Roboto Light, но мы их изменим, чтобы они соответствовали периоду, о котором пойдет речь.
Начнем с изменения шрифта для раздела Gothic/Blackletter. В Google Fonts найдите UnifrakturMaguntia. Он должен быть похож на те, которыми писали монахи в средние века. Нажмите кнопку Select this font. Во всплывающем меню вы увидите элемент <link/>. Скопируйте его в <head> файла history.html, над элементом <link/>, содержащим нашу таблицу стилей typo.css.
<link href="https://fonts.googleapis.com/css?family=UnifrakturMaguntia" rel="stylesheet">
Помните, что <link/> подключает внешние таблицы стилей. Как раз это и делает приведенный выше HTML. Однако вместо ссылки на локальный CSS-файл он включает CSS, определенный Google Fonts. Если вы вставите значение href в браузер, вы найдете то же самое объявление @font-face, которое мы использовали в предыдущем разделе - только на этот раз нам не пришлось его прописывать. Ура!
Теперь, когда мы внедрили наш веб-шрифт UnifrakturMaguntia, мы можем использовать его для стилизации любого HTML-элемента. Добавьте в <head> файла history.html следующее:
<style>
.blackletter {
font-family: 'UnifrakturMaguntia', cursive;
}
</style>
Первая секция имеет атрибут class='blackletter', поэтому теперь она будет напечатана готическим шрифтом:
Google Fonts - быстрое и простое решение, но все же профессиональные сайты обычно используют локальными веб-шрифтами. Это дает гораздо больше возможностей (вы не ограничены ассортиментом Google шрифтов) и может повысить производительность/надежность, если оставшаяся часть сайта оптимизирована верно.
Заговорив о производительности, давайте сделаем нечто ужасное. На нашей странице history.html есть еще 10 разделов, и мы придадим каждому из них свой собственный веб-шрифт. Можно внедрить несколько шрифтов в один элемент <link/>. Поэтому измените нашу таблицу стилей Google Fonts, включив в нее все остальные:
<link
Заметим, что это можно сделать в Google Fonts, выбрав несколько шрифтов перед копированием элемента <link/>. Затем добавьте все эти новые шрифты в элемент <style> файла history.html:
.old-style {
font-family: 'Sorts Mill Goudy', serif;
}
.transitional {
font-family: 'Libre Baskerville', serif;
}
.didot {
font-family: 'Rufina', serif;
}
.slab {
font-family: 'Rokkitt', serif;
}
.fat-face {
font-family: 'Alfa Slab One', cursive;
}
.grotesque {
font-family: 'Roboto', sans-serif;
}
.geometric {
font-family: 'Questrial', sans-serif;
}
.humanist {
font-family: 'Lato', sans-serif;
}
.display {
font-family: 'Lobster', cursive;
}
.monospace {
font-family: 'Droid Sans Mono', monospace;
}
Теперь каждый раздел history.html отображается шрифтом той эпохи, которую он описывает. Это будет хорошим введением в историческую значимость различных шрифтов. Но на практике никогда не помещайте такое количество веб-шрифтов на одну веб-страницу.
Помните, что каждый веб-шрифт - это файл .woff или .woff2, который браузер должен загрузить, прежде чем отобразить страницу. Большее количество шрифтов увеличивает время загрузки. Ключ к эффективному использованию веб-шрифтов - баланс между производительностью (меньшее количество веб-шрифтов) и красиво набранным документом (большее количество веб-шрифтов).
Вот и все, что вам нужно знать о веб-шрифтах. Остальная часть этого урока посвящена основным принципам типографики. Это простые рекомендации (с простым CSS), обычно отличающие любительскую веб-страницу от профессиональной.
Отделение абзацев друг от друга - одна из самых фундаментальных функций типографики. Есть два общепринятых решения: либо использовать отступ indent первой строки, либо margin между абзацами. Ваши читатели (надеемся) не глупы - им не нужны два признака того, что начинается новый абзац, поэтому никогда не используйте одновременно indent* и margin. Это уже перебор.
* - в русскоязычном MDN слово "отступ" используется для трех различных терминов: indent, margin, padding. Во избежании путаницы indent я перевожу как "indent" или "indent-отступ".
Свойство CSS text-indent определяет размер отступа первой строки определенного элемента (обычно это <p>). Мы можем изучить это на нашей странице indents.html. Измените существующие margin-стили в первом разделе на indent, добавив в элемент <style> следующее:
<style>
.paragraph-indent p {
text-indent: 1em;
margin-bottom: 0;
}
.paragraph-indent p:first-of-type {
text-indent: 0;
</style>
Обратите внимание, что первый абзац после заголовка никогда не должен иметь indent, так как обычно очевидно, что это новый абзац. Это очень хороший пример использования псевдокласса :first-of-type.
А вот негативный пример, чтобы мы помнили, чего делать не следует. Добавьте это в стили конкретной страницы в файле indents.html:
/* ДИЗАЙНЕРЫ ОСУДЯТ ВАС ЗА ЭТО */
.never-both p {
text-indent: 1em;
margin-bottom: 1em;
}
Это может показаться смешным, но предупреждение о том, что дизайнеры вас осудят, на самом деле вовсе не шутка.
Выравнивание текста подсознательно влияет на то, как его читают. Возможно, вы не замечали ранее, что ваши глаза не двигаются плавно по мере чтения - они перескакивают со слова на слово и со строки на строку. Глаза фиксируются на одних местах и пропускают другие.
В хорошо спроектированном HTML-документе выравнивание текста не бывает случайным. Оно учитывает вышеупомянутую особенность человеческой физиологии. Правильное выравнивание сильно облегчает пользователям чтение вашего текста, поскольку дает их глазам якорь, помогающий перемещаться от строки к строке.
Ниже будет показано, как правильно выравнивать выравнивание текста по левому краю, по центру, по правому краю и по обеим краям [justified]. Все эти примеры основаны на свойстве text-align, которое управляет выравниванием текста определенного HTML-элемента. В нашем проекте мы создали страницу alignment.html с несколькими сценариями.
Большая часть текста должна быть выровнена слева, потому что это вертикальный якорь, к которому читатель может вернуться на каждой строке. Длинные фрагменты текста почти всегда выровнены по левому краю. Короткие тексты и заголовки имеют немного больше свободы действий.
Выравнивание слева - это стандартное значение text-align. Но если бы мы хотели быть более выразительными, в элемент <style> нашего файла alignment.html можно было бы добавить следующее правило:
<style>
.left {
text-align: left;
}
</style>
Конечно, если вы работаете над сайтом на языке, который пишется справа налево, (например, арабский), вы можете поменять все эти советы. См. Выравнивание справа ниже.
Текст, выровненный по центру, не имеет якоря, поэтому на переходах к следующей строке глазу легче потеряться. Он лучше всего подходит для коротких строк (подробнее об этом позже) и для особых видов контента, таких как стихи, тексты песен и заголовки.
Выровняйте по центру второй абзац в файле alignment.html с помощью следующего встроенного [page-specific] стиля:
.center {
text-align: center;
}
Обратите внимание, что теперь страница кажется немного разрозненной. Второй абзац, выровненный по центру, нарушает течение первого абзаца, выровненного слева. Вообще, выравнивание текста должно быть одинаковым на всей веб-странице. Если отцентрирован один заголовок, отцентрируйте все заголовки.
Другой аспект при выборе выравнивания текста - это его связь с окружающими элементами. Взгляните на третий раздел в файле alignment.html. Мы хотим переместить надпись к изображению слева от него и выровнять ее по правому краю, чтобы она выглядела как прикрепленная к изображению:
В нашем примере изображение заключено в <figure>, а подпись - в <figcaption>, поэтому к вышеуказанному макету приведет добавление в alignment.html, точнее в элемент <style>, следующего кода.
figcaption {
display: none;
}
@media only screen and (min-width: 900px) {
figure {
position: relative;
}
figcaption {
display: block;
font-style: italic;
text-align: right;
background-color: #FFFFFF;
position: absolute;
left: -220px;
width: 200px;
}
}
Это также хороший пример продвинутого позиционирования. Относительное положение <figure> задает систему координат для абсолютного позиционирования <figcaption>. Сдвинув надпись влево на 220px и задав ей явную ширину 200px, мы получим хороший 20-пиксельный margin между картинкой и ее надписью.
Как и центрированный текст, выравнивание cправа следует использовать в особых случаях, поскольку неровный левый край затрудняет читателю поиск следующей строки.
Justify-выравнивание* создается тонкой регулировкой интервалов между словами/буквами и разделения длинных слов дефисами, до тех пор, пока каждая строка не станет одинаковой ширины. Без хорошего дефисного движка**, justify-выравнивание приводит к большим пробелам между словами, затрудняющим глазам горизонтальное перемещение по тексту.
* - русский перевод justify в MDN и Википедии не найден.
Поэтому здесь и далее используется "justify-выравнивание".
Смысл: выравнивание левых и правых границ текста по левым и правым границам
содержимого параграфа.
** - в оригинале: high-quality hyphenation engine.
К сожалению, большинство браузеров не имеют вообще никакого встроенного дефисного движка, поэтому выравнивания текста в HTML-документах лучше избегать. Для наглядности в наш файл alignment.html добавим еще одно правило:
.justify {
text-align: justify;
}
Сравните это с абзацем, выровненным по левому краю. Такой абзац будет выглядеть чуть более равномерно и привлекательно.
Как выравнивание текста, так и вертикальный интервал не является чем-то случайным. В этом разделе мы рассмотрим грамотное использование трех свойств CSS:
Первые два свойства вам уже знакомы. Они определяют вертикальный интервал между отдельными абзацами. Новое свойство line-height задает интервал между строками в одном абзаце. В традиционной типографике высота строки называется leading - "лидирование"*. Ранее печатники использовали маленькие полоски свинца для увеличения интервала между строками текста.
* - от lead - свинец.
Вместе эти свойства создают "вертикальный ритм" веб-страницы. Существуют различные методы определения "оптимального" вертикального ритма для конкретного макета, но общие принципы таковы:
Чтобы продемонстрировать это, мы разрушим вертикальный ритм во второй половине нашей страницы spacing.html. Добавьте следующие встроенные [page-specific] стили в файл spacing.html
<style>
.messy {
line-height: 1.2em;
}
.messy h2 {
line-height: .9em;
}
.messy:last-of-type {
line-height: 1.5em;
}
.messy:last-of-type h2 {
margin-bottom: .3em;
}
.messy .button:link,
.messy .button:visited {
margin-top: 0;
}
</style>
Несколько небольших изменений высоты строк, padding и margin могут существенно повлиять на качество страницы:
В расчете вертикального ритма страницы на удивление много математики и психологии, но это работа для вашего дизайнера. Как разработчик, вы должны знать свойства CSS, чтобы реализовать то, о чем они просят. Важно понимать, что дизайнеры действительно думает об этих вещах. Поэтому уделяйте самое пристальное внимание свойствам margin, padding и line-height.
Если вертикальный интервал вашего текста не является произвольным, не стоит удивляться, что и горизонтальный интервал не является таковым. Длина строки или "мера" [measure] есть горизонтальная длина вашего текста. Это количество символов или слов, помещающихся в одну строку. Мера связана со следующими свойствами CSS:
Хорошим правилом является ограничение количества символов до 80 на строку. Как и выравнивание, это неявно влияет на читабельность вашего контента. Для перемещения от левого края абзаца к правому, глазу нужна энергия. Чем дальше ему приходится сканировать, тем быстрее он устает. Возврашение к началу следующей длинной строки напрягает. В длинных строках легко заблудиться.
Именно поэтому многие сайты (включая и этот) используют макеты фиксированной ширины или на более широких экранах разбивают контент на несколько колонок. Без ограничения ширины страницы или разделения на колонки длина строки становится невыносимо большой.
В нашем примере файл line-length.html имеет приемлемую меру. Давайте посмотрим, что произойдет, если мы разобьем нижнюю половину страницы, добавив в ее <head> следующее:
<style>
@media only screen and (min-width: 580px) {
.not-so-manageable {
max-width: 100%;
margin-left: 2em;
margin-right: 2em;
}
}
</style>
Теперь вторая секция растягивается на всю ширину окна браузера. Из-за большой длины строки это несколько неудобно для восприятия. Повторимся, цель хорошей веб-типографики - сделать так, чтобы посетителям было как можно легче воспринимать ваш контент.
Вышесказанного должно быть достаточно, чтобы вы начали свой путь к качественной веб-типографике. Типографика это целая индустрия и мы едва коснулись ее поверхности. Эта тема относится скорее к дизайну, чем к веб-разработке, поэтому мы просто дадим несколько финальных рекомендаций:
Если вам нравятся такие вещи, то в Practical Typography есть фантастический список общих правил для верстки документов.
Цель этого урока была двоякой:
Возможно, по окончании этого урока вы не сможете с нуля создать роскошно набранную веб-страницу, но это и не важно. Его цель была познакомить вас с невидимым искусством типографики. Теперь у вас есть словарный запас, чтобы говорить о таких вещах, как семейства шрифтов, начертания, вес и стили, а также лидирование, мера и вертикальный ритм.
Ключевая мысль этого урока - на хорошо сверстанной веб-странице нет ничего случайного. Размер шрифта, стиль отступов, выравнивание текста, высота строки, margins и все мельчайшие детали страницы были тщательно продуманы. За всеми этими решениями стоит некий замысел.
Все рассмотренные в данном учебнике свойства CSS, на самом деле очень просты. По сути, мы просто перемещали кучу квадратиков, меняли цвета и изменяли внешний вид текста. Смысл этих действий зависит от дизайна и бизнес-целей сайта, который вы создаете.
Хотите верьте, хотите нет, но вы подошли к концу нашего учебника HTML & CSS is Hard. Мы рассмотрели все элементы HTML и свойства CSS, необходимые для создания профессиональных веб-страниц. Единственное, чего не хватает, - это опыта. Ваш следующий шаг - отработать все эти новые навыки, создав несколько веб-страниц с нуля.
Ждите следующие учебники!