Делаем свой шрифт для web разработки. Подводные камни на ранних этапах

Жирный текст

Жирный текст

Больше обычного

Меньше обычного

Курсив

Курсив

С подчеркиванием

Зачеркнутый

Возможности атрибута style

Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html . Одним из них является применение универсального атрибута style . С помощью значений его свойств можно задавать стиль отображения шрифтов:

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

Синтаксис написания:

font-family: имя шрифта [, имя шрифта[, ...]]

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Размер шрифта можно также задать:

• В пикселях;
• В абсолютном значении (xx-small, x-small, small, medium, large );
• В процентах;
• В пунктах (pt ).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt

font-style: normal | italic | oblique | inherit

Значения:

• normal –нормальное написание;
• italic – курсив;
• oblique – шрифт с наклоном вправо;
• inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique

font-variant: normal | small-caps | inherit

Пример того, как изменить шрифт в html этим свойством:

font-variant:inherit

font-variant:normal

font-variant:small-caps

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения:

• bold – устанавливает полужирный шрифт html;
• bolder – жирнее относительно normal;
• lighter –менее насыщенное относительно normal;
• normal – нормальное написание;
• 100-900 – задается толщина шрифта в числовом эквиваленте.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

Свойство font и цвет шрифта html

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :

font: font-size font-family | inherit

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

• caption – для кнопок;
• icon – для иконок;
• menu – меню;
• message-box –для диалоговых окон;
• small-caption – для небольших элементов управления;
• status-bar – шрифт строки состояния.

Давненько ничего не писал, ну да ладно.
В данный момент занимаюсь web разработкой и встал вопрос о красивом меню. С анимацией, но без JS или Flash. Конечно, всё это делается силами CSS3, и в придачу не будем использовать картинки. Совсем.

Запускаем, видим окно

Открываем "Текст > Редактор шрифтов SVG...", появится справа панелька

Нажимаем на font 1, меняем на имя своего шрифта, например MySomeFont, правее поле *Гарнитура* очищаем.

Теперь открываем вкладочку *Глифы* всё на нашей панельке *Редактор шрифтов SVG*. Как мы видим, для нас уже добавили глифы английской раскладки. Можете все удалить, если мешаются, правой кнопкой мыши на них кликая. Так же можно редактирова имя глифа ну и символ, который он отождествляет

Займёмся добавкой самих картинок.

Импортируем "Файл > Импортировать..." (Ctrl+I) изображение, которое мы хотим включить в шрифт. Если это растровая грифика, после добавления нужно выполнить "Контур > Векторизовать растр" (Alt + Shift + B). Лично я в опциях не ковырялся, просто жмякаем на *OK* и создаётся уже векторное изображение.

Растровое удаляем (Выделяем и нажимаем клавишу Delete) - внизу в строке при выделении объекта пишется, какой он - растровый (Изображение) или векторный (Контур).

Далее растягиваем контур на рабочую область (в верхней панельке есть области ввода - x: 0, y: 0; Ш: 1000 и В: 1000). Оставляю контур выделенным, следуем в нашу любимую панельку *Редактор шрифтов SVG* во вкладочку *Глифы*. Теперь выделяем тот глиф, который мы хотим связать с нашим контуром. Пускай это будет глиф с символом *a*. Затем просто щёлкаем на кнопку *Получить кривые из выделения*. Чтобы проверить, всё ли мы правильно сделали, просто вводим добавленый символ в нижерасположенное поле *Текст* и должно отобразиться наше изображение. После проверки контур можно сдвинуть за рабочую область или удалить, он больше не нужен.

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

В общем добавили мы все контуры к нашим символам. Теперь надо подредактировать сам XML файл немножко. Открываем *Редактор XML* (Shift+Ctrl+X) - кнопочка есть на главной панели - четвёртая справа. И нам нужно изменить атрибут *id* у пункта *

@font-face {
font-family: "MySomeFont";
src: url("fonts/font.svg") format("svg");
}

Ну в общем в общем и всё.

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

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

1. Начните с брифа

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

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

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

2. Фундаментальный выбор

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

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

3. Подводные камни на ранних этапах

Есть несколько подводных камней:

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

4. Используйте свои руки

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

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

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

5. С каких символов начать

Создание сначала определенных символов может помочь вам задать стиль своего шрифта. Ну а потом эти символы будут использоваться как направляющие. Обычно “контрольные символы”, как их называют, в латинице – это n и o, а заглавные – H и O. Зачастую используется слово adhension, которое поможет протестировать базовые пропорции шрифта (но, некоторые пишут это слово как adhencion, потому что буква s может быть очень коварной).

6. Переносим шрифт на компьютер

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

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

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

7. Выбор программы

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

Отличная программа – FontLab Studio, но новый софт, такой как Glyphs и Robofont набирают все большую популярность. Эти программы недешевые, но у Glyghs есть “мини” версия в Mac App Store с некоторыми отсутствующими функциями, что не очень хорошо, потому что эти функции важны новичкам.

8. Использование программ

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

9. Слова

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

Одна из самых популярных программ для дизайна шрифтов. Доступна на Windows и Мас.

Программа доступна на Windows, имеет интуитивный интерфейс и отлично подходит новичкам.

Еще один мощный редактор шрифта от FontLab, позволяющий создавать новые шрифты или изменять существующие. Доступен на Windows и Мас.

Эта программа работает на Windows, Mac, Unix/Linux и переведена на множество языков. Также позволяет создавать новые шрифты и редактировать имеющиеся.

OpenType редактор шрифтов, доступен на Windows и Mac OS X. Довольно простой и содержит достаточное количество функций.

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

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

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

Бесплатный и довольно сильный редактор шрифтов. Отлично подходит начинающим и тем, кто не хочет тратить деньги на покупку программ.

Это приложение доступно на iPad и Windows 8. Позволяет создавать шрифт из наброска и редактировать существующие шрифты.

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

Бесплатный онлайн-инструмент, позволяющий создавать TTF и OTF шрифты на основе рукописного текста.

Есть бесплатная и премиум-версия. Программа работает на Windows, Linux, Mac OS X и BSD.

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

Компьютерный шрифт. Для формирования изображений букв текста на дисплее, принтере и других устройствах используются компьютерные шрифты. Компьютерный шрифт - это программа (написанная на специальном языке разметки шрифта), которая может быть использована во всех приложениях Windows / Mac OS.

Гарнитура шрифта - это комплект шрифтов, имеющих общие стилевые признаки (схожий рисунок), но отличающихся начертанием (жирный, обычный, курсив и т.д.). Например «Arial», «Arial Italic», «Arial Bold» - это шрифты гарнитуры «Arial».

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

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

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

В зависимости от ширины символов, шрифты бывают:
моноширинные – все символы одинаковой ширины. Устаревший шрифт.

пропорциональные – символы могут быть разной ширины. Например, буква «W» занимает гораздо больше места, чем буква «I». Такой текст более аккуратен, лучше читается. Пропорциональный шрифт является основным для отображения текстов, то есть используется всегда (за редким исключением).

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

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

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

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

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

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

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

Размер шрифта зависит от настроек операционной системы пользователя и разрешения экрана.

Не все операционные системы содержат одинаковые системные шрифты.

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

1. Стандартные шрифты , содержащиеся в установочных пакетах операционных систем, офисных и Интернет приложениях.

2. Произвольные шрифты , которые пользователь устанавливает в зависимости от собственных потребностей и предпочтений. Важно! Могут отсутствовать у значительной группы пользователей!

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

Точкой отсчета для определения «безопасности» шрифта служит, конечно же, операционная система Windows, так как является наиболее распространенной. Основываясь на шрифтах Windows (которые присутствуют и в других операционных системах) можно представить следующий список «безопасных» web-шрифтов:
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Все эти шрифты можно смело использовать при создании web-сайта: вероятность их поддержки любой из операционных систем близка к 100%.