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

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

Просмотров:715



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

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

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

Первая шрифтовая пара: 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 пт.




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

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

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



 

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

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



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

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

    [Ответить]

    Sergio Reply:

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

    [Ответить]

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

    [Ответить]

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


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