Не знаешь с чего начать? Тогда раздел "Учебник" для тебя! =)

6 готовых шрифтовых пар для сайтов

Просмотров:1 284



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

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

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

Первая шрифтовая пара: Roboto Slab и Neo Sans Pro

Roboto Slab круто смотрится в качестве заголовков или текста на картинках. Neo Sans Pro простой и читабельный шрифт, отлично подходит для набора основного текста.

На картинке: большой заголовок — Roboto Slab, Regular, 36 пт. H2 — Roboto Slab, Regular, 28 пт. H3 — Roboto Slab, Bold, 18 пт. Основной текст — Neo Sans Pro, Regular, 14 пт. Мелкие сноски, ссылки — Neo Sans Pro, Regular, 12 пт.

Второе сочетание: Garamond и Verdana

EB Garamond — зачемательный шрифт с засечками, он так хорош, что его почти не переделывают уже много лет. Adobe в 2005 году создал веб версию под названием Garamond Premier Pro.

На картинке: большой заголовок - EB Garamond, Regular, 48 пт. H2 — EB Garamond, Regular, 30 пт. H3 — EB Garamond,Regular , 20 пт. Основной текст — Verdana, Regular, 14 пт. Мелкие сноски, ссылки — Verdana, Regular, 12 пт.

Третье сочетание: Playfair Display и Fira Sans

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

На картинке: большой заголовок - Playfair Display, Regular, 36 пт. H2 — Playfair Display, Regular, 28 пт. H3 — Playfair Display,Regular , 20 пт. Основной текст — Fira Sans, Regular, 14 пт. Мелкие сноски, ссылки — Fira Sans, Regular, 12 пт.

Четвертое сочетание: Adobe Garamond Pro и Futura PT

Futura PT маленькие буквы, поэтому нужно использовать кегль побольше, вместо 14, лучше брать 17-18 пт. А для заголовков используется графичный Adobe Garamond Pro.

На картинке: большой заголовок- Adobe Garamond Pro, Regular, 48 пт. H2 — Adobe Garamond Pro, Regular, 34 пт. H3 — Adobe Garamond Pro,Regular , 26 пт. Основной текст — Futura PT, Regular, 17 пт. Мелкие сноски, ссылки — Futura PT, Regular, 14 пт.

Пятая шрифтовая пара: Philosopher и PT Sans

Для заголовков берем красивый шрифт Philosopher, но использовать его лучше только для больших заголовков таких как h1 или h2, а подзаголовки поменьше h3 и основной текст лучше набирать шрифтом без засечек PT Sans.

На картинке: большой заголовок — Philosopher, Regular, 42 пт. H2 — Philosopher, Regular, 34 пт. H3 — PT Sans, Regular,Regular , 24 пт. Основной текст — PT Sans, Regular, 16 пт. Мелкие сноски, ссылки — PT Sans, Regular, 14 пт.

Ещё одна классическая шрифтовая пара это PT Sans и PT Serif

Здесь интересное сочетание получается, когда PT Sans в заголовке, а PT Serif — набран основной текст.

На картинке: большой заголовок — PT Sans, Regular, 42 пт. H2 — PT Sans, Regular, 34 пт. H3 — PT Sans, Regular,Regular , 20 пт. Основной текст — PT Serif, Regular, 16 пт. Мелкие сноски, ссылки — PT Serif, Regular, 14 пт.




Вам понравилось?

>>> Почему надо подписаться на обновления? <<<

Буду благодарен за ретвит и клацанье по кнопочкам. Спасибо :)



 

Есть вопросы? Напишите в комментариях, всем отвечу :)

Как установить такие комментарии вконтакте себе на сайт?



4 комментария к “6 готовых шрифтовых пар для сайтов”

  1. Еще бы, как это вставить на сайт, а то пост для отдельной группы людей, которые знают, что и куда.

    [Ответить]

  2. Интересная подборка. Надо будет ещё раз заглянуть сюда, когда буду менять морально устаревший дизайн на своём блоге. Пока мне первый вариант понравился (в контексте тематики хайперсео)

    [Ответить]

    Sergio Reply:

    Да, Roboto Slab крут. Можно вместо Neo Sans Pro взять в качестве основного шрифта Open Sans, тоже круто смотрится связка.

    [Ответить]

  3. Теперь я знаю всё о ресторанах Москвы *IN LOVE*

    [Ответить]

Написать ответ


32 запросов. 0,158 секунд.