Делаем свой шрифт для web разработки. Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html
Всем привет! Сегодня в рамках рубрики о веб-дизайне хочу рассказать, о шрифтах которые следует использовать при разработке web сайта.
Как правило, не все задумываются о том, какие следует использовать шрифты для контентной части сайта. Подбор красивых шрифтов для сайта является наиважнейшей частью разработки дизайна. Так как от этой части зависит читаемость информации сайта, а это, как известно самое главное на сайте. По этой причине к этому вопросу стоит отнестись весьма серьезно.
Но использовать в дизайне сайта можно только те шрифты, которые есть у будущих посетителей сайта. Это делается для того чтобы страницы отображались корректно у Всех пользователей, с разными операционными системами и браузерами. В противном случае если использовать не стандартные шрифты, то большинство посетителей увидит все по-разному и в большинстве случаев в неприглядном виде. По этой причине рекомендуется использовать стандартные шрифты, которые приведены ниже в списке. В список шрифтов входят шрифты, которые установлены на операционной системе Windows XP и выше.
В данной статье я не рассматриваю шрифты из других операционных систем. Опытный верстальщик, должен знать сопоставление шрифтов в различных операционных системах, и во время верстки он пропишет этот момент в css-стилях.
В основном разрабатывая контентную часть дизайна используются две разновидности шрифтов:
- шрифты с засечками
- рубленые шрифты (шрифты без засечек)
Шрифты с засечками — (англ. serif - засечка) шрифты начертание которых начинается и заканчивается штрихами. Например Times New Roman.
Шрифты без засечек (рубленые шрифты) — (англ.sans-serif -без засечки) шрифты со строгими ровными линиями без засечек. Например Arial.
Ниже Вы можете увидеть скриншот шрифтов с засечкой и без.
Шрифты для web дизайна:
- Arial
- Arial Black
- Arial Narrow
- Book Antiqua
- Century Gothic
- Comic Sans MS
- Courier New
- Franklin Gothic Medium
- Georgia
- Impact
- Lucida Console
- Lucida Sans Unicode
- Microsoft Sans Serif
- Palatino Linotype
- Sylfaen
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
- Webdings (различные символы и знаки)
- Wingdings (различные символы и знаки)
Также хочется заметить такой момент как отсутствие курсива у ряда шрифтов, вместо курсива в них используется наклон, из-за чего текст становится плохо читабельным.
Из стандартных шрифтов в Windows не имеют курсива:
- Arial Black
- Comic Sans MS
- Franklin Gothic Medium
- Impact
- Lucida Console
- Lucida Sans Unicode
- Microsoft Sans Serif
- Sylfaen
- Tahoma
Раз уж заикнулся о шрифтах, которые не имеют курсива то за одно хочется отметить и тот факт, что есть шрифты, которые изначально являются шрифтами с жирным начертанием. По этим причинам применение стилей указывающих на жирный шрифт нет смысла, так как в результате мы получим не то, что нужно.
В этой статье-уроке я расскажу вам как создать свой собственный шрифт для веб-сайта, используя собственноручно созданные иконки. Все, что нам для этого понадобится - программа для создания векторной графики(Adobe Illustrator или Inkspcape) и доступ в интернет!Итак, приступим! Все использованные изображения, иконки и css шрифт этого вы сможете скачать в конце статьи.
Для этого урока мы сделаем что-то простое. Для первой иконки мы нарисуем обычную звездочку. Для второй иконки - орла с буквой W внутри. Нарисовать это достаточно легко и вы можете создать любые формы и комбинации. Я использовал иллюстратор для этих целей.
После того, как вы закончили творческую часть - ваше творение необходимо сохранить в SVG формате. Жмем “Сохранить Как” и выбираем тип файла как SVG. Теперь можно переходить непосредственно к созданию шрифта.
Для этих целей мы используем популярный и бесплатный сервис IcoMoon.
Первое, что нужно сделать - создать новый проект, поэтому кликаем на меню в левом верхнем углу и нажимаем “New Project”. Далее подгружаем наши готовые svg файлы после нажатия на кнопку “Import Icons”. Проделав эти шаги вы должны видеть у себя на мониторе изображение такого рода:
Теперь у нас есть возможность изменения кода для каждой иконки (в нашем случаем это будет e600 и e601), названия нашего шрифта, префикса для CSS и так далее. Все это осуществляется в “Preferences”. Также, мы можем посмотреть шрифт в действии, нажам на ссылку “Enable Quick Usage” - что позволит получить временную ссылку на наш шрифт, а также опцию просмотра кода в CodePen.
После того, как вы все настроили - нажимаем кнопку “Download” внизу страницы и скачиваем архив. В этом архивы вы найдете ваш шрифт в форматах ttf, eot, svg и woff + демо-страничку со шрифтом.
Использование иконок на сайте
Теперь, все что нам нужно - это подключить шрифт CSS при помощи @font-face, и указать другие параметры (они все прописаны в css-файле в архиве, который вы скачали.
@font-face { font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , { font-family: "wdm-eagle"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wdm-star:before { content: "\e600"; } .wdm-eagle:before { content: "\e601"; }
Теперь мы можем использовать наш шрифт в HTML коде следующим образом:
Указав название класса для тэга мы получаем нашу иконку.
Давненько ничего не писал, ну да ладно.
В данный момент занимаюсь 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* у пункта * Ну в общем в общем и всё. Существует огромное количество способов для того, чтобы найти подходящий шрифт для вашего сайта. Например, можно воспользоваться сервисами с огромными библиотеками шрифтов, которые предполагают платную подписку. Если же ваш бюджет ограничен или вы экспериментируете с небольшим проектом, вы можете воспользоваться бесплатными веб-шрифтами, находящимися в свободном доступе. Поиск подходящего веб-шрифта для сайта может занимать огромное количество времени, поэтому мы предлагаем вам подборку лучших среди них. По мере своего развития, типографика уходит от старинных урбанистических постеров и знаков. Создатель этого шрифта попыталась сохранить красотку типографики городских постеров, увиденных ею на улицах в Буэнос-Айресе. Abril Fatface является частью большого семейства шрифтов, которая представлена 18 стилями, созданными для различных целей. Этот шрифт отличается сильным, элегантным присутствием, что делает его прекрасным решением для создания бросающихся в глаза заголовков. Чаще всего его комбинируют с Lato, Open Sans и Droid Sans. Учитывая значительную x-высоту и небольшие подстрочные элементы литер, Playfair Display также подходит для написания заголовка, особенно если место для него ограничено. Он хорошо сочетается с Georgia и часто используется с Oswald, Lato и Arvo. Используемый сегодня во многих блогах, GT Walsheim является представителем геометрических гротесков и входит в семейство Grilli Type. За полный набор шрифтов нужно платить, но Grilli Type предлагает бесплатную пробную версию GT Walsheim. Если читабельность на экране является приоритетом вашего проекта, воспользуйтесь Merriweather, который был создан для этой цели. К тому же, этот шрифт постоянно дорабатывается. Josefin Sans создавался согласно канонам винтажного шведского дизайна и отличается элегантной геометрической эстетикой. Gravitas One создан на основе “UK fat face” – жирного рекламного шрифта, появившегося во время индустриальной революции в Англии. Этот шрифт прекрасно выглядит в среднем и большом масштабе и подходит для заголовков, названий и вкладок. Литеры этого шрифта повторяют формы письма Кая-ли. В нем также содержатся глифы кириллицы и греческого алфавита. Он доступен в светлом, нормальном, среднем и полужирном начертаниях. Изначально спроектированный Морисом Бентоном (Morris Fuller Benton) для American Type Founders Company в 1903 году, League Gothic нашел себе новое применение после апдейта и добавления новых глифов. Fjord – это шрифт с засечками, изначально созданный для печатных книг и особенно подходящий для размещения длинных текстов в небольшом печатном формате. Его можно применять для создания большого объема текстового контента на сайте, так как шрифт отличается четкой структурой, заметными засечками и длинными элегантными верхними и нижними выносными элементами. Семейство шрифтов Amaranth отличается ненаклонным курсивным дизайном с небольшим контрастом и заметными изгибами. Все три стиля Amaranth хорошо сочетаются с практически любым другим шрифтом. С этим шрифтом можно поиграть – экспериментируйте и выбирайте лучшее. Этот среднеконтрастный шрифт был изначально создан для туземного языка Wayuunaiki, для которого необходимы широкие глифы. Он отличается маленькими выносными элементами и большой x-высотой, что делает его особенно полезным в небольших размерах. Этот шрифт создавался как мульти-лингвистический, включающий в себя латинские и греческие литеры, а также кириллицу и продвинутую поддержку в версии Gentium Plus. Gentium Basic и Gentium Book Basic доступны в бесплатной веб-версии, но ограничены только латинским алфавитом. Open Sans является представителем гуманистических гротесков. Этот шрифт отличается высокой степенью разборчивости и адаптирован как для веб-, так и для мобильных интерфейсов. Это ненаклонный шрифт с простым начертанием литер, для которого характерен нейтральный, но достаточно приятный вид, что позволяет использовать его в разных целях. Это мультифункциональный шрифт с большой x-высотой, сильным цветовым контрастом, четко очерченными засечками, что вносит свой вклад в читабельность текста. Этот шрифт хорошо выглядит как в печатном виде, так и на экране с низким разрешением. Этот бесплатный веб-шрифт является представителем гротесков. Низкая контрастность и большая x-высота позволяют Signika хорошо отображаться на экране. Широкий выбор значков включает в себя символы, пиктограммы и стрелочки. Созданный согласно канонам геометрического шрифта, характерного для 30-х годов прошлого века, с добавлением скандинавских черт, шрифт Josefin Slab обладает характеристиками брускового шрифта и напоминает шрифт печатной машинки. Интересно, что его х-высота составляет половину от высоты прописной буквы. Как и предполагает название, это шрифт Roman, который хорош для заголовков в caps lock, но также подходит и для отображения текстов. Элегантные пропорции этого шрифта напоминают классическую архитектуру с ее полукруглыми арками, горизонтальными карнизами и вертикальными колоннами. Названный в честь одного из самых известных городов Майя, Tikal Sans обладает чертами глифов, которые использовались в письме южноамериканской цивилизации. Его создатель выбрал большую x-высоту, что придало шрифту современный вид и оказало благотворное влияние на его разборчивость, а большой выбор видов начертаний позволяет применять его для различных целей. Подходящий в равной степени как для печатной, так и для веб-версии, этот геометрический брусковый шрифт доступен в Roman, Italic, Roman Bold и Bold Italic. Небольшая контрастность Arvo повышает его читабельность на экране. Bevan был создан на основе традиционного брускового шрифта 30-х. Буквы были отцифрованы, им придали новую форму и оптимизировали для веб-версии. Это один из немногих сверхжирных шрифтов, которые подходят для сайтов. Old Standard TT был создан на основе шрифта с засечками Modern, который был популярен в конце 19-начале 20 веков, а затем забыт на долгое время. Этот шрифт подходит для придания стиля особому виду контента, например, научным исследованиям или текстам на греческом или кириллице. Идеально подходящий для новостных веб-сайтов и блогов, этот шрифт с засечками обладает также чертами брускового шрифта, но его сбалансированность и низкоконтрастность делают Kreon значительно более персонализированным. Droid Sans был оптимизирован для максимальной читабельности даже в небольших интерфейсах – например, меню на экранах мобильных телефонов. Это нейтральный ненаклонный шрифт с простыми открытыми очертаниями литер. Создатель этого шрифта вдохновился классической итальянской каллиграфией, поэтому шрифт будет очень полезен для проектов, где необходимо добавить элегантности. Italiana также подходит для написания новостных заголовков как в печатном, так и электронном виде. Этот детально разработанный, многофункциональный шрифт с засечками очень популярен. Его четкость и основательность выражают уверенность и энергию, что делает шрифт одинаково эффективным как в больших размерах для заголовков и названий, так и для значительных объемов текста в более мелком формате. Этот шрифт отличается особенно большой x-высотой, что требует достаточно много пространства. Для Actor также характерно старомодное начертание некоторых символов, например, цифр 6 и 9. Уходящий корнями в 16 век, гуманистический шрифт Garamond стал настоящей иконой типографики, неоднократно послужившей основой для создания современных шрифтов, включая шрифт EB Garamond. Гротеск Ubuntu был создан для того, чтобы персонализировать веб-текст как на десктопах, так и мобильных устройствах. Пользователям предлагается экспериментировать с этим шрифтом, модифицировать и улучшать его по своему усмотрению. Rosario является классическим гуманистическим гротеском, который прекрасно подойдет для стилизации абзацев текста. Roboto Slab является одним из шрифтов семейства Roboto. Брусковая версия особенно привлекает взгляд своими геометрическими формами и открытыми изгибами. Он одинаково хорошо подходит для экранов гаджетов и печатных версий текстов. Шрифт является переработанной версией классического гротеска Alternate Gothic. Oswald был недавно обновлен, теперь он представлен в различных начертаниях, содержит расширенный набор символов и отличается более удобным кернингом. Stalemate – это изящный рукописный шрифт с некоторым винтажным оттенком. Он подходит для создания акцентов и персонализации вашего сайта. Этот тщательно разработанный классический пропорциональный шрифт может использоваться как для отображения больших объемов текста, так и написания заголовков. В html
размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство. Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html
. Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами. Поддерживается положительное значение атрибута от 1 до 7.
Форматируется только тот текст, который расположен между частями парного тега font.
Остальной текст отображается стандартным шрифтом, установленным по умолчанию.
@font-face {
Так же наш SVG можно перегнать в другие форматы шрифтов, например в TTF с помощью сервиса onlinefontconverter .
font-family: "MySomeFont";
src: url("fonts/font.svg") format("svg");
}
1. Montserrat
2. Abril Fatface
3. Playfair Display
4. GT Walsheim
5. Merriweather
6. Josefin Sans
7. Gravitas One
8. Jura
9. League Gothic
10. Fjord
11. Amaranth
12. Poly
13. Gentium Basic
14. Open Sans
15. Ledger Regular
16. Signika
17. Josefin Slab
18. Forum
20. Arvo
21. Bevan
22. Old Standard TT
23. Kreon
24. Droid Sans
25. Italiana
26. Vollkorn
27. Actor
31. Ubuntu
32. Rosario
33. Roboto Slab
34. Oswald
35. Stalemate
36. Crimson Text
Теги и атрибуты при роботе со шрифтами html
Рассмотрим теги, которые используются для работы со шрифтами в html
и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта:
Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:
- — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
- — размер больше установленного по умолчанию;
- — меньший размер шрифта;
- — наклонный текст (курсив ). Аналогичный ему тег ;
- — текст с подчеркиванием;
— зачеркнутый;- — отображение текста только в нижнем регистре;
- — в верхнем регистре.
Обычный текст
Жирный текст
Жирный текст
Больше обычного
Меньше обычного
Курсив
Курсив
С подчеркиванием
Зачеркнутый
Возможности атрибута 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
3) font-style – устанавливает стиль написания шрифта. Синтаксис:
font-style: normal | italic | oblique | inherit
Значения:
- normal –нормальное написание;
- italic – курсив;
- oblique – шрифт с наклоном вправо;
- inherit – наследует написание родительского элемента.
Пример того, как поменять шрифт в html с помощью этого свойства:
font-style:inherit
font-style:italic
font-style:normal
font-style:oblique
4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:
font-variant: normal | small-caps | inherit
Пример того, как изменить шрифт в html этим свойством:
font-variant:inherit
font-variant:normal
font-variant:small-caps
5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис:
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 – шрифт строки состояния.