Шрифты для веб дизайна: Популярные шрифты в веб-дизайне — обзор известных гарнитур с поддержкой кириллицы

03.05.2021 alexxlab

Содержание

Типографика в веб-дизайне: 10 полезных советов

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

Более 95% информации в Интернете хранится в письменном виде.

Хорошая типографика — это залог легкодоступной информации, в то время как при плохой типографике приходится прикладывать усилия для понимания текста. Как отмечает Оливер Райхенштайн в статье «Веб-дизайн на 95% состоит из типографики»:

Оптимизация типографики — это оптимизация читабельности, доступности, удобства использования (!) и достижение графического баланса в целом.

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

1. Используйте минимальное количество шрифтов

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

Чтобы предотвратить подобную ситуацию, старайтесь свести количество используемых шрифтов к минимуму.

В целом, сведите количество шрифтов к минимуму (двух более чем достаточно, часто хватит и одного) и придерживайтесь использования одних и тех же на всем веб-сайте. Если вы решите работать с более чем одним шрифтом, убедитесь, что семейства шрифтов подходят друг другу с точки зрения ширины букв. Взгляните на пример, приведенный чуть ниже. У комбинации Georgia и Verdana (слева) есть общие характеристики, что позволяет им гармонично сочетаться друг с другом. Возьмем для сравнения комбинацию Baskerville и Impact (справа). «Тяжеловесный» Impact подавляет своего «засечного» напарника.

Убедитесь, что семейства шрифтов подходят друг другу с точки зрения ширины букв

2. Старайтесь использовать стандартные шрифты

В сервисах со шрифтами (например, Google Web Fonts или Typekit) можно найти много интересных, которые добавят в ваш дизайн нечто новое и необычное. К тому же, ими очень легко пользоваться. Возьмем, к примеру, Google:

1. Выбираете любой шрифт. Скажем, Open Sans. 
2. Генерируете код и вставляете его в <Head> своего HTML.  

3. Готово! 

Но что может пойти не так?

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

Обычно наилучшим выходом будет использование системных шрифтов (Arial, Calibri, Trebuchet, etc.). Исключением может стать необходимость придерживаться каких-то шрифтов, которые задал сам клиент: например, для брендинга или для создания чего-то запоминающегося. Помните, что хорошая типографика влияет на прочтение текста, а не на визуальное восприятие шрифта.

3. Ограничьте длину строки

Правильно подобранное количество знаков на одной строке — это ключ к легкости прочтения вашего текста. Выбирая ширину текста, вы должны ориентироваться не на ваш дизайн, а на ясность и четкость написанного. Обратите внимание на этот совет от Baymard Institute:

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

Если строка слишком короткая, глазам придется часто менять фокус, что сбивает темп чтения. Если же строка слишком длинная, глазам читателя, наоборот, придется долго фокусироваться на написанном. Фото: Material Design

Что касается мобильных устройств, придерживайтесь диапазона в 30-40 знаков в строке. Ниже представлен пример двух сайтов, открытых на мобильных устройствах. На одном строка содержит от 50 до 75 символов (лучшее количество знаков в строке для печатного текста и разрешения компьютера), а на втором мы видим оптимальные 30-40 знаков.

Фото: Usertesting

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

4. Выбирайте гарнитуры, которые хорошо читаются в любом размере

Пользователи будут заходить на ваш сайт с разных устройств, у которых, соответственно, различается размер и разрешение. Большинство пользовательских интерфейсов используют текстовые элементы различной величины (кнопка «копировать», подписи полей, заголовки секций и т.д.). Необходимо выбирать гарнитуру, которая будет хорошо выглядеть, и оставаться читабельной в любом размере.

Roboto от Google

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

Использование шрифта Vivaldi затруднит прочтение текста на маленьком экране

5. Используйте шрифты с четкими буквами

Многие шрифтовые гарнитуры созданы таким образом, что иногда бывает очень легко спутать похожие буквы, особенно «I» и «L», написанные латиницей (как на изображении ниже). В некоторых же буквы расположены так близко друг к другу, что сочетание «r» и «n» можно принять за букву «m». Поэтому, выбирая шрифт, протестируйте его в разных контекстах. Так вы сможете убедиться, что из-за шрифтовой гарнитуры у читателя не возникнет проблем с пониманием текста.

6. Избегайте капса

Текст, написанный капсом — или одними заглавными буквами — подходит для ситуации, где пользователь не вовлекается в процесс чтения (например, в аббревиатурах или логотипах). Но в других случаях не насилуйте ваших читателей текстом, написанным заглавными буквами. Как отмечает Майлз Тинкер в своей известной работе «Legibility of Print», такой текст читается гораздо медленнее текста, написанного строчными.

7. Не сводите межстрочное расстояние к минимуму

В типографике существует специальный термин для обозначения расстояния между строками — интерлиньяж (или межстрочный интервал). Увеличивая интерлиньяж, вы увеличиваете вертикальное пространство между строками, тем самым улучшая читабельность текста на экране. По правилам, для обеспечения читабельности текста интерлиньяж должен быть примерно на 30% больше, чем высота знака.

Правильное межстрочное расстояние способствует лучшей читабельности текста. Фото: Microsoft

По словам Дмитрия Фадеева, правильно подобранное расстояние между абзацами увеличивает понимание прочитанного на 20%. Умение дизайнера работать с белым пространством позволяет пользователям усваивать содержание текста целиком без упущения каких-либо деталей.

Слева: Текст написан практически вплотную. Справа: Правильное межстрочное расстояние способствует читабельности текста. Фото: Apple

8. Убедитесь, что у вас все в порядке с цветовым контрастом

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

Небольшие тексты должны иметь коэффициент контраста минимум 4,5:1 по отношению к фону. 
Большие тексты (от 14 размера полужирным шрифтом/от 18 размера и выше стандартным шрифтом) должны иметь коэффициент контраста минимум 3:1 по отношению к фону.

Этот текст не соответствует стандарту цветового контраста, поэтому его тяжело различить на фоне.

Этот текст соответствует стандарту цветового контраста, поэтому он читается легко.

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

9. Старайтесь не использовать красный или зеленый цвет в тексте

Дальтонизм — явление довольно распространенное, особенно среди мужчин (8% мужского населения — дальтоники). Поэтому, помимо цвета, желательно использовать какие-то другие знаки для выделения важной информации. Также старайтесь не прибегать к красному и зеленому цвету, так как именно эти цвета чаще всего не распознаются дальтониками.

10. Старайтесь не использовать мерцающий текст

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

Не используйте мерцающий текст!

Заключение

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

Типографика должна уважительно относиться к контенту

Это подразумевает, что читатель никогда не должен испытывать дискомфорта при прочтении текста.

Как подобрать правильный шрифт для своего дизайна

Дизайнеры очень часто не уделяют должного внимание типографике, когда на самом деле — это очень важный аспект, от выбора которого нередко зависит качество дизайна. Шрифты так же важны для веб-сайта, как и изображения.

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

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

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

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

Разборчивость очень важна

Для того, чтобы читающий мог понимать о чем идет речь, очень важно чтобы гарнитура была разборчивой. Существует множество факторов, которые необходимо учитывать, когда дело касается разборчивости текста. Эти факторы включают в себя размер, форму и ширину символов, визуальный веc, надстроечную и подстрочную длину, а так же контрастность штриха. Выбор качественного шрифта – хорошее начало для создания разборчивого текста, но из-за огромного количества различных шрифтов выбор сделать может быть очень непросто.

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

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

Качественные гарнитуры всегда разбиты на керн-пары позволяющее легко достигнуть нужного эффекта. Расстояние между буквами очень влияет на разборчивость шрифта, поэтому шрифты со слишком большими расстояниями между символами стоит избегать.

Самый часто задаваемый вопрос при выборе шрифта: с засечками или без?

Самые распространение категории шрифтов – это serif или sans serif. Serif – это шрифты с заческой на концах букв. Sans serif же, соответственно — шрифты, которые засечек не имеют.

Классифицировать эти шрифты не просто, так как и тех и других шрифтов немало. В целом, serif считаются более традиционными, а sans serif — современным. Serif шрифты иногда также считаются более четкими и легкими для прочтения.

Огромное количество хороших шрифтов существует и в той, и в другой категории. Можно намного лучше начать понимать шрифты, изучая различные классификации, такие как humanist, modern, slab serif, geometric, old style и transitional. Некоторые дизайнеры даже советуют создавать свои собственные категории для удобной работы с различными проектами.

Выбираем правильный шрифт для веб-сайта и используем их правильно

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

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

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

Комбинирование различных гарнитур также может быть очень эффективным. Важно помнить, что шрифты должны быть достаточно различны, чтобы необходимый эффект был достигнут. Хорошим выбором будет один шрифт serif и один шрифт sans serif. Это создает контраст, который придает тексту слаженность, особенно, если это шрифты одного и того же дизайнера.

Выбор правильного шрифта для печати

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

Шрифт не должен перекрывать смысл текста, так как это отвлечет от информации, которую вы хотите передать. Цель гарнитуры – упростить чтение текста, и если перестараться то читатель будет смотреть только на шрифт, не воспринимая сам текст.

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

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

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

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

Вывод

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

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

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

Источник: say-hi.me
Фото на обложке: ShutterStock

Шрифты в веб-дизайне

В этой статье кратко расскажем о специфике шрифтов в веб-дизайне.

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

Теперь кратко расскажем о том, в каких единицах измеряются шрифты. Общепринятая единица измерения — это пункт. Именно в пунктах шрифты измеряются в программе Word. Также существует такая единица измерения, как пика (одна пика равна 12 пунктам). В качестве сравнительного примера можно сказать, что 6 пик — это примерно 1 дюйм (2 с лишним сантиметра).

Что касается веб-шрифтов, то здесь обычно используют систему, в которой шрифты имеют 7 основных размеров (они задаются в формате HTML). Шрифт первого размера равняется 8 пунктам, второго — 10 пунктам, третьего — 12 пунктам, четвертого — 14, пятого — 18, шестого — 24, седьмого — 36. Шрифт большего размера нельзя задать при помощи HTML. Также здесь нельзя задать какие-то другие шрифты, отличные от 8, 10, 12, 14, 18, 24 и 36 пунктов. Однако это можно сделать при помощи CSS. Там можно очень точно задать размер шрифта в пунктах или в процентах (в зависимости от того, что вам нужно).

Все шрифты можно разделить на две большие группы — это шрифты без засечек и с засечками. Рассмотрим кратко каждую из них.

1. Шрифты с засечками. У шрифтов, относящихся к данной группе, на краях букв имеются засечки или «хвостики», благодаря чему текст выглядит более замысловато и оригинально. К таким шрифтам можно отнести Century, Times, Garamond и некоторые другие (гарнитура Serif).

2. Шрифты без засечек. У данного типа шрифтов отсутствуют засечки, края букв прямые и простые. Еще их иногда называют рублеными шрифтами. Сюда можно отнести Ariel, Verdana, Helvetica и другие (гарнитура Sans-Serif).

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

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

Шрифт в веб-дизайне | R-BAND

Пользователи сайта = деньги

Какова главная цель создания сайта? В большинстве случаев эта цель – заработать деньги. Веб – сайт с уверенностью можно назвать бизнес-активом, а что же должен делать бизнес-актив? Приносить доход. Поэтому каждый элемент сайта должен быть понятен и удобен в использовании. Если вы «не объясняете», что люди должны делать на сайте или почему они должны что-то сделать, то они, как правило, этого делать не будут. Поэтому один из главных способов презентовать продукт пользователю – это использовать текст, а текст подразумевает чтение.

Поговорим о тенденциях

Современный дизайн задает свои тренды в использовании шрифта. Еще по-прежнему актуален минимализм и использование чистого «дышащего» пространства, поэтому довольно часто дизайнеры используют мелкий шрифтовой кегль, примерно 12 px. Где же баланс между красотой и удобочитаемостью? Ведь хочется сделать стильный макет и не провоцировать немолодых пользователей бежать за лупой.

Пример использования мелкого шрифта на сайтах

Так сколько же пикселей?

Один из крупнейших ресурсов для веб-дизайнеров и разработчиков smashingmagazine.com даёт своё осмысление этой проблемы.
Smashing magazine утверждает, если вы хотите, чтобы максимальное количество людей находилось на вашем сайте, читало, понимало текст, то нужно установить его минимальный размер в 16 px. Так же ресурс приводит несколько статистических фактов, над которыми нельзя не задуматься.
Почти каждый десятый пользователь имеет проблемы со зрением (приведена давнишняя статистика, поэтому думаем, что на сегодняшний день эта цифра гораздо больше). Остальным, у кого со зрением все в порядке, все равно придется напрячься, чтобы прочитать текст меньше 16 px. Даже если пользователи не замечают, что напрягают глаза, то, на самом деле, всё равно это делают. Чем труднее читать текст, тем меньше вероятность, что он будет прочитан. Это значит, что пользователь прочтет меньше информации, чем ему было нужно, а, следовательно, меньше поймет. Использование 10 px на сайте — совершенно бессмысленно, а 12 px — все еще слишком мелко для большинства читателей.

Но возникает вопрос, ведь пользователи могут увеличить текст на том же десктопе при помощи клавиш на клавиатуре. Но опять же статистика говорит о том, что как раз те пользователи, которым это увеличение действительно необходимо, просто не знают об этой возможности и функции, либо просто не захотят этого делать, им проще уйти с сайта, чем продолжать дальше напрягать свои глаза. В итоге получается, что из-за размера шрифта бизнес может потерять потенциальных клиентов, а, следовательно, и деньги.
Так же необходимо учитывать особенности шрифта, используемого в проекте. Например, шрифты семейства Futura меньше по размеру шрифтов семейства Helvetica примерно на 10-15% при выставлении одинакового размера у обоих.

Ссылка на статью Smashing magazine: https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/

Примеры удобного для чтения размера шрифта

Что на счёт заголовков?

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

Пример сайта с контрастным заголовком

Этот прием в основном касается заголовка h2.
Статистика показывает, что наиболее популярные размеры шрифта для заголовков — в диапазоне от 18 до 29 px.

Конкретнее в цифрах

Общие значения

Ниже приведены некоторые значения, основанные на анализе ресурсов и статей на тему размеров шрифтов.
— Чаще всего для основного текста используются кегли от 14 до 18 px.
— Чтобы получить оптимальный размер заголовка, нужно размер основного текста умножить на 2-2,5.
— Для того, чтобы узнать оптимальный интерлиньяж (межстрочное расстояние), нужно размер шрифта умножить на 1,48.
— Отступы между абзацами примерно в 1.39 раза больше, чем интерлиньяж внутри абзацев.
— Размер строки 100 символов при размере контентной области в 1070 px.

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

Адаптивная верстка

Все современные сайты являются адаптивными. Сайты создаются с расчетом отображения сайта на нескольких разрешениях экрана. При уменьшении разрешения происходит «скачок» от одной композиции экрана к другой (брейкпоинт). Стили шрифта с каждым последующим брейкпоинтом меняются. Отсюда возникает проблема пропорций шрифта. Если на десктопной версии размер шрифта 20 рх, а интерлиньяж 28 рх, то на мобильном устройстве размер шрифта ставится, например, 14 рх, а интерлиньяж может быть и 16 рх, и 20 рх. В таких случаях, дизайнер должен сидеть и высчитывать значения на калькуляторе…или воспользоваться скейтлингом шрифтов и упростить себе жизнь https://readymag.com/kelnik/960360/
Скрипт от дизайн-бюро «Дизайн Кабак» designpub.ru помогает вычислять соотношения размера шрифта и интерлиньяжа. С этим инструментом ясно, что десктопный параграф размером 20/28 px на мобильном устройстве будет 14/20 px.

Заключение

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

10 правил идеальной типографики | Применение шрифтов в веб-дизайне

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

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

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

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

Каноны типографики в web дизайне, созданы как раз для того, чтобы дизайнеры делали текст удобным для восприятия и чтения, таким чтобы он направлял пользователей к целевым действиям: заказать услугу, подписаться на новости, оформить покупку, прочесть материал до конца.

Выбор цвета для дизайна сайта. Примеры: 50 великолепных цветовых схем

1. Крупный, мелкий или средний текст?

Последние годы все более популярны большие шрифты, причем, если шрифт крупный, то это лучше для сайта. Почему это так? Это связано с «тотальной мобилизацией» — на смартфонах мелкий шрифт очень сложно прочесть. Восприятие большого шрифта значительно лучше и не составит большого труда прочитать текст или заголовок крупным шрифтом. Однако мелкая типографика так же находит применение в дизайне, так как она гармонично наполняет пространство между изображениями.

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

Ваши шрифты на сайте делайте как можно крупнее! Они особенно классно смотрятся в сочетании с лаконичным дизайном. Используйте адаптивные шрифты, потому что они одинаково хорошо читаемы на декстопной и мобильной версиях.

2. Выравнивание текста: по центру или по краю?

Многие дизайнеры рекомендуют делать, выравнивание текста по левому краю, так как оно считается оптимальным для восприятия. Очень осторожно можно использовать выравнивание по центру и по правому краю. А вот по ширине — не в коем случае, такой текст становится мало читабельным.

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

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

3. Какова оптимальная длина строк?

Здесь хорошо работает правило «золотой середины» — не должна быть слишком длинная (затрудняет понимание сути и забудешь, пока дочитаешь), но и не очень короткая. Оптимальная длинна строк в диапазоне от 55 до 65 символов (для декстопов) и от 30 до 40 символов (для мобильных)

Упростите жизнь вашим пользователям – не заставляйте их преодолевать трудности и раздражаться, пробираясь сквозь плохо читабельный текст.

4. Кавычки: лапки или елочки?

Вот как могут выглядеть кавычки в тексте: «кавычки» или «кавычки», немецкие „лапки“, ‘одинарные кавычки’, “двойные кавычки”. В русском языке предпочтение отдается елочкам – так уж сложилось. Лапки применяются, когда необходимо поставить одни кавычки внутри других кавычек.

Профессионалы всегда ставят елочки. А еще это важно, так как в языках программирования и HTML разметке, используются «программистские» кавычки, поэтому предпочтение следует отдавать таким «елочкам».

5. Как оформить стили заголовков?

Стили заголовков делаются по принципу пирамиды. Н1 — основной заголовок – самым крупным шрифтом, Н2 — подзаголовок второго уровня – поменьше, и так далее. Основной текст – меньше заголовка последнего уровня.

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

Не пропустите нашу новую публикацию, она поможет вам глубже изучить вопрос SEO оптимизации: Как использовать теги заголовков «h2, Н2, Н3…»

6. Спец. термины типорфики: кегль, кернинг, интерлиньяж

Это термины верстальщиков, но их следует знать. Кегль – это высота букв. Кернинг – это интервалы между буквами. Важно! Между разными буквами кернинг может быть различным. Это делается для лучшей читабельности. Интерлиньяж – это расстояние между строчками.

Выбор значений кегля, кернинга, интерлиньяжа всегда подбирается индивидуально для каждого проекта. Есть общая рекомендация делать интерлиньяж в 1,5 раза больше кегля.

7. Общий стиль для одинаковых элементов

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

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

Если вам важно не рассеивать внимание пользователей, а напротив, сконцентрировать его, – тогда оформляйте однотипные элементы одинаково!

8. Какой выбрать шрифт с засечками или без?

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

Однако большинство пользователей привыкли к шрифтам без засечек, и они могут раздражать для мелкого шрифта. Разумно использовать шрифты с засечками в заголовках. Наиболее популярными и читабельными шрифтами без засечек принято считать: Rockwell, Helvetica, Futura, Garamond, Bodoni, Frutiger, Trajan, Myriad. Эти шрифты наиболее часто используются при разработке веб сайтов.

9. Какой цвет текста использовать?

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

Чтобы сконцентрировать внимание пользователей на основных блоках текста, их можно выделить, расположив на цветной подложке. Кнопка СТА всегда должна быть контрастного цвета. Осторожно экспериментируйте с «кислотными» цветами, особенно при сочетании красного на зеленом или синего на желтом.

Особенности восприятия цвета в веб-дизайне. Как зацепить клиента

10. В приоритете читабельность текстов

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

Для этого не обойтись без экспериментов, необходимо периодически проводить А/В-тестирование, опросы и спрашивать напрямик, нравятся ли пользователям типографика на сайте и как она воспринимается.

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

Соблюдайте эти рекомендации и ваш веб-ресурс всегда будет выглядеть достойно:

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

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

Наша цель заключается в том, чтобы создать убедительный и информативный дизайн для вашего проекта. А задача веб-дизайнера — это создание истории вашего бренда в процессе веб-разработки. Обращайтесь в веб-студию АВАНЗЕТ, мы сделаем ваш веб-сайт не только привлекательным, но и проработаем UX дизайн, так чтобы обеспечить отличный пользовательский опыт, необходимый для успешного проекта.

07.03.2021

← Поделиться с друзьями !

Шрифты для сайта — правила выбора и основные варианты сочетания

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

Основные группы шрифтов

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

Serif (с засечками)

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

Slab serif (прямоугольные засечки)

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

Script (пропись)

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

Blackletter (готический шрифт)

Этот шрифт имеет декоративный вид. Если вы хотите разбавить ваш веб-дизайн чем-нибудь старинным, то вам следует воспользоваться именно этим шрифтом. Зачастую эти шрифты используют различные рестораны на своих вывесках.

Sans serif (без засечек)

Буквы не будут иметь засечек. Они довольно схожи со шрифтами, которые имеют засечки и будут замечательно смотреться в тексте любого интернет ресурса или в заголовках. Обычно их применяют на компьютере, потому как читать их намного удобней, когда шрифт имеет мелкие размеры. Эти шрифты могут помочь сделать ваш проект более простым, а его дизайн — более минималистичным. На сегодняшний день San serif — это самый популярный шрифт, который дизайнеры используют для текста статей, размещаемых на своих веб-сайтах.

Handwriting (рукописный шрифт)

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

Decorative (декоративный)

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

Подборка и совмещение шрифтов

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

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

Обратите свое внимание и на то, чтобы шрифт, выбранный вами, имел разнообразные стили. Это позволит вам быть более гибкими при использовании их в веб-проекте. Хорошим способом понять, подходит ли вам тот или иной шрифт, будет его тестирование на больших блоках, например в заголовках, параграфах и т.д.

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

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

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

Как смешивать и использовать шрифты в тексте

Рассмотрим несколько принципов совмещения шрифтов, которые позволят добиться красивого оформления текста.

Сайт должен быть читабельным

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

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

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

Создавая дизайн проекта, старайтесь не использовать большое количество шрифтов. Оптимальным количеством для использования будет три шрифта. Этому есть несколько причин:

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

Не используйте неподходящие сочетания

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

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

Примеры объединения шрифтов

Для примера рассмотрим страницы нескольких сайтов, где грамотно подобраны шрифты.

Заголовки:
Sentinel (serif slab)

Параграфы:
Gotham Narrow (sans-serif)

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

Заголовки и параграфы:
Freight Text Pro (serif)

Остальное:
Freight Sans Pro (san-serif)

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

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

Заголовки:
PMN Caecilia (slab serif).

Параграфы:
Gill Sans (sans-serif)

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

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

Заголовки и параграфы:
Skolar (serif)

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

5 советов веб-дизайнеру в работе со шрифтами

27 мая. 2014

Автора приведенной ниже статьи команда work-zilla.com знает как высококлассного дизайнера. Это он сделал редизайн главной страницы сайта, создал наш ролл-ап, наши листовки, сертификаты и большую часть баннеров. Работать с Евгением всегда приятно. Он отлично умеет «заглянуть в голову» заказчика и его академическое образование, профессиональный опыт и талант находят воплощение в каждом проекте. Он педантичен, аккуратен, пунктуален. Его файлы всегда в идеальном порядке, в макетах все слои аккуратно разложены по папкам и имеют внятные названия. Когда мы узнали, что Евгений написал книгу «Дорожная карта веб-дизайнера. 101 совет от профессионала», то решили, что это «must read» для всех исполнителей work-zilla.com, специализирующихся в этой сфере. Сегодня мы публикуем несколько советов из книги, касающихся работы со шрифтами.

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

Ни в коем случае не сжимайте и не растягивайте шрифты

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

Избегайте большого количества разных шрифтов

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

Используйте простые шрифты. Сделайте текст легкочитаемым

Не следует использовать причудливые и витиеватые шрифты, которые сложно прочесть. Так же постарайтесь не применять для основного текста слишком мелкие шрифты. Оптимальный размер 12-14 pt.

Не используйте шрифт Comic Sans

Если вы не оформляете комиксы. Во всех остальных случаях Comic Sans считается одним из самых вульгарных, плохочитаемых и непрофессионально выполненных шрифтов.

Используйте бесплатные шрифты из набора GoogleFonts

Не так давно Google создал открытую коллекцию веб-шрифтов Google Font. При помощи Google Font API вы получаете свободный доступ к ним, что даёт возможность легко добавлять веб-шрифты на сайт.

В числе преимуществ:

– Большой выбор высококачественных веб-шрифтов для любой вашей страницы (в том числе и кириллицы).
– Поддержка данных шрифтов почти всеми браузерами (в том числе Explorer 6).
– Простота использования.
– Стремительное пополнение коллекции.

Ну и конечно читайте книги по шрифтам и типографике. В этом деле без теории никуда. Могу порекомендовать начать с этих двух книг: Александра Королькова, «Живая типогрaфика» и Юрий Гордон, «Книга про буквы от А до Я». Для погружения в теорию в самый раз. Также, всем начинающим веб-дизайнерам и не только будет полезна моя книга «Дорожная карта веб-дизайнера. 101 совет от профессионала» (скачать книгу бесплатно). Она поможет не только задать правильные ориентиры в профессии, но и избежать большинства распространённых ошибок свойственных новичкам.

Евгений Ржавцев, графический дизайнер

Рубрики: Исполнителям, Полезное

25 отличных бесплатных шрифтов для веб-дизайнеров | Брэдли Найс

Брэдли Найс, менеджер по контенту ClickHelp.com — инструмент для документирования программного обеспечения

Вы хотите изменить дизайн своего веб-сайта или приложения? Ответом может быть новый шрифт.

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

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

Jakarta — бесплатный легкий шрифт с ультрасовременным дизайном. Идеально подходит для графического дизайна и дизайна логотипов.

Olesia — это шрифт с отличием: его дополнительные петли и фигурные полосы на таких буквах, как «b» и «E», добавляют очаровательно беззаботный вид, который он придает любому дизайну, в котором он используется.

Hamurz — это креативный шрифт с волнистыми и фигурными формами. Это бесплатно для личного и коммерческого использования.

Paralines — бесплатный шрифт с ретрофутуристической атмосферой. Источником вдохновения для этого послужили как современные шрифты, так и ретро-дизайн прошлого. Не стесняйтесь использовать это в любом из своих проектов.

Знакомьтесь, Fina — красивый, тонкий, современный шрифт, подходящий для всех видов творческих дизайнерских работ. Он также отлично подходит для заголовков: заглавные буквы с точками и точками, а строчные — без них.

Это БЕСПЛАТНЫЙ рукописный шрифт Brotherhood, который имеет множество возможных применений.

Argon — уникальный шрифт со спортивным, современным и авантюрным оттенком.Каждая буква представляет собой решенную головоломку толщиной в три линии.

Типографика, основанная на олдскульных татуировках суставов пальцев.

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

24 часа, потраченных на этот проект, простой, геометрический и современный дизайн.

Это бесплатно для личного и коммерческого использования.

Ikaros — это бесплатный современный / минималистичный шрифт. Бесплатно как для личного, так и для коммерческого использования.

Бесплатный шрифт ручной работы.

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

Panama Light БЕСПЛАТНО для личного и коммерческого использования.

Charming — это нарисованный от руки шрифт, вдохновленный винтажными американскими и народными буквами. Он подходит для логотипов, дизайна вывесок, рекламы, плакатов и надписей. Шрифт поставляется в формате OpenType и поддерживает набор символов латинского, греческого и кириллического языков.Бесплатно для личного и коммерческого использования.

BEYNO — это шрифт в верхнем регистре, который отлично подходит для создания привлекательных заголовков, плакатов и многого другого. БЕСПЛАТНО для личного и коммерческого использования!

Timber — это бесплатный шрифт, который очень универсален, так как вы можете легко комбинировать буквы с минимальными усилиями в Illustrator для достижения отличных типографских эффектов. Линии идеально выровнены для соединения друг с другом. Прописные и строчные буквы также имеют разные буквы.

Long Shot — новый смертельно опасный шрифт для дисплеев с ярким характерным дизайном.Предназначен для заголовков, заголовков, баннеров и т. Д. Шрифт включает прописные и строчные буквы, числа и знаки препинания.

ASTRO. Бесплатная модульная гарнитура. Первоначальные формы были вдохновлены астрономическим миром, поэтому весь проект вдохновлен им.

Zefani Stencil — это современный дидоновый шрифт с четкими символами и жирными линиями, а его родственный шрифт Zefani Sans — это светлый шрифт без засечек с однолинейными штрихами и тремя разными весами.

Soda Fountain — это шрифт, полностью написанный заглавными буквами, винтажный шрифт без засечек.Вдохновленный типографикой, характерной для закусочных 1950-х годов, Soda Fountain имитирует винтажный стиль, который обязательно сделает ваши проекты яркими! Soda Fountain такой же гладкий, как безалкогольный напиток, с достаточным ароматом, чтобы использовать его во всех ваших проектах.

Soda Fountain больше всего подходит для заголовков, но будет работать практически со всем, что вы создаете, для чего нужен гладкий, винтажный вид. Этот шрифт бесплатен как для личной, так и для коммерческой работы.

лучших комбинаций шрифтов Google для современного веб-сайта

Дизайн

Дело в выборе шрифтов…

Если вы создаете веб-сайт и не совсем дизайнер, вы столкнетесь с большой проблемой, когда дело доходит до выбора правильных шрифтов для него.

Это определенно непростая задача. Даже для тех, кто занимается дизайном.

Есть из чего выбирать. Когда начать? Как вы можете быть уверены, что выбираете правильный вариант? Как совместить два шрифта?

Что ж, это вопросы, на которые вы сможете ответить со временем, приобретя опыт и изучив типографику, если хотите.

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

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

Надежные комбинации

Они предназначены для веб-сайтов с современным подходом или веб-сайтов, которые хотят обновить свой бренд.

Во всех комбинациях используются шрифты Google. И они демонстрируют один шрифт для заголовков (отмечен как H) и другой для основного текста (отмечен как B).

Здесь нет необычных или слишком причудливых шрифтов, которые могут быстро сделать ваш дизайн непрофессиональным.

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

Эксклюзивный бонус: Загрузите «7 способов сделать свой сайт профессиональным». И повысьте доверие к своему сайту!

Как использовать эти комбинации

→ Если вы используете одну из наших тем WordPress, все, что вам нужно сделать, это перейти в Параметры темы »Типографика на панели инструментов WordPress.

Вы найдете раскрывающееся меню для заголовков и еще одно для шрифта основного текста.Это меню предлагает вам все доступные шрифты от Google, поэтому просто выберите тот, который вам нужен, и нажмите «Сохранить».

→ Если вы не используете одну из наших тем или создаете код для веб-сайта, вам нужно выполнить два шага:

Шаг 1 : Вставьте шрифты на свой веб-сайт, добавив код внедрения в качестве первого элемента в вашего HTML-документа.

Шаг 2 : Объявите шрифты, которые будут использоваться для текста и заголовков в ваших стилях.css файл.

Вы найдете код встраивания и код CSS под каждой комбинацией, так что вы можете скопировать и вставить их в свои файлы.

Еще кое-что, прежде чем мы начнем

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

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

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

1. Crimson Text + Work Sans

Если вы ищете элитный стиль, внешний вид, который сделает ваш веб-сайт престижным и современным, то эта комбинация для вас.

Crimson Text — шрифт с засечками, вдохновленный шрифтами старого стиля — для заголовков, в сочетании с Work Sans — современным гротескным шрифтом без засечек — для основного текста, представляют собой прочное сочетание традиции и современности.

* Посмотрите на эту комбинацию шрифтов и цветов в действии на этом готовом сайте от Artisan Themes: Blue Agency.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: "Work Sans", без засечек;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: «Малиновый текст», с засечками;
}

Цвета

Цвет фона: # 0057ff
Цвет текста: #ffffff

2. Освальд + Кардо

Комбинация с высокой контрастностью, которая наверняка повлияет на посетителей вашего сайта.

Это Освальд + Кардо. Сжатый шрифт без засечек с заглавными буквами для заголовков и классический шрифт с засечками для основного текста.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: 'Cardo', serif;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: «Освальд», без засечек;
 преобразование текста: прописные буквы;
}

Цвета

Цвет фона: # 484d5c
Цвет заголовка: # ffce00
Цвет корпуса: # c0ccd4

3.Зыбучие пески (средний + светлый)

Иногда достаточно одного шрифта, чтобы ваш дизайн стоял на месте. Это один из тех моментов.

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

Quicksand — это геометрический дисплей без засечек с закругленными концами, что делает его удобным и приятным шрифтом.

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

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: «Зыбучие пески», без засечек;
 font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
 font-weight: 500;
}

Цвета

Цвет фона: # ff0d7b
Цвет текста: #ffffff

4. Archivo Black + Джадсон

Прочный, смелый с оттенком элегантности. Знакомьтесь: Archivo Black + Джадсон.

Плотный шрифт без засечек для заголовков и более тонкий шрифт с засечками для основного текста.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: 'Judson', serif;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: Archivo Black, без засечек;
}

Цвета

Цвет фона: # 674b7c
Цвет текста: # f47362

5. Абрил Fatface + Робото

Abril Fatface и Roboto составляют модную и шикарную комбинацию.

По словам авторов Abril Fatface: «Тонкие засечки и четкие кривые придают шрифту изысканный вид, который придает элегантный вид любому заголовку».

Робото входит, чтобы уравновесить личность Абрил. Достижение стильного и современного баланса.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: «Робото», без засечек;
 font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Abril Fatface', serif;
}

Цвета

Цвет фона: # ff3627
Цвет текста: #ffffff

6.Archivo + Open Sans

Яркий, яркий, блестящий. Комбинация шрифтов для молодых и веселых брендов.

Используйте Archivo (вес 500) для заголовков, Open Sans (вес 300) для тела и ta-da …! Вы готовы к работе.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: «Open Sans», без засечек;
 font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Archivo', без засечек;
 font-weight: 500;
}

Цвета

Цвет фона: # 864aff
Цвет заголовка: # 00fdcb
Цвет корпуса: #ffffff

7.Монсеррат + Work Sans

Смелый, жирный, жирный, геометрический, жирный… и дружелюбный. Если это то, что вам нужно, попробуйте эту комбинацию.

Нечего и говорить о Montserrat, одном из самых красивых и надежных шрифтов в коллекции Google Fonts.

Он идеально подходит для современных веб-сайтов, и вы увидите, что он адаптируется к разным личностям.

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

Объедините его с Work Sans (облегченная версия), шрифтом, который я лично полюбил последние месяцы, и вам не о чем будет беспокоиться. Вроде в жизни. Они такие могущественные.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: "Work Sans", без засечек;
 font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Montserrat', без засечек;
 font-weight: 900;
}

Цвета

Цвет фона: # b7e3e4
Цвет текста: # f03f35

8.Прата + Лато

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

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

* Посмотрите, как работает эта комбинация в этой бесплатной теме WordPress под названием Pepper.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: 'Lato', без засечек;
 font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Prata', serif;
}

Цвета

Цвет фона: # 5b1ee1
Цвет текста: #ffffff

9. Монтсеррат + Лора

Помните, я сказал, что Монсеррат может служить разным стилям и целям? Вот доказательство.

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

Объедините его с чистыми засечками, такими как Lora, и палитрой розового или розового золота, и bum , у вас есть веб-сайт в женственном стиле для индивидуального предпринимателя или современного бренда, которым управляет женщина.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: 'Lora', serif;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Montserrat', без засечек;
 font-weight: 300;
 преобразование текста: прописные буквы;
}

Цвета

Цвет фона: # fce1e0
Цвет текста: # 000000

10.Дисплей Playfair + Chivo

Роскошный и модный. Такого статуса вы можете достичь с помощью этой комбинации.

Заголовки украшены Playfair Display, одним из самых красивых шрифтов с засечками от Google Fonts. Используйте его курсивом, и ваш сайт будет выглядеть премиально и эксклюзивно.

Элегантность и тонкие штрихи

Chivo, использованные в Light, делают его идеальным для сочетания с сильными характеристиками Playfair Display.

Что вы ждете, чтобы попробовать?

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: "Chivo", без засечек;
 font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Playfair Display', serif;
 font-weight: 700;
 стиль шрифта: курсив;
}

Цвета

Цвет фона: # 000000
Цвет текста: #ffffff

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

Ищете дополнительные советы по дизайну для создания собственного веб-сайта? Продолжайте читать здесь: 11 основных советов для не-дизайнеров, создающих веб-сайт

5 универсальных шрифтов для веб- и мобильного дизайна | Ник Бабич

Типографика — неотъемлемая и важная часть любого дизайна. Все мы знаем, что

Content is King

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

Вот 5 лучших шрифтов, которые вы можете использовать на своем следующем веб-сайте или в мобильном приложении.

Open Sans — это гуманный шрифт без засечек, разработанный Стивом Маттесоном по заказу Google.

Open Sans оптимизирован как для печати, так и для Интернета. Поскольку этот шрифт имеет широкие апертуры для многих букв и большую высоту по оси x (высокие строчные буквы), он остается очень разборчивым как на большом, так и на маленьком экране.

Open Sans Использование Open Sans в веб-дизайне. Изображение: Riccardo Anelli

Категория: Sans-Serif

Хорошо сочетается с: Открытый без засечек хорошо сочетается со многими шрифтами, такими как Montserrat, Lato, Brandon Grotesk и Roboto

Рекомендации по дизайну: Попробуйте 28px для заголовков и 16px для обычного контента

Источник: Google Fonts

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

Roboto

Roboto — это шрифт по умолчанию в Android и других сервисах Google.

Использование Roboto в продуктах Google (RIP Inbox)

Категория: Sans-Serif

Хорошо сочетается с: Roboto Slab, Open Sans, Lato, Playfair Display

Рекомендации по дизайну: Попробуйте 21px для обычного контента

Источник: Google Fonts

Helvetica — широко используемый шрифт без засечек, разработанный в 1957 году швейцарским дизайнером шрифтов Максом Мидингером вместе с Эдуардом Хоффманном.Примечательными особенностями Helvetica являются большая высота по оси x, завершение штрихов на горизонтальных или вертикальных линиях и необычно малый интервал между буквами, которые в совокупности придают ему плотный и компактный вид.

Helvetica — популярный выбор для веб-дизайна. Изображение: webydo Использование Helvetica. Фото Питера Доусона Использование Helvetica в печати (издание правительства Великобритании)

Helvetica® Now, выпущенный в 2019 году, представляет собой новую главу в истории, возможно, самого известного шрифта всех времен.

Категория: Sans-Serif

Рекомендации по дизайну: Попробуйте 48px для заголовков и 18px для обычного контента

Лучшие пары с: FF Tisa, Georgia, Roboto, Benton Sans

Источник: Fonts.com

Старинные плакаты и вывески в традиционном районе Монтсеррат в Буэнос-Айресе вдохновили Джульетту Улановски на создание этого шрифта. Геометрический шрифт оптимизирован для цифрового использования и может быть отличным выбором для минималистичных и современных веб-сайтов и мобильных приложений.

Montserrat

Montserrat отлично подходит для коротких кусочков любых шапок.

Изображение: eddieolin

Категория: Sans-Serif

Хорошо сочетается с: Open Sans, Roboto Slab и Lora

Рекомендации по дизайну: Попробуйте 30px для заголовков и 16px для обычного содержимого

Источник: Gooogle Fonts

Слово avenir по-французски означает «будущее».Семья черпает вдохновение из геометрического стиля шрифта без засечек, разработанного в 1920-х годах и взявшего за основу круг, например, Erbar и Futura.

Avenir Изображение: blackopticalAvenir в использовании. Изображение: dutchnews

Категория: Sans-Serif

Хорошо сочетается с: Minion, Georgia, Helvetica

Рекомендации по дизайну: Попробуйте 30px для заголовков и 14px для обычного контента

Источник: Fonts.com

Вот список инструментов, которые упростят процесс выбора шрифта и сопряжения.

Справочное руководство по типографике в мобильном веб-дизайне — Smashing Magazine

Об авторе

Сюзанна Скакка — бывший разработчик WordPress, тренер и менеджер агентства, а теперь работает внештатным копирайтером. Она специализируется на маркетинге, веб … Больше о Сюзанна ↬

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

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

Ответ на вопрос о типографике может показаться достаточно простым: то, что работает на компьютере, должно работать и на мобильном устройстве, если оно хорошо масштабируется. Правильно?

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

Понимание основ типографики в современном веб-дизайне

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

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

Типографская терминология

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

Типографика: Этот термин относится к методу , используемому для стилизации, форматирования и упорядочивания «печатного» (в отличие от рукописного) текста.

Гарнитура: Это система классификации, используемая для обозначения семейства символов. Итак, это будет что-то вроде Arial, Times New Roman, Calibri, Comic Sans и т. Д.

Типичное предложение шрифтов в приложениях для обработки текстов. (Источник: Документы Google) (превью в большом разрешении)

Шрифт: Это углубляется в шрифт веб-сайта. Шрифт подробно описывает семейство шрифтов, размер шрифта и любые применяемые специальные стили. Например, жирным шрифтом Arial с 11 пунктами.

Пример трех элементов, определяющих шрифт. (Источник: Google Docs) (превью в большом разрешении)

Размер: Существует два способа указать размер (или высоту) шрифта: размер текстового редактора в пунктах или размер веб-дизайна в пикселях. Говоря о мобильном веб-дизайне, мы используем пиксели.

Вот построчное сравнение различных размеров шрифта:

Пример того, как одна и та же строка текста отображается с разными размерами. (Источник: Google Docs) (Большой предварительный просмотр)

Как вы можете видеть в WordPress, размеры шрифта важны, когда дело доходит до установления иерархии в тексте заголовка:

Значения размера заголовка по умолчанию доступны в теме WordPress.(Источник: WordPress) (Большой превью)

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

Вот пример параметров, которые вы можете выбрать в настройщике темы WordPress:

Пример веса шрифта, доступного в теме WordPress. (Источник: WordPress) (превью в большом разрешении)

Кернинг: Это относится к промежутку между двумя буквами.Его можно отрегулировать, чтобы получить более эстетичный результат, а также улучшить читаемость. Для таких корректировок вам понадобится программное обеспечение для дизайна, такое как Photoshop.

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

Чтобы вы поняли, чем это отличается, вот пример из Mozilla о том, как использовать отслеживание для изменения межбуквенного интервала:

Вот как выглядит обычное отслеживание. (Источник: Mozilla) (превью в большом разрешении) Вот как выглядит отслеживание (более плотное) -1px. (Источник: Mozilla) (превью в большом разрешении) Вот как выглядит (более слабое) отслеживание 1px. (Источник: Mozilla) (превью в большом разрешении)

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

Если вы какое-то время пользуетесь текстовым редактором, то вы уже знакомы с лидирующей функцией. Текст с одинарным интервалом. Текст с двойным интервалом. Даже текст через 1,5 интервала. Это ведущее.

Роль типографики в современном веб-дизайне

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

Вот некоторые из способов, которыми типографика влияет на ваших конечных пользователей:

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

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

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

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

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

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

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

Типографика для мобильного веб-дизайна: что нужно знать

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

Я не хочу сказать, что играйте осторожно и используйте систему по умолчанию от Google или Apple. В конце концов, вы так много работаете над созданием уникальных, креативных и привлекательных дизайнов для ваших пользователей. Зачем вам сейчас бросать полотенце и просто расклеивать Roboto по всему мобильному сайту?

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

1. Размер

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

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

Nielsen Norman Group сообщила об исследовании Массачусетского технологического института, которое касалось именно этого вопроса. Что вы можете сделать с текстом, на который пользователи могут только взглянуть ? Другими словами, какой размер можно использовать для коротких строк текста заголовка?

Вот что они обнаружили:

Короткие, удобные для просмотра строки текста способствуют более быстрому чтению и большему пониманию, когда:

Они больше по размеру (в частности, 4 мм вместо 3 мм).
Они все заглавными буквами.
Ширина букв обычная (а не уплотненная).

Итого:

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

Мне было бы интересно посмотреть, как в таком случае работает веб-сайт NerdWallet.Хотя мне нравится, как это выглядит, они нарушили ряд этих предложений по размеру и стилю:

NerdWallet использует заглавные буквы и меньшие размеры шрифтов на мобильных устройствах. (Источник: NerdWallet) (превью в большом разрешении)

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

Flywheel Sports, с другой стороны, отлично иллюстрирует этот момент.Умный выбор шрифтов

Flywheel Sports для мобильных устройств. (Источник: Flywheel Sports) (превью в большом разрешении)

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

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

2. Цвет и контраст

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

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

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

В Руководстве по доступности веб-контента (WCAG) есть четкие рекомендации относительно того, как решить проблему цветового контраста в разделе 1.4.3. Как минимум, WCAG предлагает установить контраст 4,5: 1 между текстом и фоном для оптимальной читаемости. Из этого правила есть несколько исключений:

Для текста размером 18 пунктов или жирным шрифтом 14 пунктов требуется контраст только от 3 до 1.
Текст, который не отображается в активной части веб-страницы, не Не нужно соблюдать это правило.
Контраст текста в логотипе может быть установлен по усмотрению дизайнера.

Если вы не знаете, как установить соотношение между цветом вашего шрифта и фоном, на котором он расположен, воспользуйтесь инструментом проверки цветового контраста, например WebAIM.

Пример использования инструмента проверки цветового контраста WebAIM. (Источник: WebAIM) (превью в большом разрешении)

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

Чтобы решить эту проблему и обеспечить достаточно высокий контраст для ваших шрифтов, используйте инструмент цветовой пипетки, встроенный в ваш браузер, например, для Firefox или Chrome.Просто наведите пипетку на цвет фона (или шрифта) на вашей веб-странице, и пусть она скажет вам, какой сейчас фактический цветовой код.

Вот пример этого в действии: Dollar Shave Club.

Этот веб-сайт имеет ротацию изображений в верхнем баннере главной страницы. Шрифт всегда остается белым, но фон вращается. Баннер главной страницы

Dollar Shave Club на сером фоне. (Источник: Dollar Shave Club) (превью в большом разрешении) Баннер главной страницы Dollar Shave Club на бежевом / серо-коричневом фоне.(Источник: Dollar Shave Club) (превью в большом разрешении) Баннер главной страницы Dollar Shave Club на фиолетовом фоне. (Источник: Dollar Shave Club) (превью в большом разрешении)

Исходя из того, что мы знаем сейчас, пурпурный, вероятно, единственный, который пройдет с честью. Однако, чтобы показать вам, как работать с этим упражнением, вот что инструмент «пипетка» говорит о цветовых кодах HEX для каждого из фонов:

Серый: # 9a9a9a
Бежевый / серо-коричневый: # ffd0a8
Фиолетовый: # 4c2c59.

Вот контраст между этими цветами и белым шрифтом:

Серый: от 2,81 до 1
Бежевый / серо-коричневый: от 1,42 до 1
Фиолетовый: от 11,59 до 1.

Очевидно, серый и бежевый фон дадут себя очень плохому опыту для мобильных посетителей.

Кроме того, если бы мне пришлось угадывать, я бы сказал: «Попробуйте безрисковый стартовый набор прямо сейчас». это всего лишь шрифт размером 10 пунктов (что составляет всего около 13 пикселей). Таким образом, размер шрифта также влияет на фактор удобочитаемости, не говоря уже о плохом выборе цветов, используемых для более светлого фона.

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

3. Отслеживание

Просто и понятно: отслеживание в мобильном веб-дизайне необходимо использовать для контроля плотности. Стандартная рекомендация состоит в том, чтобы в строке было не более 30-40 символов.Все, что больше или меньше, может отрицательно повлиять на удобочитаемость.

Хотя кажется, что Dove раздвигает границы этого ограничения в 40 символов, я думаю, что это сделано хорошо.

Dove использует равномерное отслеживание и (в основном) соблюдение 40-символьного ограничения. (Источник: Dove) (превью в большом разрешении)

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

4. Ведущий

Согласно NNG, контент, который отображается в верхней части экрана на 30-дюймовом настольном мониторе, приравнивается к пяти пролистываниям на 4-дюймовом мобильном устройстве. Конечно, эти данные немного устарели, поскольку большинство смартфонов сейчас имеют размер от пяти до шести дюймов:

Средних размеров экрана смартфонов с 2015 по 2021 год.(Источник: TechCrunch) (превью в большом разрешении)

Даже в этом случае, допустим, это равносильно трем или четырем хорошим движениям экрана смартфона, чтобы добраться до края экрана на рабочем столе. Это большая работа, которую нужно проделать вашим мобильным посетителям, чтобы получить доступ к интересным материалам. Это также означает, что их терпение уже иссякнет к тому времени, когда они доберутся до цели. Как отмечает NNG, мобильный сеанс в среднем обычно длится всего 72 секунды. Сравните это с настольным компьютером за 150 секунд, и вы поймете, почему это так важно.

Это означает для вас две вещи:

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

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

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

Веб-сайт Hill Holliday не только вдохновляет на то, как немного «сойти с ума» от мобильной типографики, но и проделал фантастическую работу по использованию ведущей линии для облегчения чтения больших объемов текста:

Hill Holliday использует идеальное соотношение интерлиньяжа между строками и абзацами.(Источник: Hill Holliday) (превью в большом разрешении)

Различные ресурсы дадут вам различные рекомендации по созданию интервала для мобильных устройств. Я видел предложения по размеру от 120% до 150% от размера шрифта. Поскольку при разработке для мобильных устройств вам также необходимо учитывать доступность, я предлагаю вам следовать рекомендациям WCAG:

Расстояние между линиями должно быть 1,5 (или 150%, в зависимости от того, какое соотношение вам подходит).
В таком случае интервал между абзацами должен быть равен 2.5 (или 250%).

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

5. Допустимые шрифты

Прежде чем я расскажу о том, что делает шрифт приемлемым, я хочу сначала взглянуть на то, какие шрифты используются по умолчанию в Android и Apple. Я думаю, что мы можем многому научиться, просто посмотрев на эти варианты:

Android
Google использует два шрифта для своих платформ (как для настольных компьютеров, так и для мобильных устройств): Roboto и Noto.Робото является основным по умолчанию. Если пользователь посещает веб-сайт на языке, который не поддерживает Roboto, тогда Noto является вторичной резервной копией.

Это Робото:

Снимок набора символов Робото. (Источник: Roboto) (превью в большом разрешении)

Также важно отметить, что Roboto предлагает на выбор несколько семейств шрифтов:

Другие варианты шрифтов Roboto на выбор. (Источник: Roboto) (превью в большом разрешении)

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

Apple
Apple имеет свой собственный набор рекомендаций по типографике для iOS, а также собственный системный шрифт: San Francisco.

Шрифт San Francisco для устройств Apple. (Источник: Сан-Франциско) (превью в большом разрешении)

По большей части вы видите то, что получаете в Сан-Франциско.Это просто базовый шрифт без засечек. Если вы посмотрите на рекомендуемые Apple предложения по настройкам шрифта по умолчанию, вы также обнаружите, что они даже не рекомендуют использовать жирную стилизацию или диковинные размеры, ведущие или отслеживающие правила:

Настройки по умолчанию и предложения для гарнитуры San Francisco. (Источник: Сан-Франциско) (превью в большом разрешении)

Как и во всем остальном, что делает Apple, формула типографики очень проста. И знаешь, что? Это действительно работает. Вот как это работает на веб-сайте Apple:

Apple использует свои собственные передовые методы типографики.(Источник: Apple) (превью в большом разрешении)

Как и в случае с системным шрифтом Google, Apple выбрала простой классический шрифт. Хотя это может не помочь вашему сайту выделиться среди конкурентов, оно никогда не повлияет на читаемость или разборчивость вашего текста. Это также будет хорошим выбором, если вы хотите, чтобы ваши визуальные эффекты производили большее впечатление.

Мои рекомендации

Итак, это подводит меня к моим собственным рекомендациям о том, что вы должны использовать с точки зрения шрифта для мобильных веб-сайтов.Вот вердикт:

Не бойтесь начать с системным шрифтом по умолчанию. Они будут вашим самым безопасным выбором, пока вы не поймете, насколько далеко вы можете раздвинуть границы мобильной типографики.
Используйте только шрифт без засечек или шрифт с засечками. Если на вашем настольном веб-сайте используется декоративный или рукописный шрифт, замените его чем-нибудь более традиционным для мобильных устройств.
Тем не менее, совсем не обязательно игнорировать декоративные гарнитуры. В примерах из Hill Holliday или Flywheel Sports (как показано выше) вы можете увидеть, как небольшие штрихи нестандартного нетрадиционного шрифта могут добавить немного изюминки.
Никогда не используйте более двух шрифтов на мобильном телефоне. Посетителям просто не хватает места, чтобы визуально оперировать таким количеством вариантов.
Убедитесь, что ваши два шрифта дополняют друг друга. В частности, обратите внимание на лица, которые имеют одинаковую ширину символов. Дизайн каждого лица может быть уникальным и хорошо контрастировать с другим, но все же должно быть некоторое единообразие в том, что вы представляете глазам мобильных посетителей.
Избегайте гарнитур, в которых нет определенного набора символов.Например, сравните, как заглавная «i», строчная «l» и цифра «1» отображаются рядом друг с другом. Вот пример шрифта Myriad Pro с веб-сайта Typekit: шрифт
Myriad Pro в действии. (Источник: Typekit) (превью в большом разрешении)
В то время как цифра «1» не вызывает особых проблем, прописная «i» (первая буква в этой последовательности) и строчная «l» (вторая) слишком похожи. Это может вызвать нежелательное замедление чтения на мобильном телефоне.
Также не забудьте проверить, как ваш шрифт обрабатывает сочетание букв «r» и «n» рядом друг с другом.Сможете ли вы различить каждую букву или они сливаются вместе, как одна неразличимая единица? У мобильных посетителей нет времени останавливаться и выяснять, что это за символы, поэтому убедитесь, что вы используете шрифт, который дает каждому символу свое пространство.
Используйте шрифты, совместимые с максимально возможным количеством устройств. Лучшими вариантами будут: Arial, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS и Verdana.
Список системных гарнитур по умолчанию для различных мобильных устройств.(Источник: tinytype) (превью в большом разрешении) Еще один вид таблицы, который включает некоторые гарнитуры, поддерживаемые Android. (Источник: tinytype) (большой превью)
Я думаю, что веб-сайт Typeform является хорошим примером того, где используется «безопасный» выбор шрифта, но это не мешает им удивлять посетителей своим сообщением или дизайном. Эффектный шрифт
Typeform не имеет ничего общего с самим шрифтом. (Источник: Typeform) (превью в большом разрешении)
Он короткий, по существу, идеального размера, удачно расположен и в целом является надежным выбором, если они пытаются продемонстрировать стабильность и профессионализм (как мне кажется).
Если вы чувствуете себя комфортно с мобильной типографикой и хотите немного расшириться, взгляните на этот список лучших веб-безопасных шрифтов от WebsiteSetup. Здесь вы обнаружите, что большинство вариантов — это ваши основные шрифты с засечками и без засечек. В нем определенно нет ничего захватывающего или потрясающего, но он даст вам возможность поиграть, если вы хотите добавить немного больше изюминки к своему мобильному типу.

Заключение

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

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

(lf, ra, yk, il)

Проектирование для удобства чтения: руководство по веб-типографике

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

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

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

Проблемы цифровой типографики

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

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

Выбор лучшего шрифта для чтения на экране

Цифровой дизайн — это неуловимое ремесло. Не так давно мы ограничивались лишь несколькими шрифтами, совместимыми с мониторами с низким разрешением.

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

Шрифты для печати созданы с использованием чернил. Веб-шрифты созданы из квадратных пикселей.

Дизайн не обязательно должен ограничиваться универсально стандартными гарнитурами (Times New Roman теперь может быть удалена).Дизайнерам доступно бесчисленное множество вариантов исходных шрифтов, которые являются веб-безопасными и доступными. Google Fonts, Font Library и Adobe Typekit — это некоторые из немногих, которые предлагают простую интеграцию и широкий выбор вариантов.

Форматирование для приятного чтения

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

Grid Lover позволяет пользователям настраивать форматирование шрифтов для лучшей читаемости. CSS создается сбоку для упрощения реализации.

Идеальный размер текста зависит от выбранного шрифта, потому что такие факторы, как высота по оси x и открытость, будут влиять на читаемость. Размер текста будет определять высоту и длину строки. Простой способ проверить взаимосвязь между этими решениями — использовать такие инструменты, как Grid Lover, который использует ползунки для изменения внешнего вида каждого измерения.

Выбор цвета фона для блока текста так же важен, как и сам цвет шрифта. Контраст между ними определит, насколько читабельной будет копия. Средство проверки контраста WebAIM помогает легко определять коэффициент контрастности цветовых комбинаций, чтобы палитра соответствовала стандартам доступности.

Никогда не экономьте на тестировании

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

Руководство по веб-типографике

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

Вот подробное руководство по выбору правильного шрифта и его форматированию для удобства чтения.

• • •

Дополнительная литература в блоге Toptal Design:

Понимание основ

Что такое типографика в веб-дизайне?

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

Какой шрифт лучше всего подходит для чтения на экране?

Шрифты, которые лучше всего подходят для чтения на экране, — это шрифты с четкими и открытыми буквами. Proxima Nova, Georgia и Fira обладают характеристиками, позволяющими легко читать на различных экранах. На разборчивость шрифта влияют и другие факторы, например размер шрифта, высота строки, контрастность шрифта и фона.

Какой размер шрифта я должен использовать для веб-сайта?

Размер шрифта на веб-сайте должен соответствовать размеру экрана, на котором он отображается.Как правило, размер шрифта должен составлять 12–16 пунктов на экране мобильного устройства, 15–19 пунктов на планшете и 16–20 пунктов на экране настольного компьютера. Также следует учитывать такие факторы, как размер шрифта, высота и длина строки.

Что такое хорошая типографика?

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

Сколько шрифтов следует использовать на веб-сайте?

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

Следует ли использовать фирменные шрифты в дизайне веб-сайтов?

Аналитика

Доступность Дизайн

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

Фото: designsinsights.com

Фирменные шрифты

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

Обычно Интернет всегда был довольно скучным, и дизайнеры должны были спрашивать разработчиков, какие шрифты можно использовать, в частности, какие шрифты доступны в пользовательских системах.

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

Это часто неправильно используемая фраза, относящаяся к древней системе.На заре Интернета было важно выбрать шрифт, который уже был установлен по умолчанию на машине, просматривающей сайт. Таким образом, ранее веб-безопасные шрифты относились к набору шрифтов, которые были заведомо установлены в большинстве систем Windows и Mac, к ним относятся:

Arial — который был разработан в 1982 году, стал стандартом де-факто и является одним из наиболее широко используемых шрифтов без засечек, которые до сих пор используются в Интернете и офлайн.
Helvetica — шрифт без засечек для дизайнеров, разработанный в 1957 году швейцарским дизайнером шрифтов Максом Мидингером.
Times New Roman — шрифт с засечками, разработанный для разборчивости основного текста, заказанный The Times в 1931 году.
Courier — это моноширинный шрифт с плоскими засечками, напоминающий печатную машинку. Первоначально он был разработан Говардом «Бадом» Кеттлером в 1955 году.
Verdana — известна простыми линиями без засечек и очень большим размером. Буквы почти вытянутые, что облегчает чтение. Он был выпущен Microsoft примерно в 1996 году.
Georgia — еще один шрифт Microsoft, разработанный в 1993 году и выпущенный в 1996 году.
Palatino — восходит к эпохе Возрождения, был разработан Германом Цапфом и выпущен в 1949 году.
Garamond — текущая версия была выпущена в 1990 году, однако первые римские шрифты, разработанные Клодом Гарамондом, были набором, созданным для Роберта Эстьена и впервые использованным им около 1530 года.
Bookman — сохраняет читаемость (или читаемость) даже при использовании небольшого размера и был создан Александром Фемистером около 1858 года.
Trebuchet — шрифт средневековой тематики, первоначально разработанный Microsoft в 1994 году.

График показывает процентное соотношение систем Windows и Mac, в которых установлены разные шрифты — например, Arial установлен на 99,84% ПК с Windows и 98,74% компьютеров Mac. Источник: cssfontstack.com

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

История пользовательских шрифтов

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

Flash позволял использовать настраиваемые шрифты на веб-сайтах с момента его выпуска в 1996 году, но не было удобным или доступным решением для поисковых систем, и его снижение началось примерно в 2010 году, когда Apple прекратила поставки продуктов с установленным им и отключила поддержку на устройствах iOS.
sIFR (или Scalable Inman Flash Replacement) был выпущен в 2005 году и позволил вставлять богатую типографику в веб-страницы без ущерба для доступности, удобства для поисковых систем или семантики разметки.Это была реализация динамических веб-шрифтов JavaScript и Adobe Flash с открытым исходным кодом, позволяющая заменять текстовые элементы на веб-страницах HTML эквивалентами Flash.
FLIR (или Facelift Image Replacement) похож на sIFR, но вместо использования флэш-памяти он встраивает простые изображения, которые автоматически создаются из текста на веб-странице. FLIR был даже менее доступен, чем sIFR.
Cufón — это метод замены шрифтов, в котором для записи шрифтов из файла шрифтов использовались javascript и векторная графика.Это был распространенный, но очень плохой метод загрузки ресурсов пользовательских шрифтов в веб-среду. Первоначально выпущенный в 2008 году, он был снят с производства в 2017 году.
Typotheque была первым шрифтовым заводом, который представил концепцию веб-шрифтов в октябре 2009 года.
Fontdeck была основана в 2009 году и предоставляла настраиваемые шрифты для веб-сайтов, но закрылась в декабре 2016 года.

Пользовательские шрифтовые решения

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

Abobe Fonts (ранее Typekit) — это онлайн-сервис, который предлагает подписку на библиотеку шрифтов, которые можно использовать непосредственно на веб-сайтах или синхронизировать через Adobe Creative Cloud с вашими приложениями. Typekit был запущен в ноябре 2009 года и приобретен Adobe в октябре 2011 года, после чего в октябре 2018 года изменил свое название на Adobe Fonts.
Google Fonts (ранее назывался Google Web Fonts), запущенный в 2010 году и теперь имеет библиотеку из 900 бесплатных лицензионных шрифтов, интерактивный веб-каталог для просмотра библиотеки и API-интерфейсы для удобного использования шрифтов в дизайне наших веб-сайтов.

Веб-шрифты и мобильные шрифты

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

Open Sans — это шрифт без засечек, разработанный Стивом Маттесоном по заказу Google в 2010 году. Он был разработан с «прямым ударением, открытыми формами и нейтральным, но дружелюбным внешним видом» и «оптимизирован для разборчивости печати. , веб- и мобильные интерфейсы.
Source Sans Pro — это первое семейство шрифтов Adobe с открытым исходным кодом, разработанное Полом Д. Хантом в 2012 году. Это шрифт без засечек, предназначенный для удобной работы в пользовательских интерфейсах.
Roboto — семейство шрифтов без засечек в неогротескном стиле, разработанное Google в качестве системного шрифта для своей мобильной операционной системы Android.Официально он стал доступен для бесплатного скачивания 12 января 2012 года.
Lato — это семейство шрифтов без засечек, созданное летом 2010 года варшавским дизайнером Лукашем Дзедзичем («Лато» означает «лето» по-польски). В декабре 2010 года семейство Лато было опубликовано под лицензией Open Font License его литейной компанией TyPoland при поддержке Google.
Montserrat — это «бесплатный шрифт для Интернета без текста, вдохновленный вывесками, найденными в историческом районе Буэнос-Айреса», разработанный Джульетой Улановски в 2011 году благодаря успешной кампании на Kickstarter.

Свяжитесь с нами
Мы будем рады обсудить ваш онлайн-брендинг и доступность веб-сайта.

Дополнительная литература:

Прочтите эту статью «Все, что вам нужно знать о выборе фирменных шрифтов», чтобы выбрать правильный шрифт для вашей организации.
https://www.designersinsights.com/designer-resources/anatomy-of-typography/
https://www.cssfontstack.com/
https://typography.guru
https: // www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html
https://www.typotheque.com/fonts/on_screen_reading
https://medium.com/productivity-revolution/10-best-fonts-for-improving-reading-experience-6171ce199e97

цветовых схем веб-сайта | Веб-шрифты: что нужно знать

Институт исследований цвета утверждает, что средний человек делает суждение о продукте или бренде в течение 90 секунд — вот почему первое впечатление, которое вы производите на кого-то на своем веб-сайте, так важно.К двум наиболее важным аспектам вашего веб-сайта, которые помогут вам произвести хорошее первое впечатление, относятся: выбор цвета , и выбор веб-шрифтов .

Важность ЦВЕТОВ

Цветовые схемы

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

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

Например:

СИНИЙ — Синий часто используется для выражения честности и доверия. Синий цвет считается успокаивающим и надежным, он доступен и, как известно, расслабляет веб-пользователей. Многие сайты социальных сетей используют синий цвет, включая Twitter, Facebook и LinkedIn.Это приятный цвет для сайта, который кто-то планирует использовать в течение длительного времени.

ЗЕЛЕНЫЙ — Зеленый часто используется для обозначения здоровья, безопасности, стабильности и свежести. Whole Foods — это пример бренда, который использует зеленый цвет в своем логотипе, чтобы передать сочетание свежести, здоровья и природы.

КРАСНЫЙ — Красный часто используется для возбуждения и в ситуациях с высокой энергией. Красный также часто используется как цвет сильного призыва к действию.(Следите за советами по призывам к действию позже в этом посте.) ESPN использует красный цвет для своего логотипа, чтобы создать волнение и энергию.

СЕРЕБРО — Серебро часто используется для передачи изысканности и класса. Некоторые из самых изысканных и высококлассных брендов используют этот чистый и монотонный цвет для их представления. Одна из самых заметных — Apple, широко известная как лидер отрасли и олицетворяющая эксклюзивность.

ЖЕЛТЫЙ — желтый — один из самых ярких и забавных цветов.Он вызывает веселое и веселое поведение и пробуждает творческие способности. Его часто используют в товарах, предназначенных для детей. Snapchat использовал желтый цвет в позитивном ключе, стремясь привлечь большую и разнообразную толпу и создать ощущение комфорта и веселья.

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

Ваш фирменный стиль должен состоять из одного из этих цветов, который будет основным цветом, представляющим ваш бренд (Coca-Cola представлена красным цветом, McDonald’s — желтым). Когда у вас есть этот цвет, выберите четыре (максимум) дополнительных цвета, чтобы создать свою палитру. Существуют различные инструменты, которые могут помочь вам найти цвета, которые дополняют ваш основной цвет (например, это Adobe Color Wheel).

Один из самых важных цветов вашего бренда — это цвет вашего призыва к действию.Рекомендуется выбирать цвет, противоположный вашему основному цвету на цветовом круге. Это будет цвет, который полностью контрастирует с вашим основным цветом и выделяется на странице. Этот цвет следует использовать в качестве цвета CTA, чтобы привлечь внимание к любому действию, которое вы хотите, чтобы пользователь предпринял. Этот цвет должен быть дополнительным цветом в вашей палитре, его следует использовать экономно и только в тех случаях, когда вы хотите, чтобы пользователь предпринял какие-то действия. Это научит пользователя связывать этот цвет с приглашениями к действию.

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

Важность ТИПОГРАФИИ

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

Шрифт без засечек — это буквенная форма, не имеющая расширяющихся элементов, называемых « засечек », в конце штрихов.Шрифты без засечек создают ощущение современности и чистоты. Хорошим и распространенным примером этого может быть Helvetica. Шрифты

с засечками — это буквы, которые ДОЛЖНЫ иметь функцию расширения засечек. Шрифты с засечками неподвластны времени и являются классическими, а также очень легко читаются при большом объеме текста (вот почему в большинстве книг используются шрифты с засечками). Хорошим и распространенным примером этого может быть Times New Roman. Несмотря на то, что Helvetica и Times New Roman могут быть типичными примерами шрифтов без засечек и шрифтов с засечками, существует множество альтернативных вариантов, которые также бесплатны, которые вы можете использовать для своего логотипа, фирменного оформления и веб-сайта.

Вот несколько примеров:

Без засечек

Лато
Монтсеррат

Open Sans

Serif

Droid Serif
Merriweather
Roboto Slab
При правильном использовании цвет и шрифт бренда могут стать столь же важными и ключевыми для узнаваемости бренда, как и сам логотип. В идеале цвета и шрифты взаимодействуют друг с другом, чтобы создавать незабываемые впечатления для ваших пользователей.

Вопросы о выборе цвета и шрифта, и как этот выбор соотносится с визуально привлекательным и убедительным веб-дизайном? Мы будем рады помочь! Давай поговорим!

Джесси Рэнд — креативный директор и менеджер по дизайну / развитию Опыт Джесси позволил ему работать в индустрии мобильных стартапов Бостона, где он работал дизайнером пользовательского интерфейса и художником-графиком.Затем Джесси перешел в мир веб-дизайна и разработки и создал обширное портфолио интерактивных веб-сайтов. Работая одновременно в качестве дизайнера печати и основного веб-разработчика, Джесси руководит производством всех основных проектов дизайна / разработки в Vital. Джесси имеет степень бакалавра искусств Плимутского государственного университета по специальности графический дизайн. Просмотреть полную биографию

Связанный контент

10 вопросов о дизайне вашего веб-сайта Получите ресурс .