Если вы блоггер, то уже получили множество советов о правильном копирайтинге. Вы также всегда в курсе последних тенденций SEO и уже выбрали подходящую тему для своего сайта WordPress. Вы устанавливаете один за другим различные плагины, чтобы улучшить функциональность и удобство использования своего блога. Теперь пришло время поговорить о еще одном аспекте ведения блога WordPress: типографике.
Типографика – это визуальное искусство создания письменных слов. Если мы говорим о блоге WordPress, это определение может вводить в заблуждение, поскольку определение в основном сосредоточено на художественной типографике. Если вы посмотрите на самые популярные блоги, то заметите, что в письменных словах нет ничего художественного.
Когда речь идет о типографике блога, означает ли это, что мы фокусируемся только на шрифте? Нет. Но то, как шрифт реализуется в среде блога, так же важно. Мы говорим обо всех текстовых элементах, цветах и комбинации шрифтов, которые вы собираетесь использовать для создания узнаваемой и удобоваримой типографики блога.
Вернемся к определению типографики: создание письменных слов является самой значительной его частью.
Люди посещают блоги, потому что хотят что-то читать, даже если мы говорим об инфографике. Типографика – это все, что касается представления этого письменного слова. В зависимости от того, как вы его используете, оно будет подчеркивать те моменты, на которые вы хотите обратить внимание ваших читателей.
Когда вы играете с шрифтами и цветами внутри предложения, вы можете кардинально изменить его значение. Графические дизайнеры часто полагаются на эту концепцию. Они стремятся к созданию смысла посредством визуального оформления текстов и изображений.
В 2012 году Smashing Magazine опубликовал статью о том, как типографика может манипулировать смыслом поста в графическом дизайне. Авторы проиллюстрировали этот факт на простом примере: слово hello представлено в двух разных вариантах:
Первый дизайн, представленный как огромное смелое слово, трудно игнорировать. Вы слышите это привет в своей голове как громкий и доминирующий голос человека, который рад вас видеть. На второй иллюстрации то же слово, но расположение и масштаб делают его кажущимся нерешительным.
Как мы видим, расположение букв и способ их соответствия остальной части дизайна могут изменить смысл поста. Это очевидно в графическом дизайне, но это показывает нам, насколько важна типография в любом виде текста, включая посты в блоге.
Взгляните на Sartorialist, один из популярных блогов WordPress. Вы видите чистую, читаемую типографику. Текст очень маленький, но это потому, что фокус этого блога на визуальном контенте. Блог использует менее читаемый курсивный шрифт в разделе Twitter. Однако это имеет свою причину: вы чувствуете, что это рукописные заметки, поэтому они дают вам ощущение, что автор собственноручно написал этот текст.
Проблема со случайным выбором типографики WordPress
В чем кроется проблема, если вы выбираете случайный шрифт в случайном масштабе и цвете, не согласовывая его с другими шрифтами и их цветом?
Самая большая проблема заключается в том, что неправильная типографика повлияет на читаемость вашего поста.
Иисследование Nielsen Norman Group показало, что люди не будут читать онлайн-контент, если текст не понятен, стиль сложный и информацию трудно понять. Все блогеры знают это! Вот почему они используют более короткие абзацы, и выражаются как можно яснее.
Тем не менее, многие блогеры не понимают, что шрифт, его размер и контраст между текстом и фоном играют огромную роль в удобочитаемости. Как указано в исследовании Nielsen Norman, разборчивость – это «первостепенный уровень удобства использования контента». Это первое, что люди замечают на вашем сайте. Если типографика не будет хорошо сделана, польлзователи не будут читать ваш контент, а уйдут на более комфортные сайты.
При выборе шрифта у вас слишком много вариантов для экспериментов. Однако важно знать, какие конкретные шрифты лучше не использовать:
Pacifico. Он кажется художественным, и это может выглядеть великолепно для графического дизайна. Но это выглядит неуместно в качестве доминирующего шрифта на сайте блога WordPress.
Impact. Нормально для заголовков, и мы часто видим его в этом качестве, но он слишком узкий для текста на вашем сайте.
Comic Sans MS. Вы пишешь комиксы? Тогда вам разрешено использовать этот шрифт в дизайне. Но лучше не рассматривать его для поста в блоге.
Lobster. Представьте себе, что вы читаете длинный бланк в блоге, написанный чьим-то прекрасным, но нечитаемым почерком. В точку!
Franklin Gothic. Возможно, этот чистый шрифт хорош для газеты. Но он выглядит немного устаревшим для использования в блоге. Хотя он не так плох, как предыдущие шрифты в этом списке, но все же лучше избегать этого.
Вот как они выглядят визуально:
Есть много шрифтов на выбор. Возможно, вы почувствуете, что Franklin Gothic вписывается в атмосферу вашего сайта. Тем не менее, вы в первую очередь должны иметь в виду читателя. Поэтому обязательно выберите шрифт, который будет привлекательным и читаемым для среднего посетителя веб-сайта.
2. Используйте комбинации шрифтов
Вместо того, чтобы думать об отдельном шрифте, который был бы универсальным для вашего сайта, перенесите свое внимание на выбор комбинации шрифтов, которые работают вместе. Если вы посмотрите на некоторые сайты WordPress, которые легко читаемы, вы заметите, что они используют разные шрифты для заголовка, подзаголовков, текста и всех других текстовых элементов на веб-сайте. Это делается потому, что легко подчеркнуть некоторые аспекты, если просто изменить шрифт.
Если вы хотите, чтобы комментарии не отвлекали внимание от текста, то выберите менее заметный шрифт, и уменьшите его. Если хотите подчеркнуть определенные моменты, такие как подзаголовки, подберите более смелый шрифт, чем тот, который вы используете в теле поста.
Итак, какие комбинации работают? Это сложный вопрос. Все зависит от общего дизайна вашего сайта. Поэкспериментируйте с различными комбинациями, и вы прийдете к победной версии, которая даст узнаваемое ощущение вашему сайту.
FontPair – отличный инструмент для использования, когда вы хотите увидеть, как разные шрифты работают вместе. Это позволяет сэкономить много времени на эксперименты, так как не придется менять шрифты на вашем сайте снова и снова.
3. Подберите размер
Выбор шрифтов – не единственный аспект типографики. Нужно также учитывать размер шрифта. Вы знаете, как утомительно читать посты с маленьким текстом. Есть решение: можно увеличить масштаб страницы, но это часто нарушает ее дизайн. Вы не хотите, чтобы ваши читатели делали подобные дополнительные действия с вашим сайтом?
Слишком большой шрифт также является проблемой. Это делает ваш сайт неловким. Может показаться, что вы кричите.
Какой размер должен быть у шрифтов
Определить это можно, осознав, как вы читаете электронные книги на планшете. Горизонтальный вид более сложный для глаз. Дело не в том, что вы привыкли к стандартным книжным форматам. Это потому, что в горизонтальном представлении слишком много символов в одной строке, поэтому ваш глаз теряет фокус.
По мнению большинства исследователей, которые изучали проблему, 50-60 символов на линию являются идеальным соотношением, и до 75 символов считается приемлемым. Эти символы включают пробелы и интерполяцию. Очень заинтересованный читатель прочитал бы ваш текст, даже если бы ему было предоставлено более 150 символов в одной строке. Однако, если вы установите шрифт до 60 символов в строке, этот же пост будет гораздо более приятным для чтения.
Калькулятор Golden Ratio Typographyявляется хорошим инструментом для подбора оптимального размера шрифта. Вы можете ввести ширину содержимого (в пикселях) и нужные символы в строке, и получите предложения по размеру шрифта.
Вы можете изменить шрифты в настройках темы, но там можно запутаться. Некоторые темы дают отличный контроль над шрифтами, размерами и цветами текста. Однако темы WordPress по умолчанию не предлагают эту роскошь.
Если такой возможности нет, используйте плагин! Вот несколько предложений для плагинов, которые помогут разобраться с типографикой вашего блога:
С помощью этого плагина можно быстро редактировать шрифты и цвета в своей теме в WordPress Customizer. Вы получите предварительный просмотр в реальном времени, прежде чем принимать окончательное решение. Styleguide позволяет в любой теме выбирать среди набора шрифтов Google. Этого более чем достаточно для вас, поскольку Google Fonts – одна из самых многочисленных и удобных библиотек шрифтов. Бесплатно, так что это огромный бонус.
Этот плагин позволит вам установить узнаваемый стиль для ваших постов, создав красивую заглавную букву. Такой метод используется в классической типографике уже давно, и может подойти и для вашего блога.
Если вас по какой-то причине не устраивают шрифты Google, вам может понравиться Font Squirrel. Этот плагин дает множество выбранных вручную шрифтов, которые бесплатны для коммерческого использования.
Очевидно, что типографика – это не только стиль шрифта. Это также и размер. Итак, скажем, вы выбираете размер, и думаете, что это идеально. Что делать, если это не работает для одного или нескольких ваших читателей? Zeno Font Resizer позволит своим посетителям изменять размер шрифта для комфортного прочтения постов блога.
5. Согласуйте фон и цвет шрифтов
Идеальная типографика потеряет свою уникальность, если вы будете выводить ее на неподходящий фон. Важно иметь высокий контраст между фоном и текстом. Обычный белый фон и темный шрифт – самый безопасный вариант, и в тоже время самый эффективный. Вы видите много белого пространства и читаемого текста в самых успешных блогах WordPress. Для этого есть причина.
Возьмем блог TED в качестве примера. Черный текст на белом фоне. Ничего революционного в этом дизайне. Но вам не нужно быть революционным, когда дело доходит до типографики WordPress. Вам нужно предложить читателю то, что работает.
Хотя типографика в блогах кажется достаточно простой проблемой, но когда начнете в ней копаться, обнаружите ее многоуровневость. С использованием разных шрифтов, размеров, цветов и типографского акцента вы можете достичь идеального варианта предоставления ваших постов в блоге.
Самый важный выход: независимо от того, насколько вы играете с дизайном, текст должен быть максимально удобен для чтения.
