Как выбрать шрифт для Web-сайта
Выбор шрифтов — ответственный момент. Конечно выбором шрифта для элементов дизайна сайта, должен заниматься дизайнер, но выбор шрифта для контента обязательно должен согласовывать с верстальщиком.
Немного терминологии:
- Вообще понятие шрифта я так и буду называть шрифтом.
- Font-family, т.е. название шрифта я буду называть фонтом.
Начнём с Photoshop’а
В Adobe Photoshop в настройке шрифтов есть опция Anti-aliasing (Сглаживание). Среди элементов дизайна часто попадаются графические надписи, что весьма логично. Но если надписи планируется вставлять в web-страницу как текст, а не как картинку, то следует отключать Anti-aliasing. По-умолчанию, в Windows сглаживание шрифтов включено и установлена опция Standart. Если размер шрифта больше 18px (у некоторых шрифтов от 17px), например, это могут быть заголовки, то Anti-aliasing можно в photoshop’е включить. Рекомендую ставить Sharp — это сглаживание, больше всего похоже на стандартное сглаживание в OS.
В браузерах Safari и Internet Explorer 7, сглаживание шрифтов работает по умолчанию, причём для всех шрифтов и маленьких и больших. Во всех остальных браузерах, как я уже сказал сглаживание шрифта начинается с размера 17-18px. Значит у большинства браузеров мелкий текст будет отображаться без сглаживания.
В данном примере, в разработке макета сайта, нам нужно использовать левый заголовок и правый текстовой блок.
Выбор шрифта
Выбор зависит от следующих факторов:
- гарнитура (засечки)
- высота строчных букв
- расстояние между буквами
- ширина букв
- неперфорированное расстояние (внутри буквы)
С засечками всё понятно, они предназначены для распечатки текста и хороши для чтения с бумаги. Поэтому первый пункт можно отбросить.
Пример со шрифтом Trebuchet MS.
Логично, что чем более оптимально соотношение перечисленных параметров, тем читабельней текст.
Теперь посмотрим на основные шрифты используемые в Web-дизайне:
Что из этого мы можем увидеть?
- Tahoma очень компактный шрифт с буквами средней ширины, хорош для каких-то технических вещей.
- Шрифт Verdana очень подходит для текста и имеет хорошую читаемость за счёт ширины букв и расстояния между буквами.
- Arial имеет свои преимущества в читабельности за счёт высоты букв, но минус, за счёт излишней компактности.
- Trebuchet MS отличный шрифт, отличающийся хорошо сбалансированными параметрами. (моя рекомендация)
- Bitstream Vera Sans я добавил лишь для того чтобы вы посмотрели на кошмар выдаваемый этим шрифтом, а он является основным Linux шрифтом. Lucida Sans — основной Mac шрифт, тоже не блещет аккуратностью. Но беспокоиться не о чем, поскольку в MacOS и во всех современных Unix и Linux дистрибутивах anti-aliasing включён по-умолчанию, что весьма улучшает вид шрифта. Но всё равно не нужно забывать о соответствии: Bitstream Vera Sans больше похож на Verdana и Trebuchet MS, А Lucida Sans — на Arial. Не забудьте прописать это в CSS до sans-serif.
- Не добавил Helvetica — идентичный Arial шрифт в MacOS, с некоторыми нюансами. Просто его у меня нет.
Стандартные и наиболее оптимальные размеры шрифта для отображения текста на web-сайтах — 11-16, в зависимости от фонта. Если текст написанный Verdana или Tahoma, с размером 11px читать ещё удобно, то Arial уже рябит в глазах. Всё зависит от восприятия. Чтобы выбрать правильно шрифт, напишите текст всеми возможными шрифтами и сравните чисто визуально, поиграйтесь размерами и расстояниями между букв и слов (чтобы там Лебедев не говорил).
Хочу так же отметить шрифты:
- Calibri — MS Office шрифт, очень красивый на мой взгляд, но предназначенный для отображения с ClearType сглаживанием, и не очень мелким размером
- Chianti WGL4 BT, Corbel (anti-aliased), Zurich WGL4 BT — приятно читается когда сглажен и размер от 14 px
- Encyclopaedia (anti-aliased) — отличный шрифт, если сглажен, то похож на Trebuchet MS только пошире и расстояния между буквами побольше
- Franklin Gothic Medium 13px очень похож на Arial 12px — можно использовать как альтернативу
- Hunky Sans (anti-aliased) — отличный и читаемый шрифт со сглаживанием
- MS Reference Sans Serif — немного обработанный шрифт Verdana
- MS Sans Serif — тоже не плохой шрифт, что-то среднее между Arial и Verdana
- PragmaticaCTT — похож на Trebuchet MS с некоторыми коллизиями.
- Segoe UI (anti-aliased) — стандартный Vista шрифт, не идеал, но можно использовать (только сглаженный)
- Vanta Light (anti-aliased) — отличнейший шрифт. Очень хорошо читается даже в маленьком размере.
Так же уделите внимание высоте строки. Зачастую “стена” текста менее читабельна нежели слегка увеличенное расстояние между строками.
]]>Сергей Третьяк]]>Спасибо! Я как сердцем чувствовал, что Trebuchet MS отличный шрифт.
»]]>Number One]]>отличная статья!
»]]>ch__]]>Фраза “Во всех остальных браузерах, как я уже сказал сглаживание шрифта начинается с размера 17-18px” в целом некорректна, т. к. сглаживание шрифта в браузерах на базе Gecko (семейство Firefox) зависит от операционной системы, и под Linux работает для всех без исключения размеров шрифта.
»Семейство Bitstream (которое в настоящее время называется DejaVu) выглядит так страшно без сглаживания, ибо про хинтинг в принципе не знает — под Linux этот самый хинтинг фактически не используется. По той же причине страшненько смотрятся под *никсами шрифты, утыренные из Vista — они разработаны для определенной среды отрисовки, и без майкрософтовского рендерера красоты толком не разглядишь, страх один.
Вывод — пишем font-family: sans-serif и видим в глазах пользователя радость и счастье…
]]>Никита]]>ch__, Ну как это некоректна, я же уточнил — Windows, Standart anti-aliasing. Про Linux и Mac я упомянул позже.
Вывод не точный. Сначала нужно написать все шрифты более менее похожие друг на друга в разных OS и только потом sans-serif.
»]]>Денис Радченко]]>Спасибо за статью, буду применять эти мысли на деле.
»]]>Алексей]]>Все-таки, относительно разрядки символов доверюсь Лебедеву
А по поводу остального выражаю благодарность автору.
»]]>Артём Курапов]]>Спасибо, поменял у себя шрифты.
»]]>Никита]]>Алексей, понятно, что не нужно разряжать буквы у сбалансированого шрифта. Но попробуйте у Arial шрифта добавить разрядку 1px. Заметите, что такой текст гораздо читабельней, но надо будет ещё добавить растояние между словами, пару px.
Артём Курапов, заметно приятней читать стало ))
»]]>zigmat]]>Лично для меня Лебедев не пример! Просто во время сумел сказать определённую (как всегда гадость) привлёкшую внимание общественности. От лебедева можно только г***а набраться по уши. А вот уже сотрудники этой студии, другое дело…
»]]>Никита]]>zigmat, давай не будет обсуждать личную симпатию/антипатию к Тёме. Я поддерживаю его высказывание относительно разрядки, но только в ряде случаев. Если это шрифт с засечками, то ни в коем случае нельзя разряжать строчные буквы. Если без засечек — зависит от ширины букв.
»]]>Максим Покровский]]>Хотел сам про это написать, но ты успел раньше
В тему упомяну, что Tahoma bold 9px и 10px меняется не кегль, а только высота строки, а Arial bold меньше 10px, меняет не жирность, а ширину кегля. Проиллюстрировал для наглядности. (не сочти за пиар)
P.S.
»Красиво статью оформил +5
]]>Dimox]]>Trebuchet MS – мой любимый шрифт!
»]]>Seleckis.lv :: журнал Никиты Селецкого » » Как выбрать шрифт для Web-сайта 2: serif и monotype]]>[...] соглашусь на половину. Шрифты без засечек прекрасно удобно использовать в качестве шрифта для основного текста, ссылок и всего [...]
»]]>Webreview]]>У вас для основного текста статьи использован-то шрифт с засечками – и я считаю, что это плюс: читать удобнее, чем сглаженные шрифты.
Моё мнение: без засечек – для оформительских элементов, имиджевых фраз и т.д.
Шрифты с засечками – для того, материала, который стоит читать
ЗЫ – подумываю над шрифтами своего сайта, статья пришлась кстати
»]]>Никита]]>Webreview, я не могу похвастаться идеальным примерм. В любом случае, всё индивидуально.
»]]>selfhack]]>не знаю, что вы нашли в этих засечках, выглядят жутко, даже на CRT “21 при 1280х960
»]]>Azs]]>Дочитал до «Значит у большенства браузеров», дальше не стал, ибо правильно «большИнства», а ежели, пардон, автор не знает правил орфографии, чему он может научить?
»]]>Никита]]>Azs, каюсь. У меня с «большинством» извечные проблемы. Наверное, отталкиваюсь от слова «большевик».
Вообще от меня правилам орфографии научиться нельзя (за этим обращайтесь на http://gramota.ru), но пополнить навыки web-дизайна и программирования — можно.
»]]>grossu]]>Среди шрифтов, что вы перечислили внизу, есть интересные. Calibri, Segoe UI. Но причем здесь веб-типографика. Вы же понимаете у сколь малой доли установлены эти шрифты, для правильного рендеринга страниц.
»]]>Никита]]>grossu, те что я перечислил, это просто на заметку. Конечно, это не
web-овские шрифты, но web-дизайнерам пригодятся.
Просто меня удивляет, почему такие хорошие шрифты не популярны. И ещё удивляет, почему до сих пор браузеры не поддерживают отображение шрифтов интегрированных с помощью css. Так бы всё упростило.
»]]>hellveen]]>Спасибо за хорошую статью.
»Мне тоже очень нравится Calibri, такой приятный шрифт, один с моих любимых
]]>lenta]]>Спасибо за полезные наблюдения!
»Мне кажется, в примере с “Good font” в первой строке что-то с размерностями не то: ширина “d” – 4, внутренняя ширина “n” – 5, кернинг между “G” и “o” – 3, высота до горизонтального штриха в “t” – 2… Оптически все как-то совсем иначе. Наверное, я чего-то недопонимаю.
]]>Serguei]]>lenta, в примере с Good font автор имел в виду не численные значения, а пункты списка факторов, от которых зависит выбор шрифта, расположенного чуть выше.
»]]>manro]]>Гарнитура — это не засечки, а совокупность начертаний шрифта (обычный – курсив – полужирный – капитель – … )
»]]>Никита]]>manro, гарнитура включает в себя и наличие/отсутствие засечек. Я просто обобщил.
»]]>manro]]>(поспешил с отправкой)… объединенная общим стилем. Напр., в выходных данных книги: “Гарнитура Таймс”. См., напр., http://www.mgraphics.ru/show_a.....;aid=542#7
»]]>manro]]>Наличие/отсутствие засечек — это семейство и т. п. Не путайте термины
.
»]]>Tocka]]>Толково. Единственный минус (кроме орфографии
) – примеры текста нужно было давать русские, раз уж текст на русскую аудиторию рассчитан. К сожалению, русский вариант Требучета и Тахомы гораздо менее симпатичен и Вердана на их фоне выглядит гораздо лучше, чем в английском.
»]]>Seleckis.lv :: журнал Никиты Селецкого » » Дизайн текста 1: Основной текст, заголовки, таблицы.]]>[...] сайта. К слову, рекомендую почитать следующие статьи: Как выбрать шрифт для Web-сайта и Как выбрать шрифт для Web-сайта 2: serif и [...]
»]]>Андрей]]>А распространённость шрифтов учитывать не стоит?
Единственная известная мне статистика: http://www.codestyle.org/css/f.....Full.shtml
»]]>Никита]]>Статья не о распрастранённости шрифтов, а о выборе наилучшего шрифта.
»Основываясь на статью можно выбирать шрифты из самых распрастранённых.
]]>Юлька]]>спасибо, пошла менять на свем сайте на Trebuchet MS, оказалось что он мне намного больше нравиться чем verdana
»]]>Сергей Коваль]]>В firefox сглаживание включается как-то при помощи about:config или нужно пересобирать браузер?
»]]>Никита]]>Сергей Коваль, сглаживание в firefox не включается. Либо это на совести операционной системы, либо в Windows XP используйте браузеры IE7 или Safari.
»]]>Марк]]>Никита, это действительно на совести ОС в вашем случае.
»В Windows XP используйте Fedora LiveCD
]]>Anonymous]]>[...] Archive
»]]>Хулио]]>… Всё толково, только хотелось-бы, конечно, в примерах текстов и шрифтов видеть русифицированные шрифты и набранный кириллицей текст. Было-бы значительно актуальней.
»]]>Выбор шрифта / font для сайта или блога | SEO]]>[...] http://seleckis.lv/journal/shr.....-web-sayta Запись опубликована в рубрике Wordpress 3.0.1, Установка WordPress. Добавьте в закладки постоянную ссылку. ← Выбор темы (шаблона) для WordPress 3. [...]
»