Компьютерные шрифты

 

 

 

Виды компьютерных шрифтов

 

Существует несколько способов описания и хранения цифровых шрифтов; для нас наиболее интересными являются растровый и контурный.

 

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

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

Растровые шрифты используются для воспроизведения текстовых элементов интерфейса Windows.

 

Большими возможностями обладают контурные шрифты (их иногда не совсем точно называют векторными).

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

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

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

 

 

 

 

Группы компьютерных шрифтов

 

Сейчас для пользователей компьютеров актуальнее простая схема, предложенная фирмой Microsoft.

Эта схема включает следующие группы:

  • Roman - разноширинные шрифты с засечками (засечки, или серифы, - небольшие декоративные штрихи, завершающие основные вертикальные и горизонтальные штрихи), например Times или Garamond;

  • Swiss - разноширинные рубленые (т. е. не имеющие засечек) шрифты типа Arial;

  • Modern - брусковые (неконтрастные) и моноширинные шрифты с засечками, например Lucida Console;

  • имитирующие машинопись, скажем Courier;

  • Script - имитирующие рукописный стиль,

  • Decorative - различные виды акцидентных шрифтов, например.

25.08.2020 TietoEVRY опубликовала шрифт The Polite Type (.ttf). Оскорбительные английские слова выражения, символы шрифт на экране заменяет на нейтральные словосочетания или представляет в виде заретушированной картинки. В открытый доступ выложены исходный код скрипта и текущий словарь лигатур (файл discrimination.xlsx), с помощью которого происходит замена символов в тексте. На сайте thepolitetype.com в онлайн-режиме можно проверить как работает шрифт, просто введя слова или фразы в специальную форму.

 

 

 

Форматы шрифтов

 

Формат PostScript - мощный язык описания страниц, стандарт в современной полиграфии и компьютерной графике. Контуры объектов, в том числе шрифтов, в PostScript описываются с помощью кривых Безье третьего порядка Использование PostScript требовало значительных лицензионных отчислений фирме Adobe, поэтому в 1991 г. фирмы Apple и Microsoft совместно создали спецификацию TrueType.

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

 

 

 

 

Популярные шрифты

 

Times New Roman

Та́ймс Нью Роман (англ.  — засечковый шрифт, созданный типографом Стэнли Морисоном и художником Виктором Лэрдентом (1932), чтобы повысить удобочитаемость и сэкономить больше пространства.

С 1 февраля 2004 года все дипломатические документы в США печатаются шрифтом Times New Roman 14-го кегля вместо шрифта Courier New 12-го кегля.

Arial

Ариал — компьютерный шрифт класса нео-гротеск, без засечек. Создан в 1982 Робином Николасом и Патрицией Сандерс. Первоначально Ариал был известен как Sonoran Sans Serif, а своё нынешнее название получил вскоре после начала использования в Microsoft Windows.

Verdana

 

Вердана  — шрифт, созданный в 1996 Мэтью Картером (Matthew Carter) для компании Microsoft. Входит во все версии Microsoft Windows, Microsoft Office. Не имеет засечек (серифов), а буквы увеличены за счёт уменьшения межстрочного интервала, поэтому она хорошо читается и при маленьком размере (кегле). Это обстоятельство привело к большому распространению шрифта на Веб-страницах. Некрасиво выглядит на распечатках. Предполагает такой порядок записи комбинируемых символов: <диакритический знак><буква> Таким образом, тексты, оформленные согласно стандарту Юникода (<буква><диакритический знак>), отображаются в шрифте Verdana неправильно.

 

Calibri

 

Кэлибри  — компьютерный шрифт (2005). Дизайнер  - Лукас де Гроот (Lucas de Groot). Поставляется вместе с Microsoft Windows Vista, в Microsoft Office 2007 заменил Times New Roman и Arial  в качестве шрифта по умолчанию.

 

 

 

Verdana бережет глаза

 

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

Гарнитура «Verdana» - самый благоприятный для глаз шрифт, а идеальный и самый удобный его размер — это 10-12 кегль.

Джим Шиди (Jim Sheedy, автор исследования, профессор оптометрии): Если размер текста в три раза меньше, чем ваш пороговый размер, то вам придется напрягаться, чтобы прочитать некий шрифт. В свою очередь, нужно наклониться, чтобы получить четкий результат, что также влияет на ваше тело по причине постоянной неудобной позы.

Computer Vision Syndrome (CVS, синдром компьютерного зрения) » –  выражается такими симптомами, как временная близорукость, нарушение работы глазных мышц, снижение чувствительности зрения, жжение в глазах, боли в области глаз и лба. По оценкам офтальмологов, ему подвержено от 60 до 90% пользователей компьютеров.

***

Чему рад kmp? Тому, что подтвердился его личный давний эмпирический выбор в пользу для экранного чтения. В kmp-Пособии использован «Verdana» с кеглем 11 пт.

 

 

 

Контрастность и читаемость

 

 

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

В 2008 году Web Accessibility Initiative создало рекомендации для веб-разработчиков введя общепризнанное соотношение для создания легко читаемых веб-страниц.

Для передачи контраста традиционно используют цифровую модель.

Если текст и фон веб-сайта имеют один и тот же цвет, соотношение составляет 1:1. Для получения черного текста на белом фоне (или наоборот), соотношение должно быть 21:1.

 

Web Accessibility Initiative установила 4,5:1 - как минимально приемлемое значение контрастности, а  7:1 -комфортное для читателей со слабым зрением.

Но:

  • Apple использует уровень контрастности 5,5:1.

  • Google рекомендуя 54% прозрачность для шрифтов, использует уровень контрастности в 4,6:1.

  • Решения Apple и Google задают стандарты дизайна в сети.

Почему?

  • Дизайнеры ссылаются на Типографический Справочник, руководство для веб-дизайна, который предостерегает от слишком большого контраста и рекомендует использовать темно-серый (#333) вместо основного черного цвета (#000), т.к. черный текст на белом фоне может напрягать глаза. А более мягкий оттенок черного текста делает страницу более удобной для чтения. Адам Шварц, автор книги «Магия CSS», подтверждает этот аргумент. Но это заключение носит субъективный характер.

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

Ян Сторм Тейлор в Совете по дизайну: Никогда не используйте черный:

  • Чистый черный – скорее понятие, чем цвет. Мы видим темные вещи и предполагаем, что они являются черными. На самом же деле найти что-нибудь, что действительно чисто черное, очень сложно. Дороги не черные. Ваш офисный стул не черный. Боковая панель в Sparrow не черная. Слова на веб-страницах не черные

То, что вы видите на экране зависит от множества факторов:

  • какой браузер вы используете,

  • на каком устройстве

  • с каким дисплеем,

  • условия освещения,

  • ваше зрение.

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

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

 

 

 

 

Web Safe Fonts

 

Браузер не  применит к тексту  шрифт если  этот шрифт не установлен на компьютере читателя.

Шрифты, которые можно безопасно  (более-менее) использовать в Web:

  • Arial

  • Verdana

  • Times New Roman

  • Georgia

  • Trebuchet MS

  • Palatino Linotype

  • Tahoma

  • Impact

  • Century Gothic

  • Arial Black

CSS (Cascading Style Sheets) позволяет указывать сразу несколько шрифтов, разделенных запятой, что в свою очередь позволяет браузеру использовать альтернативный, указанный вами шрифт вместо отсутствующего в системе основного.

 

Полезные ресурсы для использования шрифтов в Сети:

 

 

 

 

Гарнитурные конструкторы

 

Для изысканного шрифтового оформления web-документов поможет гарнитурный конструктор webfonts.fonts.com, который гарантирует установку любого из 8000 нестандартных шрифтов (в т.ч. 40 кириллических), и часть из них бесплатно (если у сайта 25 тыс. просмотров в месяц).

 

 

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

Подробности в ролике webfonts.flv в каталоге kmp-media

Другие гарнитурные конструкторы:

  • Google Font Directory. Бесплатный, 4 кириллических шрифта.

  • Webtype. $10 в год для сайтов с 30 000 просмотров в месяц.

 

 

 

 

Вариативные шрифты

 

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

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

С OpenType вариативным файлом шрифта, вы можете сгенерировать множество разных вариации шрифта причем любой градации (granular, например weight = 100 или 101 и так далее).

 

 

 

 

Технологии (модели) внедрения нестандартных шрифтов в сайты

 

Картинка со шрифтом

Самый действенный и неудобный способ (приходится постоянно делать новые картинки, да и на лету).

MS WEFT

MS WEFT (Web Embedding Font Tool)  преобразует шрифт, который вы хотите встроить в свой специальный формат - OpenType. Шрифт этого формата имеет расширение EOT и может работать только на вашем веб-сайте (это для того, чтобы шрифты не воровали, т.к. они также являются предметом авторского права).

  • Находим WEFT 3.2 (9М) здесь

  • Инсталлируем WEFT 3.2.

  • При помощи CSS указываем название файла, из которого грузим шрифт

Поддерживается в основном только Internet Explorer. Лучше про нее забыть.

SIFR

Самая лучшая на сегодняшний день.

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

  • Находим SIFR  здесь

  • Инсталлируем.

  • Открываем sifr.fla в редакторе от Adobe Flash и все настраиваем (инструкция здесь)

 

 

 

Управление шрифтами

 

Windows поддерживает два формата шрифтов - растровый (FON), используемый в основном для вывода текста на принтер, и TrueType (TTF).

 

Windows по умолчанию размещает шрифты в папке Fonts каталога Windows.

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

 

Для установки шрифта необходимо в папке Fonts в меню Файл выбрать команду Установить новый шрифт и выбрать нужный шрифт.

Шрифты можно либо скопировать в папку Windows\Fonts, либо загружать из той, в которой они находятся.

Дополнительным средством Windows для просмотра шрифтов является программа Таблица символов (Пуск/Программы/Стандартные/Служебные/Таблица символов)

 

 

Она позволяет отобразить все используемые символы.

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

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

Кроме того, программа Таблица символов показывает комбинацию клавиш, необходимую для ввода того или иного символа.

 

 

 

 

 

Chartwell — шрифт-диаграмма

 

07.04.2011 Chartwell (http://tktype.com/chartwell.php) — набор OpenType шрифтов, позволяющих в интерактивном режиме создавать аккуратную инфографику.

Вы набираете необходимые числа, а диаграммы рисуются сами. Доступно три начертания: Pies, Bars, Lines. Диаграмму можно раскрасить по собственному вкусу — цвет числа определяет цвет соответствующей ему части диаграммы. Шрифт в работе:

Chartwell - шрифт коммерческий (стоит $15).

Вся инфографика в Chartwell реализована через лигатуры. Для использования необходима программа, поддерживающая лигатуры (Adobe Photoshop, Illustrator, Indesign).

Лигатура — это знак, образованный слиянием двух или более графем, например: Æ. Иногда возможен переход лигатуры в свой символ, как это произошло с предлогом «at», который сейчас отображается символом «@».

Из основных браузеров лигатуры поддерживает только FireFox 4.