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

У меня действительно есть два вопроса:

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

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

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

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

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

Ответ 1

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

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

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

Неа.

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

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

Ответ 2

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

"Типизация существует, чтобы почтить контент".
"Выберите лица, соответствующие задаче, а также тему.

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

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

Кроме того, проверьте матрицу шрифтов (1,5 года) и эти хорошо продуманные font-stacks.

Ответ 3

1) Какие шрифтовые грани предпочтительны для веб-сайта? Сейчас мне очень нравится "Segoe UI", но он доступен только на новейшие системы Windows, такие как Vista и 2008 Server. Поэтому я определил sequence: font-family: 'Segoe UI', Тахома, Ариал, Гельветика, Сан-Сериф; Мне не очень нравится внешний вид из них, за исключением "Segoe UI". Любые предложения о том, какой хороший шрифт может быть используется в дополнение к этому? Я также пробовал "Trebuchet MS", он отлично смотрится на документов, но не на странице.

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

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

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

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

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

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

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

Ответ 4

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

Neilson сделал исследование и нашел Вердану или Arial, чтобы быть оптимальным выбором с точки зрения удобочитаемости.

Ответ 5

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

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

Ответ 6

Просто лично мне нравятся Verdana и Georgia, хотя они только Mac/Windows - "безопасны". В вашем случае, возможно, лучше всего выбрать шрифт второго выбора, который имеет те же показатели, что и ваш первый выбор.

Ответ 7

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

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