12 вариантов сочетаний шрифтов, которые можно использовать на своих сайтах

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

Да и то подход часто слишком прост — если в заголовке использован шрифт с засечками, то контент-текст идет без засечек, и наоборот. Весь набор же используемых шрифтов сводится в основном к 6 гарнитурам — Arial, Tahoma, Verdana, Times New Roman, изредка Georgia и Courier (почти всегда для оформления примеров кода).

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

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

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

Причем я не стараюсь ограничивать свой выбор только списком гарнитур из safe list'a (список шрифтов, являющихся стандартными в большинстве операционных систем), а рассматриваю наилучшие варианты для каждого отдельного случая, учитывая тип ОС среднего пользователя.

Все это позволяет создавать довольно неплохие варианты сочетаний для заголовков, подзаголовков и основного текста, которые в свою очередь задаются при помощи CSS-свойства font-family (и не забываю экспериментировать с font-weight, font-style, letter-spacing и еще много чем другим).

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

Выделите свои сайты из толпы!

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 13

  1. Дима, 01.07.2008 в 20:26

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

    Кстати, еще можно попробовать font-variant: small-caps для небольших заголовков.

    Ответить

  2. rotor, 01.07.2008 в 20:43

    Гармоничнее выглядят из-за того, что изначально все эти шрифты разрабатывались как латиница, а уже позже были «адаптированы» под нас :) Вообще, если интересна эта тема, советую почитать про эволюцию кириллических букв на eldesign.ru.

    small-caps'ом можно «оживить» надоевшие шрифты, но тут уже стоит отталкиваться от общего дизайна сайта.

    Ответить

  3. Дима, 02.07.2008 в 13:29

    О, интересно, почитаю. Спасибо.

    Ответить

  4. Sonic17, 19.11.2008 в 12:57

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

    Ответить

  5. Забытые возможности :first-letter | rotorweb.ru | Проблемы и решения в Web-дизайне, 17.02.2009 в 13:10

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

    Ответить

  6. finner, 08.03.2009 в 19:01

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

    Ответить

  7. Моркоу, 04.12.2009 в 0:09

    Автор — лох. Извините.

    За сочетание шрифтов с засечками и без засечек в вебе бьют канделябром.

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

    Ответить

    • rotor, 04.12.2009 в 14:40

      Извинения не принимаются.

      Удачи вам в том вебе, где вас за сочетания шрифтов с засечками и без «бьют канделябром». Если начинаете свой комментарий с оскорблений, то подкрепите его, хотя бы, «упрямыми фактами». Приведите, для разнообразия, доказательства, чем Arial (Tahoma, Verdana, …) читается лучше Georgia в кегле 14-16 px.

      Пока что, вы просто тролль.

      Ответить

    • Олег, 11.03.2010 в 17:42

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

      Ответить

  8. Slava, 09.04.2011 в 16:26

    Убери буквицу из-под текста, смотрится ужасно.

    Ответить

  9. @ Егор, 20.03.2012 в 10:10

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

    Ответить

  10. @ html-верстальщик, 26.01.2017 в 11:02

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

    Ответить

    • @ html-верстальщик, 26.01.2017 в 11:05

      Забыл указать, что здесь вы как раз таки показали пример — за что отдельное большое спасибо!

      Ответить

Есть что сказать?