Сайты по подбору шрифтов: Сервисы для подбора шрифтов — Типография New Media

Содержание

Шрифтовые пары для сайта: что с чем сочетать?

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

Содержание

  1. Правила подбора шрифтовых пар
  2. Правило 1: «Мы с Татьяной ходим парой»
  3. Правило 2: «Гармония в контрасте»
  4. Правило 3: «Размер, начертание, цвет – разве товарищей нет?».
  5. Правило 4. «Каркас – всему голова»
  6. Правило 5. «Подобное к подобному».
  7. Правила 6. «Фи!!! Какая гадость!».
  8. Правило 7. «Когда очень хочется, то можно. Но осторожно!».
  9. Таблица сочетания шрифтов
  10. Онлайн сервисы для подбора шрифтовых пар
  11. Примеры готовых пар
  12. Хорошие шрифтовые пары для:
  13. Roboto
  14. Proxima nova
  15. Montserrat
  16. Readymag. com
  17. Google fonts
  18. Лучшие шрифтовые пары

Правила подбора шрифтовых пар

Со времен первой печатной книги создано много шрифтов. Как прекрасных так и ужасных. Поэтому не все годятся для страниц вашего проекта. Давайте разберемся почему?

Правило 1: «Мы с Татьяной ходим парой»

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

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

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

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

Правило 2: «Гармония в контрасте»

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

Правило 3: «Размер, начертание, цвет – разве товарищей нет?».

Исходя из правила 2, как шрифтовую пару можно использовать один и тот же шрифт! Контраст создадут размер кегля (или написание в режиме «ЗАГЛАВНАЯ/прописная»), начертания (нормал, болд (жирный) и италик (курсив)), наклон (вместо курсива) и цветовые решения (цвет символов) и дизайнерские решения-аксессуары (вроде теней и прочего). Данное правило, подтверждает всякий текстовой редактор, организующий текст на странице.

3 самых важных правил типографики в веб дизайне и главные тенденции.

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

Правило 4. «Каркас – всему голова»

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

На базе близкого каркаса сочетаются шрифты с засечками и без. Антиква и Гротеск, например.

«Плодородно» поле каркаса на «скрещивание» шрифтов одного семейства. Шрифты семейств serif и sans serif — обладатели широкого выбора толщин и начертаний, ширины символов и межсимвольного расстояния. Это дает до 40 вариантов написания даже у одной шрифтовой пары.

Правило 5. «Подобное к подобному».

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

Правила 6. «Фи!!! Какая гадость!».

Ряд шрифтов в дизайнерской среде считается моветоном, признаком отсутствия вкуса. Назовем несколько из них: lobster, Papyrus, Curlz, Comic sans и подобные. Не сказать, что кто-то где-то просто решил, что они плохие, и все. Эти шрифты из-за своей «разлапистой» графики и вправду с трудом сочетаются с другими. К тому же они «настроенческие» (см. правило 7).

Правило 7. «Когда очень хочется, то можно. Но осторожно!».

(Только для опытных дизайнеров и любителей экспериментировать!)

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

  • Вариант 1 (Совершенно нет сходства)

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

  • Вариант 2 (Настроение)

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

С настроением шрифта нужно работать аккуратно: легко перестараться. Текст быстро визуально перегружается и разваливается.

  • Вариант 3 (Найти общее)

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

Таблица сочетания шрифтов

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

Не стоит воспринимать такие таблицы, как догму, но как рекомендацию использовать можно и нужно.

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

Заголовок

ТекстArialComic SansCourier NewGaramondTimesPT SerifPT SansVerdanaRobotoTahomaPalatino
Arial*****************************************
Comic Sans***********************
Garamond**************************************
Times*************************************
PT Serif**************************************
PT Sans*************************************
Verdana***************************************
Roboto**************************************
Tahoma****************************************
Palatino***************************************

Онлайн сервисы для подбора шрифтовых пар

Type Genius.  Здесь можно подобрать шрифт, а заодно и пару к нему.
Font Pair. Название сервиса говорит само за себя. Нужный шрифт тут же можно закачать на компьютер.
Typ io. Выбор основного шрифта, затем его напарника. Можно наглядно увидеть, в чем сочетается пара.
Typespiration. Сайт примеров и рекомендаций по подбору шрифтовых пар.

Примеры готовых пар

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

Назовем их:

  1. Garamond и Verdana. Garamond – заголовок, жирный с засечками, Verdana – удобный для чтения «беззасечный» шрифт.
  2. Proxima Nova и Palatino. Обратно сочетание выше названной пары.
  3. PT Sans и PT Serif. «Родственники», представители одного семейства не могут не сочетаться.

Хорошие шрифтовые пары для:

Roboto

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

Приятный результат дают:

  • Garamond;
  • Georgia;
  • MS Serif;
  • Palatino;
  • Times;
  • Roboto;
  • PT Serif;
  • Lora.

Текст в Roboto хорош, если заголовок идет тем же шрифтом. Хорошо смотрятся заголовками:

  • Bookman Old Style;
  • Courier;
  • Garamond;
  • Georgia;
  • Palatino;
  • PT Serif;
  • Lobster.

Proxima nova

Лучшими парами к этому шрифту семейства Sans Serif будут:

  • Helvetica;
  • Garamond;
  • Lucida Grande;
  • Georgia;
  • Atrament;
  • Skolar;
  • Futura PT;
  • Century School;
  • Adelle;
  • FF Meta Serif Web Pro.

Для полного понимание как сочетать шрифты смотрите видео:

Montserrat

Еще один шрифт Sans Serif. Лучше всего сочетается с:

  • Source Sans Pro;
  • Open Sans;
  • Lora;
  • Esteban;
  • Lato;
  • Gill Sans;
  • Georgia;
  • PT Serif;
  • Roboto;
  • Tinos.

Readymag.com

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

Google fonts

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

Лучшие шрифтовые пары

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

Шрифты для сайта: как выбрать идеальное сочетание? 7 бесплатных инструментов

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

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

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

1) Google Fonts

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

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

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

Внизу страницы находится раздел «Популярные сочетания со шрифтом Х»

2) Type.io

Эта база шрифтов ведется дизайнерами-экспертами и позволяет увидеть трендовые сочетания шрифтов с реальных веб-сайтов. Еще можно заглянуть в код СSS, используемый для их стилизации и форматирования. Потратьте некоторое время на просмотр их впечатляющих архивов и классифицированных списков, и если наткнетесь на сайт который вас зацепит, просто нажмите на «Get Under the Hood».

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

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

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

3) Web font Blender

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

На ваш выбор большое количество популярных шрифтов и их настроек для подбора оптимального сочетания. Как только вы его нашли, вы можете скопировать CSS-код своего творения, нажав кнопку «Grab Code».

4) Fonts in use

Это независимый архив, посвященный демонстрации креативной типографики от дизайнеров со всего мира. Сайт, печатная продукция, дизайн упаковки или что-то еще – для всего команда кураторов Fonts in use способна подобрать интересные шрифтовые гарнитуры.

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

5) Canva Font Combinations

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

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

6) Font Combinator

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

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

7) Font Pair

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

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

10 лучших шрифтов для веб-сайтов

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

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

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

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

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

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

Ваш шрифт многое говорит о вашем бренде

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

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

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

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

В этом примере используется рукописный шрифт для создания знакомой атмосферы.

Этот пример выполнен в дружелюбном стиле ретро.

Совет эксперта

Существует четыре основных типа шрифта:

  • Serif — они обычно выглядят более традиционно и надежно
  • Sans serif — эти шрифты передают модернизм, силу и стиль0050
  • Рукописный шрифт — обычно ассоциируется с элегантностью, творчеством и «индивидуальным подходом»
  • Дисплей — уникальный, более разнообразный дизайн, предназначенный для использования в качестве заголовков

Мы также говорим о «современном» шрифты в инфографике ниже — это более свободная категория, основанная на внешнем виде, а не на форме.

Правильный шрифт может улучшить взаимодействие с пользователем

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

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

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

Почему шрифты для веб-сайтов важны? Резюме: 

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

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

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

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

Ваша очередь!

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

Наш шорт-лист включает:

  • Шрифт Script: Edwardian Script — для традиционного шрифта с завитушками
  • Шрифт с засечками: Trajan — для создания заявления или впечатляющего первого впечатления
  • 06 Современный шрифт: Didot Italic – для более тонкого, современного эффекта

Скорее всего, вы бы сразу отказались от шрифтов Helvetica Bold и Cooper, если только у вас нет очень нишевой целевой аудитории!

Ваша целевая аудитория будет определять ваш окончательный выбор – выберете ли вы что-то причудливое и классическое или что-то чистое, стильное и современное.

5 типов шрифтов

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

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

Примеры:

  • Merriweather
  • Trajan
  • Playfair Display

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

Это шрифты с очень чистым дизайном и менее рукописным качеством.

Примеры:

  • Open Sans
  • Myriad Italic
  • Josefin Sans

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

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

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

Эти шрифты очень жирные и имеют блочный дизайн. Эта смелость придает дизайну содержание и создает впечатление силы.

Примеры:

  • Helvetica Bold
  • Futura
  • Franklin Gothic

Совет эксперта!

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

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

Примеры включают в себя:

  • Bickham Script
  • Edwardian Script
  • Parisienne

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

Совет эксперта!

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

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

Примеры:

  • Метрополис
  • Уличная одежда
  • Искаженная мода

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

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

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

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

Что означают разные шрифты для веб-сайтов? Резюме:

  • Разные шрифты несут разное значение и вызывают у читателей разные эмоции
  • Подумайте о своем бренде и решите, какую индивидуальность вы хотите передать
  • Шрифты с засечками могут передать: традиции, респектабельность, надежность, комфорт
  • Рукописные шрифты могут передать: элегантность, нежность, креативность
  • Демонстрационные шрифты могут передать: дружелюбие, веселье, уникальность, выразительность
  • Современные шрифты могут передать: силу, стиль, шик5, прогрессивность шрифты с засечками могут передать: стабильность, объективность, чистый и современный минимализм
  • Люди судят о ваших шрифтах, прежде чем они прочитают ваш контент — убедитесь, что ваш шрифт соответствует вашему фирменному стилю!

1: Начните с вашего бренда

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

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

2: Выберите шрифты для читателей

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

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

Некоторые вопросы, которые следует задать при попытке понять вашу аудиторию, включают:

  • Какова идеальная возрастная группа?
  • Предпочтительный пол?
  • Какая у него профессия?
  • Имеет ли он/она больше/меньше располагаемого дохода?

3.

Позаботьтесь о читабельности

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

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

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

4: Проверьте свой шрифт на прочность

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

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

Например, стиль шрифта Cedarville Cursive — это красивый рукописный шрифт, но заглавная буква «G» может вам не нравиться, или вы можете предпочесть традиционный амперсанд, а не простой значок плюса. Такие мелкие детали всегда стоит проверять!

5: Используйте веб-безопасные шрифты

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

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

Когда они посещают ваш веб-сайт, какое первое впечатление вы хотите произвести?

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

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

Итак, как выбрать дизайн шрифта, отражающий эти характеристики?

  • Ответственный и надежный: Вы хотите выбрать шрифты с традиционным наследием, такие как Trajan или Times New Roman, которые создают ощущение истории.
  • Progressive & Modern: Вы хотите выбрать шрифт с четкими линиями, более тонким шрифтом и более минималистичным дизайном. Это создает ощущение модернизма и прогрессивности (см. шрифты в правой части инфографики выше).

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

Мы выбрали Aller (от Font Squirrel) в качестве надежного шрифта для нового поколения финансового планирования, ориентированного на миллениалов.

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

Шрифт выглядит профессионально и может посылать правильные подсознательные сигналы миллениалам, которые ищут финансовый совет.

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

Как подобрать шрифт для своего сайта. Резюме:

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

1: Не используйте броские шрифты

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

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

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

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

2: Не используйте грязные, трудночитаемые шрифты

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

Если вы сомневаетесь, вы всегда можете обратиться к этому дизайну шрифта:

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

3: Не Увеличивайте межстрочный интервал

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

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

Например, если вы используете размер шрифта 24 пикселя, высота строки будет 36 пикселей (что составляет 150% от 24 пикселей):

Сразу видно, что левый столбец выглядит лучше всего.

4: Не используйте слишком много разных дизайнов шрифтов

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

  1. Стиль шрифта для заголовков и заголовков страниц
  2. Стиль шрифта для основных областей содержимого
  3. Стиль шрифта для цитат или подзаголовков (необязательно )

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

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

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

5: Не используйте слишком много цветов шрифта

Цвет — мощный инструмент брендинга. Например, когда вы думаете о Starbucks, какие цвета приходят вам на ум? Скорее всего, это зеленый цвет, который вы видите на их логотипе и на их сайте.

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

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

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

6: Не выбирайте размер шрифта случайным образом

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

Рекомендуемые размеры шрифта: 8, 16, 24, 32, 48, 64, 95

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

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

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

7: Не стоит недооценивать пустое пространство

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

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

Некоторые бренды, которые лучше всего используют свободное пространство, включают Apple, Squarespace и Medium — поэкспериментируйте с пустым пространством на своем веб-сайте и посмотрите, какие результаты вы получите!

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

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

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

7 смертных грехов выбора шрифта. Резюме: 

  • Избегайте безвкусных шрифтов, таких как Comic Sans
  • Не используйте грязные шрифты, которые трудно читать
  • Используйте высоту строки, равную 150% размера шрифта, который вы используете много дизайнов шрифтов – выберите максимум два или три
  • Не используйте слишком много цветов шрифта – выберите один или два фирменных цвета
  • Не выбирайте размер шрифта наугад – мы рекомендуем 16px для основной копии
  • Не забудьте включить пробел

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

  1. Lato
  2. Merriweather
  3. Alegreya
  4. Arvo
  5. Amatic SC
  6. Josefin Slab
  7. Bowlby One SC
  8. Сценарий танцев
  9. Playfair Display SC
  10. Poppins

1. LATO

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

2. Merriweather

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

3. Alegreya

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

4. Arvo

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

5. Аматик SC

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

6. Josefin Slab

Josefin Slab — это современный стильный шрифт, который идеально подходит для придания изысканного тона любому веб-сайту. Он хорошо работает для основного текста и будет хорошо смотреться рядом с заголовками в Amatic SC.

7. Bowlby One SC

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

8. Dancing Script

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

9. Playfair Display SC

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

10. Poppins

Использование изогнутых линий в дизайне Poppins придает ему открытый и дружелюбный вид. Он предлагает 18 различных стилей на выбор, от очень тонких и утонченных до тяжелых и смелых дизайнов. Наш фаворит — Extra-bold 800, который действительно сделает ваши заголовки яркими!

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

Надежные библиотеки шрифтов

  • Google Fonts — открытый исходный код, бесплатные шрифты для просмотра и загрузки
  • Adobe Fonts — шрифты для тех, у кого есть подписка Creative Cloud
  • MyFonts — бесплатные и платные шрифты (вы выбираете нужный тип лицензии при оформлении заказа)
  • Wild Type — бесплатные и платные шрифты для креативного дизайна

Inspiration

  • Wix Fonts — 20 классных шрифтов, которые разбудят ваше воображение
  • 50 элегантных дизайнов шрифтов — список стильных шрифтов Canva
  • Как выбрать цветовую схему — узнайте, как выбрать правильный цвет шрифта

Инструменты

  • Coolors. co — простой в использовании генератор цветовых схем
  • Цвета веб-сайта Colormind — просмотрите свою цветовую схему на демонстрационной целевой странице
  • WebAIM Contrast Checker — убедитесь, что ваш шрифт и цвета фона читабельны

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

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

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

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

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

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

10 лучших шрифтов для веб-сайтов

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

Почему выбор шрифта важен для бизнес-сайтов

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

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

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

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

4 основных типа шрифтов

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

  1. Serif — эти шрифты включают маленькие линии или штрихи (известные как засечки), добавленные к более крупным буквам, символам, и цифры
  2. Sans serif — эти шрифты имеют более минималистичный дизайн, поскольку в них отсутствуют дополнительные линии/штрихи на символах, цифрах и буквах
  3. Script — шрифты, в которых особое внимание уделяется почерку
  4. Дисплей — художественные и привлекательные шрифты, часто используемые в декоративных целях

На что следует обратить внимание при выборе шрифта

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

Соответствие шрифта бизнесу

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

Придерживайтесь правила трех

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

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

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

Тщательное изучение шрифта

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

Приоритет мобильных пользователей

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

Распространенные ошибки при выборе шрифта, которых следует избегать

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

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

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

Open Sans — это шрифт без засечек, созданный Стивом Маттесоном и впервые выпущенный в 2011 году. Акцент шрифта на удобочитаемости, дружественном внешнем виде и отличной поддержке многих различных языков делает его одним из десяти лучших шрифтов для веб-сайтов.

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

Playfair display — еще один из лучших бесплатных шрифтов для веб-сайтов. Этот шрифт с засечками, разработанный датчанином Клаусом Эггерсом Соренсеном в 2011 году, использует влияние 18-го века, чтобы добиться внешнего вида, который очень хорошо подходит для заголовков и заголовков.

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

Безусловно, самый известный шрифт в этом списке. Helvetica — это шрифт без засечек, история которого восходит к 1957 году. Разработанный Haas Type Foundry в Швейцарии, Helvetica легко переводит из офлайн в онлайн, что говорит о его универсальности. Helvetica рекомендуется не из-за чего-то необычного, а из-за ее нейтральности, что делает ее хорошим безопасным вариантом, который позволяет другим элементам дизайна выделяться, не мешая. Helvetica — это шрифт премиум-класса, за лицензию на использование которого нужно заплатить.

Arvo — это бесплатный шрифт с засечками, хорошо известный своими отчетливыми блочными засечками. Антон Коовит разработал этот шрифт еще в 2010 году с целью создания чрезвычайно разборчивого шрифта, подходящего для экрана. На самом деле, сам Антон говорит, что создавал шрифт для «всех операционных систем и экранов». Этот шрифт отлично смотрится в заголовках и подзаголовках.

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

Lato — это шрифт с открытым исходным кодом, созданный польским дизайнером Лукашем Дзедзичем в 2010 году. Шрифт без засечек; теплота и разборчивость являются ключевыми характеристиками. Компании выиграют от профессиональной, но гостеприимной атмосферы, которую Лато может добавить к заголовкам или основному тексту, когда вы хотите быть серьезным в своих сообщениях, не отталкивая пользователей.

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

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