Шрифт для сайта

Тип-1 является более старым форматом и относится ко временам, когда Adobe, где находится новаторский DTP с PostScript и векторными шрифтами. В то время Type 1 и Type 3 были единственными форматами, понятными PostScript-принтерам, и только Type 1 мог включать в себя подсказки, необходимые для того, чтобы шрифты выглядели хорошо, а формат был коммерческим секретом.

Таким образом, Adobe отменила другие шрифтовые литейные формы на не намеченные шрифты, используя формат Type 3.

TrueType был изобретен Microsoft как способ (а) прервать монополию Adobe по намеченным форматам шрифтов, (б) избежать использования формата, связанного с Macintosh и PostScript в Windows. Внутри TrueType используются квадратичные кривые, а не кубические безье, что делает их более быстрыми для рендеринга на экране и на более дешевых принтерах, не поддерживающих PostScript, используемых в системах Windows. TrueType также имеет лучшую поддержку Unicode и других вещей, изобретенных с момента создания Type 1. Современные Mac поддерживают TrueType, а также.

Новый формат OpenType объединяет TrueType и Type 1 (векторные данные разрешены в квадратичной или кубической форме, поэтому вы можете напрямую преобразовать один из старых форматов в OpenType). OpenType также поддерживает фэнтезийные автоматические лигатуры и замещение глифов, что приятно в английском тексте и жизненно важно для текста с использованием арабских или индийских скриптов.

ответ дан pdc 17 сент. '08 в 16:59

источникподелиться


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

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

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

Подбор шрифтов не будет длинным путём проб и ошибок, если есть под рукой готовые инструменты.

7 бесплатных инструментов

1) Google Fonts

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

Из списка доступных шрифтов выберите нужный вам, наведите на область предпросмотра шрифта и нажмите на  See Specimen.

Откроется детальная страница, где можно увидеть, как выглядит текст с этим шрифтом, поменять цвет фона страницы, выбрав инструмент «заливка»  в правом верхнем углу страницы, посмотреть историю создания и применения шрифта.

Внизу страницы находится раздел «Популярные сочетания со шрифтом Х»

2) Type.io

Эта база шрифтов ведется дизайнерами-экспертами и позволяет увидеть трендовые сочетания шрифтов с реальных веб-сайтов. Еще можно заглянуть в код СSS, используемый для их стилизации и форматирования. Потратьте некоторое время на просмотр их впечатляющих архивов и классифицированных списков, и если наткнетесь на сайт который вас зацепит, просто нажмите на «Get Under the Hood».

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

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

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

3) Web font Blender

Web font Blender — минималистичный инструмент быстрого, интуитивного подбора шрифтов. Устроенный как большинство редакторских программ, этот сервис позволяет смешивать и комбинировать разные веб-шрифты, изменять шрифт основного текста, заголовков и настраивать стилизацию шрифта по вашему вкусу.

На ваш выбор большое количество популярных шрифтов и их настроек для подбора оптимального сочетания. Как только вы его нашли, вы можете скопировать CSS-код своего творения, нажав кнопку «Grab Code».

4) Fonts in use

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


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

5) Canva Font Combinations

Простой инструмент от Canva позволяет выбрать шрифт и мгновенно подобрать для него подходящую пару.

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

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

6) Font Combinator

Font Combinator – инструмент типографии созданный голландской дизайн-студией Typotheque. Если вы ищете инструмент предварительного просмотра сочетания шрифтов со множеством вариантов настроек и кастомизации, больше не ищите.

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

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

7) Font Pair

Хейден Миллз, студент дизайнерского факультета университета Индианы, разработал этот инструмент для быстрого и безболезненного подбора проверенных сочетаний шрифтов, используя Google Fonts.

Каждое сочетание шрифтов, представленное на Font Pair, курируется самим Миллзом. Хотите проверить как будет выглядеть ваш собственный текст? Кликните на любой представленной паре шрифтов и введите свой контент.

Запись опубликована автором ArtisMedia в рубрике Без рубрики с метками веб-дизайн, веб-шрифты.

✑ Безопасные WEB-шрифты

Аналоги дефолтных шрифтов на Windows и Mac

Живой пример отрисовки в вашем браузере
Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS5, cursive
Courier New, Courier New, Courier6, monospace
Georgia1, Georgia, serif
Impact, Impact5, Charcoal6, sans-serif
Lucida Console, Monaco5, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua3, Palatino6, serif
Tahoma, Geneva, sans-serif
Times New Roman, Times, serif
Trebuchet MS1, Helvetica, sans-serif
Verdana, Verdana, Geneva, sans-serif
Symbol, Symbol (Symbol2, Symbol2)
Webdings, Webdings (Webdings2, Webdings2)
Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2)
MS Sans Serif4, Geneva, sans-serif
MS Serif4, New York6, serif

 

Обозначения:

  1. Georgia и Trebuchet MS поставляются с Windows 2000/XP и включены в сборку шрифтов для IE (и в некоторые другие инсталляции приложений разработанных компанией Microsoft)
  2. Символические шрифты корректно отображаются только в Internet Explorer, в других браузерах используются подстановки (хотя шрифт Symbol работает в Opera, а шрифт Webdings работает в Safari)
  3. Шрифт Book Antiqua практически идентичен Palatino Linotype, Palatino Linotype которые включены в Windows 2000/XP, шрифт Book Antiqua использовался в Windows 98
  4. Это не TrueType а битовые шрифты, именно поэтому при увеличении размера размера шрифта качество его отображение будет падать (стандартные размер таких шрифтов: 8, 10, 12, 14, 18 и 24 точки, разрешение — 96 точек на дюйм)
  5. Шрифты работают в Safari, но только при использовании стиля отображения normal. Comic Sans MS может отображаться как bold (жирный), но не как italic. Другие Mac браузеры будут эмулировать стили отображения
  6. Шрифты присутствуют только в Mac OS X.

Примеры

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: Arial, Helvetica, sans-serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: ‘Arial Black’, Gadget, sans-serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: ‘Bookman Old Style’, serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: ‘Comic Sans MS’, cursive;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: Courier, monospace;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: ‘Courier New’, Courier, monospace;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: Garamond, serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: Georgia, serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: Impact, Charcoal, sans-serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: ‘Lucida Console’, Monaco, monospace;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: ‘MS Sans Serif’, Geneva, sans-serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: ‘MS Serif’, ‘New York’, sans-serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: Symbol, sans-serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: Tahoma, Geneva, sans-serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: ‘Times New Roman’, Times, serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: ‘Trebuchet MS’, Helvetica, sans-serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: Verdana, Geneva, sans-serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: Webdings, sans-serif;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
АБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧЪЫЬЭЮЯ
абвгдеёжзиклмнопрстуфхцчъыьэюя
0123456789

font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

Шрифты в веб-дизайне

В этой статье кратко расскажем о специфике шрифтов в веб-дизайне.

На одном и том же сайте могут использоваться самые разные шрифты — все зависит от концепции и тематики сайта, а также от того, какие задачи поставил перед сайтом вебмастер. Однако целесообразно использовать лишь ограниченный набор шрифтов. Это позволит пользователям лучше воспринимать сайт и информацию на нем.

Теперь кратко расскажем о том, в каких единицах измеряются шрифты. Общепринятая единица измерения — это пункт. Именно в пунктах шрифты измеряются в программе Word. Также существует такая единица измерения, как пика (одна пика равна 12 пунктам). В качестве сравнительного примера можно сказать, что 6 пик — это примерно 1 дюйм (2 с лишним сантиметра).

Что касается веб-шрифтов, то здесь обычно используют систему, в которой шрифты имеют 7 основных размеров (они задаются в формате HTML). Шрифт первого размера равняется 8 пунктам, второго — 10 пунктам, третьего — 12 пунктам, четвертого — 14, пятого — 18, шестого — 24, седьмого — 36. Шрифт большего размера нельзя задать при помощи HTML. Также здесь нельзя задать какие-то другие шрифты, отличные от 8, 10, 12, 14, 18, 24 и 36 пунктов. Однако это можно сделать при помощи CSS. Там можно очень точно задать размер шрифта в пунктах или в процентах (в зависимости от того, что вам нужно).

Все шрифты можно разделить на две большие группы — это шрифты без засечек и с засечками. Рассмотрим кратко каждую из них.

1. Шрифты с засечками. У шрифтов, относящихся к данной группе, на краях букв имеются засечки или «хвостики», благодаря чему текст выглядит более замысловато и оригинально. К таким шрифтам можно отнести Century, Times, Garamond и некоторые другие (гарнитура Serif).

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

Сюда можно отнести Ariel, Verdana, Helvetica и другие (гарнитура Sans-Serif).

В печатной продукции чаще всего используются шрифты с засечками. Это объясняется специфическими особенностями восприятия печатного текста (его удобнее читать). В интернет-пространстве предпочтение отдается шрифтам без засечек. Связано это с тем, что на экране компьютера удобнее читать именно округлые и простые буквы.

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

CSS: Стандартные (безопасные) шрифты

В интернете исторически сложилось такое понятие как «безопасные» Web-шрифты. Безопасным шрифтом можно назвать такой шрифт, который поддерживается операционной системой пользователя с очень высокой степенью вероятности. Поскольку о таком положении дел остаётся только мечтать, то абсолютно безопасных шрифтов не существует!

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространённой операционной системы — Windows, которые кроме того используются в других ОС:

Шрифты с засечками — serif

font-family Пример
Georgia, serif

Это заголовок

Это абзац

«Palatino Linotype», «Book Antiqua», Palatino, serif

Это заголовок

Это абзац

«Times New Roman», Times, serif

Это заголовок

Это абзац

Шрифты без засечек — Sans-Serif

font-family Пример
Arial, Helvetica, sans-serif

Это заголовок

Это абзац

«Arial Black», Gadget, sans-serif

Это заголовок

Это абзац

«Comic Sans MS», cursive, sans-serif

Это заголовок

Это абзац

Impact, Charcoal, sans-serif

Это заголовок

Это абзац

«Lucida Sans Unicode», «Lucida Grande», sans-serif

Это заголовок

Это абзац

Tahoma, Geneva, sans-serif

Это заголовок

Это абзац

«Trebuchet MS», Helvetica, sans-serif

Это заголовок

Это абзац

Verdana, Geneva, sans-serif

Это заголовок

Это абзац

Моноширинные шрифты — Monospace

font-family Пример
«Courier New», Courier, monospace

Это заголовок

Это абзац

«Lucida Console», Monaco, monospace

Это заголовок

Это абзац

Добавить комментарий

Закрыть меню