Как не провалиться с «декоративными» шрифтами

Иногда очень хочется оформить какие-то элементы сайта красивыми шрифтами — «рукописными», «каллиграфическими», рисованными. Конечно, это вопрос дизайна, и нас он не всегда касается. Но мы должны предусмотрительно подключить веб-безопасные шрифты на случай, если локальные не загрузятся. И не использовать слишком много разных шрифтов: они каждый загружаются на компьютер пользователя, если их нет в операционной системе. Не рекомендуется не использовать больше 2 шрифтов на одной странице. И не использовать шрифт Comic Sans как основной.

Про веб-безопасные шрифты

Это те, которые установлены на компьютерах максимального количества пользователей. По ссылке можно посмотреть статистику локально установленных шрифтов на разных операционных системах. Обычно имеются в виду: Arial, Courier New, Georgia, Times New Roman, Trebuchet MS, Verdana.

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

Есть ещё одно требование к веб-безопасным шрифтам: они должны относиться к тому же семейству, что и «декоративный» шрифт. Для шрифтов с «засечками» — это может быть Times New Roman, Georgia, «без засечек» — Arial, Verdana.

{ font-family: "Some Beautiful Sans Serif Font", "Arial", sans-serif;}{ font-family: "Some Beautiful Serif Font", "Times New Roman", serif;}

Правильно и удобно для пользователя использовать для основного текста один шрифт без засечек. Текст, оформленный разными шрифтами, разными кеглями, цветами и так далее выглядит пёстрым и читается с большим трудом.

Но есть и ситуации, в которых лучше использовать не шрифт, а графику.

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

В Фигме видно, что логотип сделан текстом, но выгрузим мы его как SVG

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

При выгрузке векторной графики важно убедиться, что выгрузились именно векторные формы, описанные точками, а не тег <text>, в который обёрнуты буквы и приписаны стили.

<!-- Пример с векторными формами внутри изображения --><svg height="41" viewBox="0 0 106 41" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M34.7969 20.1797C34.7969 22.0651 34.2734 … 19.7891Z" fill="black"/></svg> <!-- Пример с текстом внутри векторного изображения --><svg xmlns="http://www.w3.org/2000/svg"> <style>.dollytext { font-family: "Open Sans", sans-serif; font-size: 16px; } </style> <text x="10" y="100" class="dollytext"> DOLLY </text></svg>

Это слайд под главным меню. Поверх изображения наложен текст, набранный разными декоративными шрифтами. Если эти шрифты больше нигде на странице не используются, то картинку следует объединить со шрифтами в единое растровое изображение

<!-- Раз это картинка, с которой нельзя скопировать текст, и её содержание ускользнёт от ридеров и роботов, стоит написать для неё визуально скрытый текст или хороший alt --> <img src="img/some-pic.jpg" alt="Выход из зоны комфорта: то, что нам советуют. Но нельзя выйти оттуда, куда ты ещё не входил"><p class="visually-hidden">Выход из зоны комфорта: то, что нам советуют. Но нельзя выйти оттуда, куда ты ещё не входил</p>

Кроме шрифтов с буквами и символами существуют «иконочные шрифты», позволяющие встроить файл с готовым набором иконок вместо букв и дальше использовать его неограниченно. Это оправданная мера, если на сайте предполагается очень много иконок и они будут использоваться единообразно. Во всех остальных случаях иконочный шрифт не обоснован. Во-первых, иконочные шрифты обычно достаточно тяжёлые, и это дополнительно увеличивает вес сайта, и такой шрифт должен скачаться на компьютер пользователя (шансов, что именно он уже есть у пользователя, очень мало: иконочные шрифты часто индивидуальные). Во-вторых, любые манипуляции с такими шрифтами сложны (при маштабировании падает качество, для ретины нужны отдельные улучшенные иконки, иначе браузер сам отрисует), в то время как SVG — уже принятый для таких случаев стандарт — в качестве не теряет ни при каких обстоятельствах.

 

Теория~ 9 минут

Глава 8.3. Типографика

Красота текста — это не только правильный дизайн и качественный контент, но и правильная вёрстка текста, и единообразие. Под единообразием мы имеем в виду, что редакция выработала общее представление о строчной вёрстке текста: микроразметке, использовании тех или иных символов, подходе к кавычкам и прочим деталям, мелким, но делающих текст удобнее для чтения и показывающим профессионализм в работе с текстом.

Хорошо оформленный текст не становится умнее или полезнее, но становится красивее и удобнее для чтения. И есть несколько правил и советов на эту тему.

Начнём с того, что никогда и ничего не нужно писать «капсом» (всеми прописными). В CSS для этого есть свойство text-transform: uppercase;, но текст, набранный целиком прописными, читается так, как будто вы кричите.

Хорошее тире сделано длинным &mdash;, а не дефисом, как это проще всего. Это можно автоматизировать.

Часто используемые кавычки — либо «программистские» &quot;(" "), либо «лапки», причём направленные справа налево (” „). Однако мы имеем дело в основном с русскоязычными сайтами, а в русском языке считается хорошим тоном использовать «ёлочки», они же французские кавычки («», &laquo;/&raquo;), или «лапки», «девятки» как открывающие, а «шестёрки» как закрывающие („ “, &bdquo;...&ldquo;). Лучший вариант при вложенности кавычек писать снаружи французские, внутри лапки: («„ “»), потому что такой вариант хорошо типографится автоматически, в то время как вложенные французские кавычки в типографе вставляются в полном объёме: «Кавычки «французские»», а должно быть со слиянием стоящих рядом: «Кавычки «французские».

Если эти коды с & были не знакомы: про мнемоники и их использование

Это мнемоники, то есть буквенные коды для обозначения символов, начинаются с амперсанда — &, заканчиваются точкой с запятой.

Основная задача мнемоник — вставить в текст те символы, которые непросто набрать на клавиатуре («длинное» тире набирается цифровым кодом, но использовать его как тире корректнее, чем дефис; в коде он выглядит так: &mdash;) или которые вообще не видно на первый взгляд (например, неразрывные пробелы, для них используется &nbsp;). При этом у мнемоник есть человекопонятное значение: длинное тире, &mdash;, нужно понимать как «росчерк (dash) размером с букву m», а среднее, &ndash; — размером с букву n. У каждого из этих символов есть HTML-код, единственный недостаток которого в том, что его сложнее запомнить. Все варианты вставки символов можно найти в таблице символов Юникода.

Есть разные подходы к тому, как типографить текст: оставляя видимые мнемоники или собственно символы, которые они обозначают. У подхода с видимым кодом символов плюс в том, что вы видите неразрывные пробелы. У подхода с «готовыми символами» плюс — что код выглядит чище и очевиднее результат.

На данный момент при индексации роботы не «переводят» мнемоники в готовые символы, и можно увидеть потом в выдаче что-то в духе «Я& nbsp; & mdash; & nbsp; суперзвезда», поэтому лучше оставлять готовые символы хотя бы в заголовке и лиде, если он есть.

При этом из-за того, что некоторые визуальные текстовые редакторы «съедают» неразрывные пробелы, а обнаружить это непросто, так что если есть возможность неразрывные пробелы оставить мнемониками, а остальное сделать символами — лучше сделать так.

Приятнее читать тексты, в которых уместно расставлены неразрывные пробелы &nbsp; и не висят предлоги. То есть предлоги, союзы, частицы и прочие «мелкие» слова приклеиваются к следующим за ними словам, иначе они могут «повиснуть» в конце строки. Бывают случаи, когда каждая строка заканчивается таким висящим предлогом, и это сбивает с ритма чтения и не помогает в том, чтобы искать следующую строку.

Ты можешь ко&nbsp;мне прислоняться, только //

не&nbsp;сильно.

Многие пишут фамилии с инициалами без пробелов, получается так: И. И. Иванов. Или так: И. С. Петров. В типографской вёрстке между инициалами, числом и знаком % и в некоторых других случаях используется «узкий пробел».

Часто пишут, что «узкий пробел» — это &ensp;, на деле это пробел ширины как буква n, как малое тире, &ndash; — это тире ширины n; соответственно, есть пробел ширины буквы m (&emsp;), и длинное тире, которое мы и используем — &mdash;. На практике браузеры трактуют пробел &ensp; как фиксированный определённого размера, и он может выглядеть даже шире, чем обычный неразрывный пробел.

Узкий пробел выглядит так: &thinsp;, и теоретически между инициалами, в сокращениях типа «т. д.», между числом и знаком процента и в аналогичных случаях должен быть он. Однако типографы не вставляют его автоматически, к тому же узкий пробел не является неразрывным, и нужно использовать тег <nobr></nobr>, запрещающий перенос на другую строку. Так или иначе, пробел там должен быть, нужно писать так: <nobr>Л.&thinsp;Т.&thinsp;Васин</nobr>, если у вас есть возможность и желание типографить вручную, или Л.&nbsp;Т.&nbsp;Васин. Перенос %, $ и других символов, привязанных к числу, фамилии с «отвалившимися» инициалами — плохая практика, она мешает чтению и выглядит непрофессионально.

Тег <nobr></nobr> можно использовать также для запрета переноса ссылок: перенос ссылки на новую строку обычно плохо выглядит и требует от пользователя решить, на какой строке кликать.

Есть и другие примеры слов и знаков, которые не следует переносить отдельно друг от друга. Это слова с дефисом, например: из-за, всё-таки, в-третьих, пол-лимона, пол-Москвы, яхт-клуб… Для них существует неразрывный дефис, у которого нет мнемоники, но его можно вставлять как символ HTML — &#8212;. Для слов, общая длина которых больше 15 символов, лучше оставить обычный дефис: пусть переносится (поливально-моечная, инженер-капитан, динамо-машина, член-корреспондент…).

Вот абзац, который мы типографим:

Наш бывший декан, А. П. Леонидов, был не только талантливым педагогом, учёным и членом-корреспондентом и т. д., он был по-своему очень хорошим человеком. Думаю, минимум 20% наших бегали к нему за житейскими советами.

<!-- По строгим правилам это должно быть так -->

<p>Наш бывший декан, <nobr>А.&thinsp;П.&thinsp;Леонидов</nobr>, был не&nbsp;только талантливым педагогом, учёным и&nbsp;членом-корреспондентом и&nbsp;<nobr>т.&thinsp;д.</nobr>, он был <nobr>по-своему</nobr> очень хорошим человеком. Думаю, минимум <nobr>20&thinsp;%</nobr> наших бегали к&nbsp;нему за&nbsp;житейскими советами.</p>

 

<!-- Оттипографлено достаточно, чтобы хорошо читалось, а главное, автоматически, и весит меньше -->

<p>Наш бывший декан, А.&nbsp;П.&nbsp;Леонидов, был не&nbsp;только талантливым педагогом, учёным и&nbsp;членом-корреспондентом и&nbsp;т.&nbsp;д., он&nbsp;был <nobr>по-своему</nobr> очень хорошим человеком. Думаю, минимум 20&nbsp;% наших бегали к&nbsp;нему за&nbsp;житейскими советами.</p>

Касательно буквы ё есть очень категоричные мнения. На сайте Академии ё пишется во всех случаях, мы пользуемся ёфикатором для того, чтобы не пропустить её. Затрудняет восприятие, если букву ё не используют в ситуациях, когда она несёт словоразличительную функцию (совершенный / совершённый, все / всё и другие) и в именах собственных, то есть в названиях городов, фамилиях и так далее. В материалах для детей буква ё должна быть всегда.

Для автоматизации можно использовать различные инструменты, которые уже сделаны разными компаниями, например, Типограф и Типограф Лебедева для микроразметки и Главред для проверки качества текста, ну и всегда хорошо иметь записанные правила оформления текстового контента.

Что использует Академия

· Типограф

· Ёфикатор

· Проверка орфографии

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

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

Теория~ 5 минут