Все о выборе правильного шрифта для сайта

Question

У меня сейчас два вопроса:

1) Какие шрифты лица предпочтительнее для веб-сайта? Сейчас мне действительно нравится «Segoe UI», но он доступен только на новейших системах Windows, таких как Vista и 2008 Server. Итак, я определил последовательность:

font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif;

Мне не очень нравится внешний вид всех них, кроме «Segoe UI». Любые предложения о том, какой красивый шрифт может быть использован в дополнение к этому? Я также попробовал 'Trebuchet MS', он отлично смотрится на документах, но не совсем на странице.

2) Любой способ указать с помощью CSS разные размеры шрифтов для каждой конкретной семьи шрифтов? Например, «Segoe UI - 9px», Tahoma - 8px и т. Д. Это, вероятно, невозможно, но, возможно, есть некоторые хитрости?

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

Answer 1

1) Какие шрифтовые грани предпочтительнее для сайта?

См. Эту страницу относительно безопасных веб-шрифтов .

2) Любой способ указать разные размеры шрифта для каждого конкретного семейства шрифтов через CSS?

Нет.

Вскоре @font-face будет поддерживаться всеми основными браузерами, и вы сможете использовать любой шрифт на своем сайте.

До этого взгляните на Cufón или sIFR .

Answer 2

Используйте правильный шрифт для вашего сайта. Это не так просто, как сказать «это лучший шрифт для сайтов». Вот две цитаты (прочитайте принципы) из Роберта Брингхерста "Элементы типографского стиля" :

• «Типография существует в честь контента.»
• «Выбирайте лица, которые подходят как для задачи, так и для предмета.»

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

Что касается вашего второго пункта, Фил Ой недавно выпустил FontUnstack , плагин jQuery, который сообщит вам, какой шрифт используется для данного элемента. Элементу будет присвоен класс (т. Е. "set_in_gill_sans"), с помощью которого вы сможете применять определенные стили для разных гарнитур.

Кроме того, ознакомьтесь с матрицей шрифтов (1,5 года) и этими хорошо продуманными шрифтами .

Answer 3

1) Какие шрифтовые грани предпочтительнее для веб-сайта? Щас мне очень нравится «Segoe UI», но он доступен только на новейшие системы Windows, такие как Vista и Сервер 2008. Итак, я определил последовательность: font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif; Мне не очень нравится внешний вид всех из них, кроме «Segoe UI». любой предложения о том, какой красивый шрифт может быть используется в дополнение к этому? Я тоже пробовал «Требушет М.С.», это выглядит великолепно на документы, но не на странице.

Какие лица шрифта предпочтительнее? Это сложный вопрос. Существует три основные вычислительные платформы, каждая из которых имеет свой набор базовых шрифтов. Затем некоторые программы, такие как Adobe Creative Suite, пакет Microsoft Office или даже такое простое программное обеспечение, как программа просмотра Powerpoint 2007 для XP, устанавливают для пользователя шрифты. В Интернете есть множество диаграмм, в которых перечислены часто используемых шрифтов .

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

Просто будьте осторожны с этим объявлением Segoe UI: если у пользователя Windows XP этот шрифт, он, вероятно, не будет разборчивым с отключенным сглаживанием.

Для заголовков вы можете использовать пользовательские методы, такие как sIFR и Cufon, чтобы заменить текст не системными шрифтами.

Небольшое примечание по размеру: большинство сайтов имеют тенденцию устанавливать действительно маленький размер шрифта. 13 пикселей - это минимум для длинных текстов (см. относительная читаемость ). Шрифт с маленькой высотой x, такой как Times, следует использовать только для заголовков или в достаточно большом размере (например, 15+ пикселей).

2) Любой способ указать с помощью CSS разные размеры шрифта для каждого конкретный шрифт-фамилий? Как 'Segoe UI - 9px ', Tahoma - 8px и т. Д. Это возможно не возможно, но может быть какие уловки?

Нет, это невозможно. Вы можете делать предположения о браузере и ОС, которые запускаются через Javascript, и, таким образом, делать предположения о шрифтах, которые они установили, но это довольно трудоемкая работа для сравнительно небольшого выигрыша. Я бы посоветовал против этого.

Answer 4

Re. Ваш выбор шрифта, я бы посчитал, что удобство использования является ключевым требованием (если только вы не собираетесь использовать специально разработанный формат).

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

Answer 5

Большинство основных браузеров уже поддерживают @font-face, поэтому вы можете использовать любой открытый шрифт .
Google Web Fonts содержит несколько бесплатных шрифтов на выбор:

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

Answer 6

Лично мне нравятся Вердана и Джорджия, хотя они только для Mac / Windows - «безопасны». В вашем случае, возможно, лучше выбрать шрифт второго выбора, который имеет те же показатели, что и ваш первый выбор.

Answer 7

CSS3 будет изначально поддерживать загружаемые шрифты (вам не нужно будет загружать, они будут работать на лету), так что вы сможете использовать любой шрифт, какой захотите. Нам просто нужно подождать, но так как он будет доступен только в Firefox 3.5 и Opera 10.

Вы также можете использовать классические шрифты, такие как: Arial / Helvetica, Verdana, Georgia или даже Times Roman для отличного визуального воздействия. Вам просто нужно найти правильный размер шрифта и контрастировать с другими элементами на странице.