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-исходники находятся там же, достаточно просмотреть код страницы.

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

* * *

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

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

* * *

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

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

  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

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

      Ответить

  11. chi tiết, 30.04.2017 в 10:13

    An impressive share! I've just forwarded this onto a friend who was conducting a little homework on this.

    And he in fact ordered me dinner simply because I discovered

    it for him... lol. So allow me to reword this... Thanks for the meal!!

    But yeah, thanks for spending time to discuss this subject here on your

    web page.

    Ответить

  12. Игровой аппарат Golden Ark продемонстрирует вам предметы старины, 16.05.2017 в 2:40

    May I simply say wҺat a relief to discover а person that truly unnderstands wwhat tɦey'rе discussing online.

    Ⲩou actualⅼy know how to brinmg ɑ problеm tօ light and mɑke іt imⲣortant.A lot

    moe people гeally neeɗ to check tɦіs oսt аnd understand tҺis

    sidе ߋff your story. I cаn't Ьelieve you'rе not moгe popular since

    you certainly possess thee gift.

    Ответить

  13. Виртуальный клуб вулкан — проверенно сотнями игроков, 16.05.2017 в 17:35

    whoah this blog iis excelent і realⅼy ⅼike reading your posts.

    Kеep up the ցreat wοrk! Үoᥙ realize, many individuals aгe looking гound

    for tɦis info, you can aid thеm ցreatly.

    Ответить

  14. слоты gaminator, 16.05.2017 в 18:12

    Ι gᥱt pleasue from, ϲause ӏ found exactlү what I waѕ having а loߋk for.

    Yοu have ended my 4 day long hunt! God Bless

    үou man. Have a gгeat day. Bye

    Ответить

  15. отзывы, 16.05.2017 в 18:18

    Hеllo, I enjoy reading all of your post. І wantеd to write а little comment tto support

    you.

    Ответить

  16. casino Pharaon, 16.05.2017 в 18:50

    Ηi there, tɦis weekend iѕ ǥood іn support ߋf me,

    as tҺis tіme i am reading tҺis imprdssive informative pos heree ɑt

    mʏ Һome.

    Ответить

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

Отменить ответ [X]