12 вариантов сочетаний шрифтов, которые можно использовать на своих сайтах
Вторник, 3 июня 2008
Меня крайне напрягает та ситуация, которая сейчас почему-то сложилась среди веб-дизайнеров в Рунете. Сплошь и рядом наблюдаю картину, что разработка дизайн-макета сводится лишь к работе над его графической частью, а шрифтовому оформлению сайтов уделяется минимум времени и внимания — в основном, используется то, что уже было сделано в прошлых проектах, только меняются размеры и цвет.
Да и то подход часто слишком прост — если в заголовке использован шрифт с засечками, то контент-текст идет без засечек, и наоборот. Весь набор же используемых шрифтов сводится в основном к 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-исходники находятся там же, достаточно просмотреть код страницы.
Выделите свои сайты из толпы!
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:
- подпишитесь на обновления по RSS
- получайте новые статьи на E-mail
- добавьте в Twitter: 12 вариантов сочетаний шрифтов, которые можно использовать на своих сайтах
- добавьте статью в закладки:
* * *
Интересно смотреть, насколько набор латиницей выглядит гармоничнее кириллического.
Кстати, еще можно попробовать font-variant: small-caps для небольших заголовков.
Гармоничнее выглядят из-за того, что изначально все эти шрифты разрабатывались как латиница, а уже позже были «адаптированы» под нас :) Вообще, если интересна эта тема, советую почитать про эволюцию кириллических букв на eldesign.ru.
small-caps'ом можно «оживить» надоевшие шрифты, но тут уже стоит отталкиваться от общего дизайна сайта.
О, интересно, почитаю. Спасибо.
О!!! То, что надо. На самом деле, многие дизайнеры ограничиваются верданой, говоря, что она и была разработана специально для веба. Белый лист с красивыми шрифтами и ярко-выраженными заголовками и подзаголовками, имхо, тоже разновидность дизайн в целом, а не только веб-дизайна. В буржунете таких примеров тыщи и даже завидно, как без всяких 3Д-прибамбасов удается так просто и лаконично создать прекрасные работы.
[...] если запастись временем, терпением, поэкспериментировать со шрифтами и фоновыми изображениями, то текст на страницах будет [...]
Среди примеров больше нравится так как у Вас сделано — простенько но со вкусом. Буквицы уже лет пять не использовал, давно забыл что такое — но такие буквицы как на этом блоге — с одной стороны выглядят современно, с другой стороны не позволяют забывать о готическом прошлом буквицы.
Автор — лох. Извините.
За сочетание шрифтов с засечками и без засечек в вебе бьют канделябром.
И хоть бла-бла, хоть не бла-бла-бла, но шрифт без засечек лучше читается в вебе, а с засечками лучше на бумаге. Хоть осмысливай, хоть не осмысливай, хоть об стену убейся. Это — факт, а факты — упрямая вещь.
Извинения не принимаются.
Удачи вам в том вебе, где вас за сочетания шрифтов с засечками и без «бьют канделябром». Если начинаете свой комментарий с оскорблений, то подкрепите его, хотя бы, «упрямыми фактами». Приведите, для разнообразия, доказательства, чем Arial (Tahoma, Verdana, …) читается лучше Georgia в кегле 14-16 px.
Пока что, вы просто тролль.
Ты такой же лошара, потому что в полиграфии издавна существует правило — шрифты с насечками используются для основного текста, а без насечек в заголовках. Почему? Потому что шрифты с насечками легче воспринимаются и читаются в большом объеме текста. Веб и бумага тут совершенно не при чем. Не хрен умничать. Сейчас сушествует бардак в использовании шрифтов, потому что много таких лошар, как ты.