Здравствуйте, дамы и господа, в этой статье решил поднять важный вопрос для блогеров, ведущих текстовый блог, — выбор шрифта для блога. Раньше я подходил к этому вопросу только с позиции «мне этот шрифт нравится, выберу его», но со временем данный подход пересмотрел. Давайте расскажу о своих наблюдениях, а также сделанных выводах.
Принципы выбора шрифта для блога
Для лендингов или интернет-магазинов, особенно для страниц с промоакциями я любил выбирать необычные и даже вычурные шрифты. Они себя показывали хорошо. Много примеров красивых шрифтов для сайтов можете найти здесь: typetype.ru.
И применение какого-нибудь дизайнерского шрифта себя оправдывает с коммерческой точки зрения. Вам нужно зацепить внимание посетителя сайта, и шрифт будет одним из инструментов, которые помогут решить данную задачу. Не единственным, но важным.
Но в случае блога ситуация обстоит иначе. Для успешного продвижения блога от шрифта требуется следующее:
- Он не должен негативно влиять на скорость сайта. Красивый шрифт может быть тяжёлым, если грузите его из внешних источников, например, шрифты Google.
- Шрифт не должен «давить на психику». В общем, читать текст должно быть приятно. Не стоит использовать курсивные шрифты, например. Такой текст будет просто неприятно читать.
- Текст должен быть разборчивым. В общем, это вытекает из предыдущего пункта.
- Он должен положительно влиять на SEO. Чуть дальше объясню, как шрифты влияют. Хотя это не главный показатель.
В общем, старый добрый Comic Sans отметается, смотрится он, конечно, забавно, но долго читать данный шрифт неприятно.
Потому давайте рассмотрим те шрифты, которые лучше подойдут для текстов разной длины.
Типы шрифтов и их размеры
Итак, я долго прорабатывал, какой шрифт можно выбрать для блога. В итоге пришёл к следующим выводам:
- Шрифт должен быть удобочитаемым, потому для заголовков я выбрал шрифты без засечек, а для текста выбрал с засечками.
- Размер шрифтов я сделал покрупнее, в данном случае 1.3 rem. Подберите для себя подходящий размер. Но он должен быть таким, чтобы, например, слабовидящие могли без проблем разобрать, что написано. Если у вас хорошее зрение, не значит, что оно такое у всех.
- Предпочёл использовать базовые шрифты, а не шрифты Google.
Итак, давайте разберёмся, что и почему я делал. Опять-таки буду на примере своего блога. Итак, давайте посмотрим на заголовки и на текст.
Для заголовков хорошо подходят шрифты без засечек. В данном случае я использую шрифт Montserrat, но лучше его заменить на старый добрый шрифт Helvetica, ибо стандартные шрифты не требуют загрузки шрифта из внешних источников. А для текста юзаю шрифты с засечками, в случае моего блога — Georgia.
Итак, давайте объясню, почему выбрал для заголовков Sans-serif, а для текста Serif. Итак, давайте посмотрим на статью, где используется мелкий шрифт, без засечек.
Итак, что мы наблюдаем. Шрифт мелкий, он сливается, читать трудоёмко, особенно человеку, у которого плохо со зрением. И это в статье про шрифты. Прекрасно!
Я же пошёл по пути «в меру большой шрифт, наличие засечек, а также использование трекинга. То бишь, установленного межбуквенного расстояния, чтобы символы не сливались.
Чем хорошо шрифт с засечками? Как минимум тем, что буквы не сливаются, засечки позволяют сразу понять, что за буква, соответственно, становится проще читать.
Ну, если поставить какой-нибудь шрифт Helvetica, то текст остаётся читабельным. Но воспринимать его становится уже не так легко.
Но только при условии, что межбуквенное расстояние будет нормальным, не слишком большим, но и не слишком маленьким. Например, если выставить в css значение letter-spacing в 2px, то мы получим такой результат.
Текст получился растянутым, занимает слишком много места, при этом сильно давит на глаза.
А если выставить его минимальным, то мы получим телегу текста, буквы на которой начинают сливаться.
Для обладателей здорового зрения это практически незаметно, но для тех, у кого со зрением есть проблемы, чтение будет испытанием.
Именно тут и приходят на помощь засечки. Чтение текста с засечками помогает лучше разбирать буквы, значит, что читать тексты станет легче.
Например, в блоге будут смотреться неплохо шрифты Times New Roman или Century. Но последний мне не нравится.
В итоге я всё равно остановился на шрифте Georgia.
А в заголовках как раз использую шрифт без засек, но жирный.
Итак, давайте разберёмся, почему я не использую Google-шрифты или другие внешние шрифты, а также почему выставляю большой шрифт вместо мелкого.
Шрифты доступные для всех
Например, для параграфов я использую такие предустановки шрифтов:
font-size: 1.3rem !important;
line-height: 1.7;
font-weight: 400;
font-family: Georgia, serif;
Для заголовков – такие:
font-weight: 700;
font-family: "Helvetica",sans-serif;
У заголовков меняется только размер от H1 до H6 всё меньше и меньше.
Обратите внимание на font-size. Вместо стандартных пикселей, я использую для параграфов значение rem.
Это значение «плавающее», то бишь будет меняться в зависимости от базового размера шрифтов и родительских элементов, но при этом не будет влиять на дочерние. Почитайте о разнице px, em, rem и других значений.
Даже с точки зрения SEO одним из важных факторов является удобство пользователей, то бишь, есть определённые критерии, такие, как размер шрифта. Если шрифт маленький, то читать не удобно, а, значит, это будет рассмотрено, как негативный фактор, а если шрифт в меру большой, значит, людям будет удобно читать, даже тем, у кого есть проблемы со зрением.
На одном из сайтов заметил, что простая смена размера шрифта с 12px на 16px вдруг улучшила поведенческие факторы, а это положительно сказывается на продвижении сайта.
Конечно, использовать лучше базовые шрифты. Не Google, ни кастом. Почему? Ну, потому что для подключения нужно подгрузить эти шрифты, например, из внешних источников.
В данном случае надо рассказать о базовых шрифтах.
С засечками:
- Times New Roman;
- Georgia;
- Century.
Без засечек:
- Arial;
- Tahoma;
- Helvetica.
Конечно, можете использовать и другие шрифты, например, Lora, Roboto. Как правило, они поддерживаются большинством браузеров на базовом уровне, а также встроены в разные CMS, те же WordPress или Joomla.
И для сравнения вот вам шрифт Liberation в двух вариантах:
Их тоже поддерживает большинство CMS на базовом уровне, шрифты красивые и читабельные.
То бишь появляется дополнительный запрос, файл должен подгрузиться, только после этого шрифт будет отображаться на сайте. И это дополнительный запрос к серверу, а также дополнительное время на генерацию страницы. В итоге сайт, пусть и не сильно, но замедляется.
Стандартные шрифты поддерживаются всеми браузерами, соответственно, выбор стоит остановить на них.
Скорость сайта сейчас очень важный показатель для SEO, соответственно, не стоит сей показатель понижать из-за дополнительных шрифтов. Лучше использовать те, что уже предустановлены в CMS.
И не используйте для текста курсивные шрифты. Печатные издания не просто так от них отказались, плохо курсивные шрифты читаются, особенно, если текст большой. Глаза от них устают. Но для «украшательства» сойдут.
А теперь пришло время подвести итоги.
Какой же выбрать шрифт для блога?
Итак, для заголовков выбрать шрифт без засечек (sans serif), такой шрифт будет смотреться лучше и выразительнее, особенно «жирные» варианты.
Для текста выбрать шрифт с засечками (serif), ибо такой текст будет проще читать. Размер должен быть таким, чтобы люди даже с проблемами со зрением могли текст разобрать, но не стоит делать буквы огромными. 16-20px вполне достаточно.
Лучше всего выбирать те шрифты, которые идут в вашей CMS на базовом уровне. Или те, что поддерживаются всеми браузерами.
На этом с вами прощаюсь, желаю успехов и приятных удобочитаемых шрифтов, всего доброго!
