Helvetica renders as Arial on Windows OS

On my site, http://helvetitee.com, I have the following font stack:

Nimbus Sans (a web font) is pulled in from TypeKit.

On Windows machines, regardless of the browser, the user is shown Arial. It seems that Helvetica is rendered as Arial by Windows instead of falling back to Nimbus (which is an Helvetica clone and therefore preferable to Arial).

Is there a way, other than OS sniffing, to prevent this? Is it a known issue? It seems to be something of a liberty for Windows to just assume it’s OK to show Arial instead of Helvetica.

5 Answers 5

Windows substitutes Arial for Helvetica. (Specifically Helvetica; not Helvetica Neue.) A simple way to see this is to declare font-family: Helvetica, Courier . Browsers on Windows platforms then use Arial, not Courier (as they should).

This can be changed by editing Windows registry, but as a web author, you can’t do anything about it (apart from attempts at OS-sniffing via browser-sniffing). It is an old issue (dating back at least to Windows 3, I think), though not very widely known.

Windows doesn’t have any of those fonts, but is smart enough to default to their sans-serif font, which is arial.

a web-safe alternative would be something like font-family: «Helvetica Neue», Helvetica, Arial, sans-serif;

as for using a webfont, fonts.com has Helvetica Neue 45 Light that you could embed.

Yes, the Windows registry in its default configuration substitutes Arial for Helvetica, and this substitution takes precedence over the font-stack fallback in every major browser except Opera. So most Windows users will see Arial instead of Helvetica unless Helvetica is preceded in the font stack by

1. a web font, or
2. an alternative font that is reliably present on Windows systems. In my Helvetica-like font stack, I suggest Google’s «Arimo» web font. Among the standard Windows fonts, Microsoft Sans Serif is a good substitute for Helvetica for upright type, but intolerable for italic type.

As far as I know, Windows doesn’t ship with Helvetica (or any member of its family), and if it is not an installed font, it will not work on a website.

Arial is considered a blatant rip of Helvetica (though it was based on Monotype Grotesque, it is considered an alternative to Helvetica), so Microsoft doesn’t have to pay hefty license fees to Haas Typefoundry (creators and licensors of the Helvetica family)

My suggestion is to try webfonts, with which you can actually embed fonts. Font Squirrel is a good place to start. (though bear in mind that embedding Helvetica Neue without license is technically a violation..)

CSS: Is Helvetica the default ‘sans-serif’ font on Mac and Arial the default sans-serif font on Windows?

I have a lot of CSS that does the following:

It my understanding that Helvetica is the default sans-serif font on Mac and Arial is the default sans-serif font on Windows . if that’s the case, couldn’t I just change the above code to be:

6 Answers 6

The default font really depends on the browser. For example, in Firefox on Mac, I have Lucida Grande as the default sans-serif font. I don’t think I changed it, but I’m not entirely sure. You can’t really depend on the defaults being specific fonts, as users can change them in the preferences. If you want a specific font, specify it.

Helvetica on Windows XP looks horrible due to its poor rendering. Luckily, only a few people have Helvetica installed on Windows XP (because if they care about Helvetica, they’ll probably be using a Mac).

That way, pretty much only Mac OS X will pickup Helvetica Neue (standard on OS X) and Windows can ignore it and move straight into Arial.

With fonts, you want to be as specific as possible to prevent layout issues. Your page may look perfect on a machine with Arial as the default sans-serif font, but if someone has a very different font as their default, it can affect spacing of elements (if you use relative measures). Plus it makes any designer on the project angry when they see the wrong font, and you don’t want that.

What do you want to happen on platforms that have

• Helvetica or Arial installed and
• a default sans-serif font that is neither of those?

Or asked differently: do you always prefer Helvetica or Arial over the default, if they are installed? If you prefer the default sans-serif font in all cases, why mention those two at all?

Helvetica is sometimes the default sans on Mac, but to be honest it’s not a great screen font.

Geneva, Lucida Sans, and Trebuchet MS are good alternatives.

You can be pretty certain that Helvetica is installed on machines running Mac OS X, because that font is used in a number of official applications designed by Apple. Arial is also available on any machine, provided that the user hasn’t deleted the font file.

But as Tom points out, it’s better to be as specific as possible when defining font styles. When I want a sans-serif family displayed I usually have the following in my stylesheets:

Шрифты, общие для всех (актуальных) версий Windows, и их Mac-эквиваленты

Введение

В данном списке перечислены шрифты, общие для всех актуальных на данный момент операционных систем Windows (фактически начиная с Windows 98), и их эквиваленты в Mac OS. Такие шрифты иногда называют «безопасными шрифтами для браузеров» (browser safe fonts). Это небольшой справочник, которым я пользуюсь, когда делаю Web-страницы и думаю, что он будет полезен и Вам.

Если Вы новичок в web-дизайне, то может быть думаете что-нибудь типа: «Почему это я должен ограничиваться таким небольшим набором шрифтов? У меня есть огромная коллекция прекрасных шрифтов!» Дело в том, что браузер посетителя может отобразить только те шрифты, которые установлены в его операционной системе (прим. переводчика: в настоящее время уже есть возможность применять фактически любые шрифты при оформлении страниц используя CSS 3 и его новое свойство @font-face; правда, поддерживают эту функцию пока ещё далеко не все браузеры), а это означает, что каждый посетитель Вашей страницы должен быть обладателем выбранных Вами шрифтов. Поэтому Вы должны использовать только те шрифты, которые есть в каждой операционной системе. К счастью, в CSS есть свойство @font-family, облегчающее эту задачу.

Список

Значение @font-family	Windows	Mac	Семейство
Arial, Helvetica, sans-serif	Arial	Arial, Helvetica	sans-serif
«Arial Black», Gadget, sans-serif	Arial Black	Arial Black, Gadget	sans-serif
«Comic Sans MS», cursive	Comic Sans MS	Comic Sans MS 5	cursive
«Courier New», Courier, monospace	Courier New	Courier New, Courier 6	monospace
Georgia, serif	Georgia 1	Georgia	serif
Impact,Charcoal, sans-serif	Impact	Impact 5 , Charcoal 6	sans-serif
«Lucida Console», Monaco, monospace	Lucida Console	Monaco 5	monospace
«Lucida Sans Unicode», «Lucida Grande», sans-serif	Lucida Sans Unicode	Lucida Grande	sans-serif
«Palatino Linotype», «Book Antiqua», Palatino, serif	Palatino Linotype, Book Antiqua 3	Palatino 6	serif
Tahoma, Geneva, sans-serif	Tahoma	Geneva	sans-serif
«Times New Roman», Times, serif	Times New Roman	Times	serif
«Trebuchet MS», Helvetica, sans-serif	Trebuchet MS 1	Helvetica	sans-serif
Verdana, Geneva, sans-serif	Verdana	Verdana, Geneva	sans-serif
Symbol	Symbol 2	Symbol 2	—
Webdings	Webdings 2	Webdings 2	—
Wingdings, «Zapf Dingbats»	Wingdings 2	Zapf Dingbats 2	—
«MS Sans Serif», Geneva, sans-serif	MS Sans Serif 4	Geneva	sans-serif
«MS Serif», «New York», serif	MS Serif 4	New York 6	serif

1 Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE (да и вообще поставляются со многими приложениями от Microsoft), поэтому они установлены на многих компьютерах с ОС Windows 98.

Читайте также:  Сброс триала pycharm windows

2 Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings — в Safari).

3 Шрифт Book Antiqua практически идентичен Palatino Linotype; Palatino Linotype поставляется с Windows 2000/XP, а Book Antiqua — с Windows 98.

4 Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут плохо выглядеть с некоторыми размерами (они предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

5 Эти шрифты работают в Safari только в стандартном начертании, но не работают при выделении жирным или курсивом. Comic Sans MS также работает жирным, но не курсивом. Другие Mac-браузеры, кажется, нормально эмулируют отсутствующие у шрифтов свойства самостоятельно (спасибо Christian Fecteau за подсказку).

6 Эти шрифты установливаются в Mac только при Classic-инсталляции

Системные шрифты, подключение шрифтов к сайту

Шрифты — это неотъемлемая и очень важная часть дизайна сайта, подчеркивающая его индивидуальность. В статье пойдет речь о подключении стандартных шрифтов к веб странице, их еще называют системными, а в следующей статье подробно рассмотрим выбор и подключение шрифтов от Google Fonts к сайту WordPress.

Содержание статьи:

Системные, стандартные, безопасные шрифты

Любой браузер отображает только те шрифты, которые присутствуют в операционной системе компьютера. Поэтому их и называют системными и устанавливаются по умолчанию вместе с операционной системой.

А безопасными шрифтами их называют, потому что с большой вероятностью они отобразятся в браузере у большенства посетителей сайта.

Но вся проблема заключается в том, что в разных операционных системах устанавливаются разные наборы шрифтов. Посмотреть наборы поставляемых шрифтов вместе с операционной системой можно на официальных страницах Windows, Mac OS. А в Unix/Linux вообще нет стандартного набора.

Для того, чтобы интернет страничка отображалась в соответствии с задумкой дизайнера, в CSS установили свойство шрифтов, которое называется font-family

Свойство шрифтов font-family

Свойство font-family — семейства шрифтов, сгруппированные по определенным признакам.

Родовые семейства:

• serif — шрифты с засечками на концах;
• sans-serif — шрифты без засечек;
• cursive — шрифты курсивного начертания;
• fantasy — декоративные шрифты;
• monospace — моноширинный шрифт(с буквами одинаковой ширины).

Таким образом просто подбираются похожие шрифты из разных операционных систем и через запятую подключаются к интернет странице.

Вот как пример, просто для визуального восприятия. К этому примеру мы еще вернемся, когда будет рассматриваться непосредственно подключение шрифтов.

Просто проследите логику и все станет предельно ясно.

• OC Windows — Arial;
• OC Mac OS — Helvetica CY;
• OC Unix/Linux — Nimbus Sans L;
• Родовое семейство — sans-serif.

Так называемые безопасные шрифты

На основе OC Windows был составлен список из нескольких безопасных шрифтов.

1. Arial
2. Arial Black
3. Comic Sans MS
4. Courier New
5. Georgia
6. Impact
7. Times New Roman
8. Trebuchet MS
9. Verdana

Все эти шрифты установлены на Mac OS X, Windows, и у многих пользователей Unix/Linux, у которых установлен пакет Core fonts for the Web.

Для остальных пользователей предусмотрена таблица соответствия. В ней подобраны похожие шрифты, принадлежащие к определенному семейству.

Таблица соответствия и принадлежности шрифтов к определенному семейству:

Windows	Mac OS	Unix/Linux	Родовое семейство
Arial Black	Helvetica CY	Nimbus Sans L	Sans-serif
Arial	Helvetica CY	Nimbus Sans L	Sans-serif
Comic Sans MS	Monaco CY	* (см. ниже)	cursive
Courier New	* (см. ниже)	Nimbus Mono L	Monospace
Georgia	* (см. ниже)	Century Schoolbook L	Serif
Impact	Charcoal CY	* (см. ниже)	Sans-serif
Times New Roman	Times CY	Nimbus Roman No9 L	Serif
Trebuchet MS	Helvetica CY	* (см. ниже)	Sans-serif
Verdana	Geneva CY	DejaVu Sans	Sans-serif

* При подключении шрифтов, можете смело опираться на нее. Таблица поддерживает кириллические символы, русский алфавит.
Саму таблицу я взял в этой статье .

Подключение системных шрифтов к сайту

Подключить системные шрифты к сайту можно несколькими способами. Помимо этого можно подключать разные шрифты к разным параграфам. Применять различные шрифты к отдельным словам и словосочетаниям. Все это я сейчас постараюсь рассмотреть.
Итак, давайте все по порядку.

Подключение шрифтов в CSS файле

Если нужно подключить основной шрифт для всего документа, нужно всего навсего в таблицу стилей добавить такой код:

Назначаем шрифт для заголовков H1, H2, H3, H4, H5, H6, (здесь аналогично, только устанавливаем значение жирности, для выделения заголовков):

Присваиваем шрифт только параграфам:

Что-бы присвоить шрифт только к определенному параграфу, или блоку, нужно сначала в HTML документе назначить класс этому блоку

А в таблице CSS прописать следующий код:

Теперь, каждому тегу — элементу html с классом .font (называйте как вам угодно), будет присвоен шрифт Arial, с нормальной (400), жирностью и размером 16 пикселей.
Аналогично можно присвоить разные шрифты к спискам li , таблицам table , к целым блокам div , к отдельным словам, или словосочетаниям.

Подключение шрифтов в HTML документе

Непосредственно в HTML документ шрифты подключаются аналогично CSS файлу, разница лишь в синтаксисе. Можно подключит шрифты в заголовке документа — между тегами (аналогично CSS файлу) , либо inline — присвоение свойств напрямую к html тегам.

Подключаем шрифты в заголовке, между тегами . Для этого в html документ добавьте такой код:

Здесь я повторяться не буду. Все аналогично подключению в CSS файле.

Подключение шрифтов inline, непосредственно к элементам сайта. Приведу несколько примеров:

Подключаем шрифт к параграфу

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

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

Аналогично назначаем шрифты любому html тегу.

Но все же лучше всего и рекомендовано присваивать стили элементам через файл CSS. Во-первых, в CSS нужно прописать стили один лишь раз и потом назначать в HTML лишь нужный класс. Во-вторых, прописывая стили inline создаются дубли контента. Эти свойства и классы, вроде как, индексируются поисковиками и слышал, что в W3C хотят вообще отменить inline. Хотя иногда так прописывать стили проще.

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

Лучший способ отблагодарить автора

Похожие по Тегам статьи

В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…

Мне не раз приходилось наблюдать такую картину, что в некоторых шаблонах WordPress не задан…