Как и где выбрать шрифт для сайта – База знаний Timeweb Community
Какой шрифт выбрать для своего сайта – вопрос кажется простым, но только на первый взгляд. Как известно, в дизайне мелочей не бывает. И то, что сначала кажется не особо важным, в дальнейшем может сыграть важную роль.
1. Заголовки и текст
Для сайта оптимально выбрать два шрифта – один для заголовков, другой для текста. Это удобно для пользователей, им будет сразу ясно, где заголовок, а где текст. И дизайн самого сайта будет выглядеть более целостно.
Если двух шрифтов для выполнения нужных задач не хватает, и нужно использовать больше, то тогда придерживайтесь правила: не больше четырех шрифтов на странице.
Пример: заголовки – Verdana, текст – Arial.
2. С засечками или без?
Обычно шрифты с засечками (короткими штрихами на концах букв; так называемые serif-шрифты: Times New Roman, Garamond, Georgia) используются в печати. На бумаге такие шрифты воспринимаются хорошо, при чтении глаза устают меньше.
Следовательно, для веба обычно используются шрифты без засечек (так называемые sans-serif: Arial, Verdana, Trebuchet, Helvetica), потому что на экране, в отличие от бумаги, засечки превращаются в помехи, которые только усложняют восприятие текста. При этом важно оставлять нормальное межстрочное расстояние, чтобы глаз визуально мог отделять одну строчку от другой.
Считается, что любые правила можно нарушать, так что шрифты с засечками на сайте использовать можно… но очень-очень аккуратно и в исключительных случаях. Например, шрифтом с засечками можно набрать заголовок, чтобы сделать его еще более отличающимся от основного текста.
Кстати, есть еще шрифты monospace (Courier, Lucida Console, Monaco). Они похожи на шрифты для пишущей машинки, а сейчас используются для оформления кода.
3. Сочетание цветов
В отношении шрифтов действует такое же правило, как и в отношении общей цветовой гаммы сайта — используйте цветовой круг, и будет вам счастье. Например, удачные сочетания можно поискать в Color wheel от компании Adobe.
Естественно, тестируйте сочетаемость цветов не только между собой, но и на сайте, на том фоне, который вы выбрали. Особенно если фон не однотонный.
4. Выделение
Выделять текст можно не только цветом, но и выделением (текст — белый, выделение черным). Важно обратить внимание на контрастность — чем она выше, тем проще прочитать текст. Поэтому так легко воспринимать черные буквы на белом фоне и так сложно читать текст темно-серого цвета на светло-сером фоне.
5. Размер
Размер шрифта должен позволять без труда читать его.
В идеале это 12-14 пунктов; минимально — 10, максимально — 16.
Источники шрифтов
При выборе шрифта не забывайте про лицензию — ворованные шрифты грозят не только муками совести, но и проблемами с законом (а оно вам надо?). Сейчас существует множество разных бесплатных шрифтов, и вы легко найдете что-то подходящее для вашего сайта. Итак, где искать бесплатные шрифты.
Google Fonts
https://fonts.
google.com/
Один из самых известных сборников бесплатных шрифтов. Присутствует латиница, кириллица и другие популярные и не очень языки; всего 900 семейств. Есть несколько фильтров — например, можно отсортировать шрифты по толщине букв, наклону или ширине.
Тексты можно редактировать, так что сразу можно посмотреть, как будет выглядеть нужная фраза в этом шрифте.
FontSpace
https://www.fontspace.com/
Здесь представлено больше 37 тысяч бесплатных шрифтов. Есть даже с пиктограммами (например, шрифт Trees Go с деревьями). Шрифты распространяются под разными лицензиями; некоторые нужно купить для того, чтобы использовать в коммерческих целях.
1001 Free Fonts
https://www.1001freefonts.com/
Еще один сайт с бесплатными шрифтами. Шрифты разделены на категории: например, в категории “Famous” (знаменитое) можно найти шрифты из «Парка Юрского периода» или «Черепашек-ниндзя».
FontStruct
https://fontstruct.
com/
Ресурс для тех, кто хочет создать шрифт самостоятельно. Если такого желания нет, то можно заглянуть в галерею, где есть созданные другими пользователями шрифты.
Font Squirrel
https://www.fontsquirrel.com/
Еще один сайт со множеством разных шрифтов. Помимо бесплатного раздела, в нем есть раздел с платными шрифтами (Almost Free Fonts), где продаются шрифты с очень хорошей скидкой.
DaFont
https://www.dafont.com/
Здесь можно найти бесплатные шрифты для личного и коммерческого использования. Есть интересная категория шрифтов “Foreign look”, которые стилизованы под буквы из алфавитов разных стран: русские, арабские, азиатские и другие.
Urban Fonts
https://www.urbanfonts.com/
Здесь есть платные и бесплатные шрифты — вторые выделены в отдельный раздел “Free”.
Abstract Fonts
http://www.abstractfonts.com/
Еще одна коллекция с постоянно пополняющимися шрифтами.
А если ищете какие-нибудь оригинальные платные шрифты, посмотрите в MyFonts. Там довольно большая коллекция всевозможных шрифтов.
Заключение
Выбор шрифта — важный момент при создании собственного сайта. Не нужно впадать в крайности — слишком простые шрифты (особенно в заголовках) могут смотреться скучно, слишком сложные (фантазийные) — мешать восприятию самой фразы.
P.S.
Тем, кто интересуется шрифтами и типографикой, рекомендую посмотреть фильм Helvetica:
Как правильно выбрать шрифт для сайта?
При оформлении созданного сайта необходимо уделить должное внимание выбору шрифта или шрифтов. Большинство людей посещают веб-ресурсы с целью получить информацию именно через прочтение, поэтому нужно сделать этот процесс как можно более комфортным.
Какие существуют нюансы при использовании шрифтов? Считается, что использование множества различных шрифтов на одном сайте может сбивать, путать читателя, а если применить только один из них, то сайт может показаться скучным и пресным.
Оптимальным решением будет использовать два основных шрифта при оформлении сайта. Один применять для заголовков, а другой – для основного текста. Таким образом, пользователь будет легко отличать заголовки от текста при просмотре, а сам сайт выглядеть более целостным. Для заголовка, например, можно использовать шрифт Verdana, а для основного текста – Times New Roman или другие варианты. Однако имейте в виду, что не обязательно шрифт, который вы установили на своем компьютере, правильно отобразится на компьютере пользователя. Если такой же шрифт не установлен у читателя, то его браузер отобразит либо альтернативу вашему шрифту, либо значение по умолчанию.
Широкораспространёнными считаются следующие шрифты: Times New Roman, Georgia, Verdana, Arial Black, Courier, Trebuchet MS, Comic Sans или Impact.
Также вы имеете возможность поставить в очередь шрифты вывода текста, которым отдаете предпочтение. Например, можно задать не только «Verdana», но и ряд других «Verdana, Georgia, Times New Roman, serif».
Теперь браузер первым попытается использовать шрифт Verdana, если он не установлен на компьютере пользователя, то следующим будет Georgia, за ним Times New Roman, а затем шрифт, который система сама обозначила по умолчанию.
Таким образом, зная эти несколько нюансов, вы сможете оформить сайт на свой вкус и предотвратить возможные недоразумения при его отображении на компьютерах пользователей.
Не можете найти ответ на вопрос?
Какой шрифт лучше выбрать для сайта? Пример из жизни — www.i-r-p-s.ru
Есть ряд важных правил по выбору правильных шрифтов и цветов для сайта. О них забывают многие, очень многие, «креативные» дизайнеры. А заказчики сайтов эти правила зачастую не знают.
Результат почти всегда получается удручающим.
С одной стороны, «дизайнерский» сайт выглядит довольно красивым.
Но, странное дело!
Часто, причина кроется в элементарных ошибках в выборе шрифтов.
Вот 3 простых правила выбора шрифтов для сайта
и один «горький» пример из жизни:
1. Используйте безопасные шрифты.
Что это такое?
Для большинства кириллических шрифтов операционной системы Windows нет аналогов в Mac OS и Linux\Unix системах.Это приводит к непредсказуемым результатам вывода текста в различных браузерах.
Близкие соответствия в других системах есть только для следующего списка безопасных шрифтов из Windows:
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Все!
Остальными шрифтами лучше вообще не пользоваться на сайте.Последние данные опросов пользователей показали, что наиболее комфортным для основного текста на сайте является шрифт Verdana.
В этом блоге используется шрифт Georgia, который так же высоко оценивается пользователями, но имеет своеобразный вывод цифр: 1234567890, не очень подходящий для бизнес сайтов.
2. Используйте контрастные, читаемые варианты сочетаний цветов.
Можно ограничиться стандартным вариантом Черного текста на Белом фоне.
Или воспользоваться еще более контрастными «рекламными» сочетаниями цветов :- черный текст на желтом фоне
- синий текст на белом фоне
- белый текст на синем фоне
- зеленый текст на белом фоне
- красный текст на белом фоне
Но! Никогда не ведитесь на стандартный дизайнерский вариант:
Серый текст на сером фоне.
Он призван подчеркнуть красивые дизайнерские картинки, и отвлечь внимание от чтения текстов на сайте.
Часто такой прием применяется дизайнерами не осознанно, но в интернете полно сайтов с серыми текстами на сером фоне. О результатах такого использования серого ниже в примере из жизни.
3. Используйте шрифт достаточно большого размера.
Не заставляйте читателя страдать, разбирая что же написано на сайте.
—————————————————————————————————
А теперь, обещанный пример из практики:
Берем Корпоративный сайт. Красивый, наполнен осмысленными и тематическими текстами, содержит много полезной, а часто даже уникальной информации.Но!
Посетители просматривают всего 2.4 страницы и проводят на сайте чуть больше минуты!!!
И еще контент-менеджеры жалуются, что у них начинает болеть голова во время работы с этим сайтом.
При этом, основной текст на сайте был написан шрифтом 8 пунктов, темно серым цветом на светло сером фоне. примерно как в этом куске текста. Вроде ничего страшного, но приглядитесь чуть дольше…
Поставили эксперимент — увеличили размер шрифта до 10ки, тон фона осветлили до белого, а текст сделали чисто черным.
Результат изменения поведения посетителей на картинке:
Просмотры выросли до 2.
8 страницы на посетителя, а время до 1.8 минуты!И усталость от сайта пропала.
Общий рост эффективности сайта составил 30%.
И это, всего лишь из-за выбора правильного размера шрифта и цвета текста!
Вот такое вот простое улучшение «Usability» за счет правильного выбора шрифтов для сайта!
Верстку, кстати, при этом менять не пришлось. Все вписалось в старый дизайн.
—————————————————————————————————
большой обзор / Skillbox Media
Классическая схема состоит из трёх основных типов шрифтовых лицензий: Desktop, Web и App. Её придерживаются многие шрифтовые студии, а также магазины, которые шрифты продают. Среди них type.today, Letterhead.store, Myfonts, Fontshop.
Этот тип лицензии разрешает устанавливать шрифт на компьютер, чтобы разработать дизайн-макет со статичной графикой. Это может быть растровая или векторная графика для печати или для веба.
Как правило, правообладатель разрешает использовать шрифт не только на бумаге, но и на других поверхностях, например, одежде. Стоимость определяется не тиражом продукции, а количеством компьютеров, на которые будет установлен шрифт.
Покупатели шрифтов по лицензии desktop чаще всего получают файлы в формате OTF.
Можно ли использовать шрифт с лицензией Desktop для создания логотипа? К этому студии и магазины относятся по-разному. Например, type.today не берёт за это дополнительной платы, а в Paratype нужно покупать отдельную лицензию «Лого». Такие нюансы обычно прописаны в лицензионном соглашении.
Лицензия Web даёт право использовать шрифт в оформлении сайта. Стоимость определяется трафиком, при этом одни правообладатели оценивают его по количеству просмотров страниц сайта, другие — по числу уникальных посетителей.
После покупки веб-дизайнеры обычно получают шрифт в формате TTF, WOFF, WOFF2 или EOT.
Причём его нужно разместить на сервере — устанавливать такой шрифт на компьютер нельзя, для этого нужна лицензия Desktop.
Шрифты с такой лицензией можно использовать только в мобильных приложениях.
Стоимость зависит от количества приложений. Paratype и Brownfox считают версии для разных платформ — iOS и Android — одним приложением. Но бывает и по-другому.
Шрифт по лицензии App покупатели обычно получают в формате TTF.
25 великолепных веб-безопасных шрифтов для вашего сайта
Шрифты. Мы видим их каждый день. В мире есть все виды шрифтов, от печатной рекламы до журналов.
Независимо от того, являетесь ли вы владельцем магазина электронной коммерции или начинающим блогером, единственное, что объединяет все веб-сайты, — это использование текста для контента.
Размышление над отображаемым текстом (или типографским дизайном) неудивительно важно при создании общей эстетики вашего сайта и обеспечении его успеха.
Но что еще важнее, чтобы они были безопасными для Интернета шрифтами.
Что такое безопасные веб-шрифты?
Веб-безопасные шрифты — это стили шрифтов, которые обычно предварительно установлены и доступны для просмотра на большинстве устройств — компьютерах, мобильных телефонах, смарт-телевизорах и планшетах.
Почему важны веб-безопасные шрифты?
В идеальном мире у вас должна быть возможность выбрать любой шрифт, который вы хотите для своего сайта. На самом деле существуют ограничения на тип шрифтов, которые вы можете использовать.
Большинство компьютеров и веб-браузеров поставляются с набором шрифтов, которые предварительно установлены производителями, однако их дизайн может (и обычно) отличается. Не было стандартного набора шрифтов, который был общим для всех разных производителей.
Если шрифт, который вы использовали, не был установлен на компьютере пользователя, ваш веб-сайт просто вернется к родовому шрифту, который иногда может оказаться нечитаемым.
В других целях, чтобы избежать этого, веб-дизайнеры использовали Основные шрифты для Интернета что Microsoft выпустила в 1996 в качестве стандарта для большинства веб-сайтов. Эти шрифты в конечном итоге стали «веб-безопасными шрифтами», потому что независимо от компьютера шрифты будут безопасно отображаться на вашем веб-сайте.
Должен ли я использовать веб-безопасные шрифты для моего сайта?
Короткий ответ: Абсолютно.
Если вы хотите сохранить дизайн и визуальный бренд вашего сайта согласованным, то использование веб-безопасного шрифта гарантирует, что ваш сайт будет выглядеть так, как вы предполагали.
Фактически, почти весь сайт сегодня использует какую-то форму безопасного веб-шрифта. Веб-дизайнеры всегда рекомендуют выбирать веб-безопасный шрифт, чтобы избежать появления общих шрифтов, таких как Times New Roman, когда пользователи посещают ваш сайт, если у них нет этого конкретного или специального шрифта.
Как добавить эти веб-безопасные шрифты?
Существует несколько способов, которыми вы можете добавить эти шрифты на свою веб-страницу, но если вы не занимаетесь программированием и не имеете практически никакого технического опыта, вы можете просто скопировать исходный код CSS и вставить их напрямую в свою собственную таблицу стилей, чтобы использовать шрифты.
Если вы все еще не уверены, просто выполните следующие несколько простых шагов:
- Загрузите файл header.php
- Скопируйте исходный / стандартный код шрифта (см. Ссылку 1)
- Вставьте код в верхней части файла заголовка.
- Загрузите свой style.css, поместите код шрифта, чтобы изменить текст шрифта по вашему выбору. (см. ссылку 2)
Ссылка 1
Ссылка 2
body {font-family: 'Abel'; font-size: 22px;}25 Gorgeous Web Safe Fonts для вашего сайта
1. Arial
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
2. Calibri
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
3. Helvetica
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
4. Пользовательский интерфейс Segoe
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
5. Trebuchet MS
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
6. Камбрия
Ссылки / Источник: Fonts.
com / Шрифт шрифта CSS
7. Palatino
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
8. Perpetua
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
9. Грузия
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
10. Consolas
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
11. Новый Курьер
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
12. Tahoma
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
13. Verdana
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
14. Optima
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
15. Gill Sans
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
16. Готический век
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
17. Candara
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
18. Андале Моно
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
19.
ДидоСсылки / Источник: Fonts.com / Шрифт шрифта CSS
20. Копперская готика
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
21. Rockwell
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
22. Бодони
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
23. Франклин Готик
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
24. Влияние
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
25. Calisto MT
Ссылки / Источник: Fonts.com / Шрифт шрифта CSS
Шрифтовые инструменты для проверки
В Интернете существует ряд инструментов, которые вы можете использовать для проверки и тестирования различных шрифтов, которые вы можете использовать для Ваш сайт, Если у вас возникли проблемы с выбором шрифта или вы просто хотите узнать, какие типы веб-безопасных шрифтов доступны, эти сайты — отличный инструмент для использования.
Шрифтовая пара
Шрифтовая пара предлагает массу ресурсов, плагинов, электронных книг, руководств, видеороликов и даже вдохновляет на что угодно и все, что связано с типографикой.
У них даже есть раздел, который дает вам самые популярные шрифты, доступные в Google Fonts, и какие шрифты лучше всего сочетаются друг с другом.
Wordmark.it
Если вы хотите быстро просмотреть, как будет выглядеть ваш текст с определенным шрифтом, Wordmark.it дает вам мгновенный предварительный просмотр того, как ваш текст будет отображаться сразу на нескольких шрифтах. Просто введите слово или фразу на панели своей главной страницы, нажмите «Ввод», и он покажет вам текст с разными шрифтами, такими как Candara или Lucida Console.
WhatTheFont
WhatTheFont это инструмент, который вы можете использовать для определения и идентификации шрифта, который вы видели в Интернете. Все, что вам нужно сделать, это просто загрузить изображение шрифта, и WhatTheFont перекрестно проведет поиск в своей базе данных, чтобы дать вам самые близкие результаты. Если вы все еще не можете найти точный шрифт, вы даже можете форум, чтобы обратиться за помощью.
Это все о шрифтовой игре
Наш собственный инструмент может проверить скрипты шрифтов, которые использует веб-сайт (посмотрите — Инструмент WHSR).
Если вы похожи на меня, то, скорее всего, вы проводите много времени в Интернете, читая и посещая тонны веб-сайтов. Из-за этого вы по достоинству оцените, когда веб-сайт использует хорошую типографику для дополнения визуального дизайна своего сайта.
Когда вы используете веб-безопасные шрифты, приятные для глаз, ваши пользователи будут благодарны и более охотно возвращаются и потребляют больше вашего контента. Чего же ты ждешь? Начните использовать эти шрифты и сделать потрясающий сайт для вашего бизнеса!
Прочитайте больше:
Как выбрать лучшие шрифты для вашего сайта и брендинга
Опубликовано: 2021-07-28
Прыгать вперед
В этой статье
Почему шрифты для веб-сайтов имеют значение?
4 совета по выбору лучших шрифтов для вашего сайта
Совет №1: используйте легко читаемые шрифты
Совет № 2: сделайте размер шрифта большим (достаточно)
Совет № 3: не используйте слишком много шрифтов, размеров шрифта или цветов.
Совет №4: используйте постоянные шрифты
Как найти лучший шрифт для вашего сайта
№1. Выясните, какое сообщение вы хотите, чтобы ваш шрифт отправлял
# 2: протестируйте свои шрифты с аудиторией
# 3: Если сомневаетесь, выберите общий шрифт
Где найти лучшие шрифты для вашего сайта
№1. Google шрифты
№2. Fonts.com
№3. Fontspring
№4. Какой шрифт
№5. Тип Деталь
Как изменить шрифты на витрине Podia
Выберите лучший шрифт для своего сайта за несколько простых шагов
Шрифты, вероятно, кажутся совсем не важными вещами при разработке своего веб-сайта.
Это оконные рамы в здании, верно?
Не совсем.
Шрифты являются важной частью вашего бренда и оказывают большое влияние на восприятие вашего бизнеса.
Сегодня мы даем вам семь основных советов по поиску правильных шрифтов для вашего сайта, от выбора лучших шрифтов до места их загрузки.
Это может все изменить.
Но сначала давайте быстро рассмотрим, почему шрифт с любым другим именем не такой приятный.
Почему шрифты для веб-сайтов имеют значение?
Шрифты вашего веб-сайта сильно зависят от шрифтов, потому что они помогают передать индивидуальность, послание и ценности вашего бизнеса.
Визуально шрифт вашего веб-сайта передает сообщение вашей аудитории, даже если они не читают копию вашего сайта.
Возьмем, к примеру, Mailchimp, который переименовал свой сайт в шрифт Cooper Light.
Почему они выбрали Cooper Light?
Mailchimp считает, что шрифт может быть «нарядным и редакционным или случайным и доступным». Это также шрифт, который передает надежность, искренность и оптимизм — черты, которые соответствуют ценностям их бренда.
Правильные шрифты также служат функциональной цели. Они могут помочь людям легко понять послание вашего бренда на различных устройствах и платформах.
Airbnb, например, выбрал шрифт Cereal, потому что он хорошо работает на нескольких онлайн- и офлайн-платформах.
Шрифт представляет Airbnb как доступный и удобный.
Говоря о доступности, важно выбрать шрифт, доступный для всех членов вашей аудитории, особенно если ваш бренд выходит на разные языки.
Если вы выберете шрифт, который читается на разных языках ваших клиентов, посетители, использующие автоматический переводчик, по-прежнему смогут легко читать ваш сайт.
В качестве примера возьмем текст «Быстрая коричневая лисица».
На английском текст отлично читается шрифтом Merriweather.
Но в переводе на чешский язык он гораздо менее читабелен и эстетичен.
Итак, если значительная часть вашей аудитории переводит ваш веб-сайт на другой язык, убедитесь, что ваш шрифт читается на всех языках.
Помимо удобочитаемости, многие исследования показывают, что шрифты могут повлиять на мнение потребителей о бренде и его продуктах во всем мире.
Например, такие характеристики шрифта, как естественность, гармония и вес, влияют на общее восприятие бренда вашей аудиторией.
Они также влияют на покупательское намерение вашей аудитории.
Одно исследование показало, что, когда люди делают покупки для спокойного отдыха, легкий для чтения шрифт увеличивает их готовность платить за тур.
Напротив, когда покупатели ищут более приключенческий тур, более трудный для чтения шрифт увеличивает их готовность платить за тур.
Помимо всего вышеперечисленного, шрифты также влияют на восприятие ваших клиентов не только в момент покупки, но и влияют на восприятие продукта и восприятие продукта.
Фактически, в одном случае криволинейность — или шрифты с изогнутыми линиями — повлияла на вкусовые ожидания и впечатления посетителей.
Какая здесь мораль?
Шрифты веб-сайта влияют на то, как посетители воспринимают ваш бренд, продукты и опыт, а также влияют на доступность и простоту использования вашего сайта.
Тем не менее, выбор шрифта, который передает правильное сообщение, — это только часть уравнения.
Ознакомьтесь с нашими четырьмя передовыми практиками, и вы будете намного ближе к поиску лучшего шрифта для своего бизнеса.
4 совета по выбору лучших шрифтов для вашего сайта
Совет №1: используйте легко читаемые шрифты
Лучшие шрифты для веб-сайта — это легко читаемые.
В противном случае посетители вашего сайта могут покинуть ваш сайт, потому что его трудно читать. Конечно, это означает, что меньше времени нужно тратить на изучение ваших маркетинговых сообщений и изучение предложений вашего сайта.
Итак, читаемость должна быть вашим главным приоритетом при выборе шрифта для сайта. Он сделает все — от ваших сообщений в блоге до кнопок призыва к действию (CTA) и заголовков — более удобоваримым.
Хотя не существует единого стандартного шрифта веб-сайта, который лучше всего подходит для любого бизнеса, Verdana и Georgia являются надежными вариантами для отображения длинных текстов веб-сайтов.
Это также подтверждается этим исследованием, которое показало, что Verdana хороша для чтения длинных текстов на экранах.
Удобочитаемость особенно важна, когда речь идет об отображении отзывов на вашем сайте.
На самом деле, трудные для чтения шрифты могут негативно повлиять на положительные отзывы, и покупатели считают, что рецензент вызывает больше доверия, если его обзор легко читается.
Хотя удобочитаемость является большим приоритетом, здесь есть одна оговорка: легко читаемые шрифты могут быть не такими запоминающимися.
Настолько, что одно исследование показало, что когда вы пишете трудно читаемым шрифтом, он запоминается лучше, чем когда вы пишете легко читаемым шрифтом.
Однако исследование предостерегает от зайти слишком далеко и использовать шрифты, которые затрудняют чтение для читателей.
Итак, возникает вопрос — как вам балансировать между легкими для чтения и трудночитаемыми шрифтами на вашем сайте?
Проще говоря, следуйте этому практическому правилу, состоящему из двух частей:
При написании более длинных текстов, например, в посте в блоге или на странице продаж, которая конвертируется, придерживайтесь более чистых шрифтов.
Более короткие тексты, такие как кнопки CTA, заголовки и отзывы на торговых страницах, могут быть более эффективными, если они написаны немного более трудным для чтения шрифтом.
_(9507).jpg)
Например, Wild Side Design использует несколько шрифтов, которые привлекают внимание пользователей к различным частям их страницы.
Хотя его основное содержание написано легко читаемым шрифтом, его призывы к действию, подписи и заголовки используют более сложные шрифты.
Другой пример — компания по уходу за кожей Mad Hippie. Он отображает шрифт, который выглядит рукописным, чтобы выделить подзаголовки и краткие описания своих продуктов.
Независимо от вашего сочетания шрифтов, вот суть:
Легко читаемые шрифты часто являются лучшими шрифтами для текста веб-сайтов, особенно для длинных копий. Трудночитаемые шрифты могут быть лучше для ключевой информации — в более короткие промежутки времени — которую вы хотите, чтобы читатели запомнили.
Однако шрифты и длина копий — не единственные факторы, с которыми стоит поэкспериментировать. Также необходимо учитывать размер, что подводит нас к следующему совету.
Совет № 2: сделайте размер шрифта большим (достаточно)
Хотя универсального стандартного размера шрифта веб-сайта не существует, вы захотите сделать его достаточно большим, чтобы ваши клиенты могли читать на устройстве любого размера.
Одно исследование рекомендовало, чтобы веб-сайты с большим количеством текста использовали шрифт размером 18 или больше.
То же исследование показало, что удобочитаемость и правильные ответы на вопросы для понимания улучшаются при использовании шрифта большего размера.
Не говоря уже о том, что большие размеры шрифта помогают людям с нарушениями зрения или чтения.
Более того, как для пожилых, так и для молодых людей более крупный размер шрифта приводит к повышению производительности, точности, расстояния просмотра и снижению восприятия сложности задачи.
Если этого недостаточно, чтобы убедить вас использовать на своем сайте шрифт большего размера, вот вам еще одно соображение.
Размер шрифта также может повлиять на читаемость и понятность веб-сайта для людей с дислексией. В этом эксперименте рекомендуется использовать шрифт из 18 пунктов при разработке веб-сайта для людей с дислексией.
Подвести итоги:
Выберите более крупный шрифт веб-сайта, чтобы повысить удобство чтения и улучшить взаимодействие с пользователем. Шрифт размером 18 пунктов или больше идеально подходит для большинства веб-сайтов.
В то время как наши два совета пока сосредоточены на функциональности, наш третий совет фокусируется на эстетике шрифтов.
Совет № 3: не используйте слишком много шрифтов, размеров шрифта или цветов.
Использование на вашем веб-сайте нескольких разных шрифтов, размеров шрифтов и цветов может привлечь внимание к различным компонентам вашего сайта, таким как CTA, отзывы и другой важный текст.
При этом вы должны ограничить количество используемых шрифтов и цветов, чтобы вы могли создать единообразный и визуально привлекательный интерфейс.
Если вы этого не сделаете, ваш веб-сайт может быть слишком трудным или утомительным для чтения. Вы также можете пропустить отметку, когда дело доходит до передачи вашего сообщения, потому что ваша страница слишком загромождена вариациями.
В качестве примера бренда, который хорошо справляется с выбором цвета шрифта и обменом сообщениями, посмотрите на Lowe’s, который использует черный, синий, белый и серый текст и различные шрифты на своем веб-сайте.
Это соответствует цветовой гамме бренда и гендерно-нейтральному позиционированию предметов домашнего обихода «сделай сам».
Workationing также хорошо уравновешивает разнообразие шрифтов на их сайте. Он использует черный текст для заголовков статей и более длинных копий и белый текст для кнопок, заголовков и более короткого текста.
Хотя вы можете свободно экспериментировать с цветами, помимо черного и белого, обычно лучше использовать не более двух или трех цветов.
Причина в том, что цвета, отличные от белого и черного, могут быть трудночитаемыми на веб-сайте. Итак, сохраните не черный и белый цвета для акцентных цветов, чтобы привлечь внимание к тому, что вы хотите выделить на своей странице.
Возьмем, к примеру, «Обильного художника». Хотя большая часть их текста является черным, они используют оранжевый для заголовков и категорий статей.
Если вам интересно, как выбрать лучшую комбинацию для вашего веб-сайта, воспользуйтесь этим руководством для совместимых шрифтов. И если вы используете шрифты Google для своего веб-сайта, не пропустите 21 комбинацию шрифтов Google.
В основном:
Можно оживить свой веб-сайт различными типами, размерами и цветами шрифтов. Просто убедитесь, что каждый шрифт дополняет другой и по-прежнему обеспечивает чистоту и удобство для ваших посетителей.
Сведите к минимуму пикантность, потому что вам нужно, чтобы дизайн всех ваших страниц был единообразным.
Совет №4: используйте постоянные шрифты
Наш последний совет сегодня — использовать шрифты единообразно на всем сайте.
Почему?
Помимо усиления вашего бренда, постоянное использование шрифтов обеспечивает вашим посетителям лучший пользовательский опыт и делает просмотр вашего веб-сайта более приятным.
В частности, использование одних и тех же шрифтов в одних и тех же форматах (таких как заголовки или основной текст) помогает посетителям легче находить информацию. В конце концов, 56% потребителей ожидают найти то, что им нужно, за три клика или меньше, поэтому все, что вы можете сделать, чтобы облегчить навигацию, очень полезно.
Кроме того, когда вы представляете единый внешний вид на своем сайте, вы также производите впечатление более профессионального и заслуживающего доверия.
Это большое дело, учитывая, что 48% потребителей утверждают, что веб-сайт бренда является одним из самых надежных источников информации.
Доверие посетителей тоже должно происходить быстро. В наши дни люди оценивают надежность веб-сайта в течение 3,42 секунды, основываясь на его эстетической привлекательности.
Более того, соответствие между имиджем бренда и веб-сайтом также может привести к положительному отношению к бренду.
Чтобы помочь вам ощутить все эти преимущества, вот два примера брендов, использующих согласованные шрифты.
Amazon использует шрифт Amazon Ember на всей своей домашней странице.
Не в шутку, но Podia использует одни и те же шрифты для заголовков и обычного текста на всех страницах сайта.
Главный вывод — использовать одни и те же шрифты для одних и тех же элементов на всем сайте, чтобы вашим посетителям было легко перемещаться по нему.
Теперь, когда вы знакомы с передовыми методами работы со шрифтами, давайте посмотрим, как их можно использовать, чтобы найти лучший шрифт для своего сайта.
Как найти лучший шрифт для вашего сайта
№1. Выясните, какое сообщение вы хотите, чтобы ваш шрифт отправлял
Хотя читаемость должна быть вашим главным критерием при выборе шрифта, сообщение, которое вы хотите, чтобы он отправлял, должно быть вторым.
Этот ресторан выбрал шрифт, связанный, например, с их имиджем высокой кухни.
Научный журнал Nature выбрал шрифт Harding, потому что им нужен шрифт, который лучше отображает математические символы и формулы.
Они также выбрали новый шрифт, который производил впечатление «спокойного, рационального ума», чтобы соответствовать их бренду.
Хотя шрифты просто заменяют произносимые слова, они могут передавать удивительно разные флюиды.
Рассмотрим широко используемый шрифт Times News Roman. Times New Roman казался более злым и забавным, чем Arial, когда участники исследования читали сатирические тексты, написанные шрифтом Times.
В отдельном исследовании участникам эксперимента были показаны электронные письма, написанные разными шрифтами.
Участники, которые видели письмо, написанное на Gigi (которое вы можете увидеть ниже), сочли его более бунтарским и молодым, чем другие изученные шрифты. Участники также сочли Гиги менее стабильной и практичной.
Участники также считали автора электронного письма Джиджи менее профессиональным, заслуживающим доверия и зрелым человеком.
Как показывают эти результаты, шрифты могут сказать о вашем бизнесе и личности гораздо больше, чем буквальные слова, которые они представляют.
Чтобы убедиться, что ваша аудитория правильно интерпретирует ваше сообщение, проверьте свои шрифты перед развертыванием на всем сайте.
# 2: протестируйте свои шрифты с аудиторией
Из-за того, как много способов восприятия данного шрифта, проведите исследование клиентов, чтобы понять, как ваша целевая аудитория интерпретирует эти шрифты.
Ваш шрифт должен быть не только легко читаемым, но и приятным для чтения.
Как говорится, время летит незаметно, когда вы развлекаетесь, и то же самое касается чтения вашего сайта.
Фактически, участники эксперимента недооценили, сколько времени они потратили на чтение текста, в среднем на три минуты и 18 секунд, когда они читали текст с хорошей типографикой.
В отличие от людей, которые читают текст с плохим шрифтом и недооценивают время чтения в среднем на 24 секунды.
Эти результаты показывают, что хороший шрифт может удерживать читателей с текстом вашего сайта, поэтому стоит найти правильный.
Некоторые из ваших выводов могут перевернуть ваши ожидания, но это хорошо — ваше исследование должно помочь вам определить способы сделать ваш сайт лучше для ваших клиентов, а не подтверждать ваши теории.
Например, вы можете подумать, что использование более простого шрифта может повысить конверсию на ваших страницах продаж и продуктов. Но одно исследование показало, что добавление более гладкого шрифта неэффективно с точки зрения повышения коэффициента конверсии сайта электронной коммерции.
Урок здесь состоит в том, чтобы протестировать шрифты на вашей аудитории, прежде чем применять их ко всему вашему веб-сайту. То, как клиенты интерпретируют эти шрифты и как они на них реагируют, может вас удивить.
Но если ваши выводы неубедительны или у вас недостаточно людей для опроса, вы можете воспользоваться нашим последним советом.
# 3: Если сомневаетесь, выберите общий шрифт
Пока вы не определите лучшие шрифты для своего бренда, придерживайтесь лучших шрифтов для веб-сайтов, таких как Georgia и Verdana.
Как мы упоминали ранее, несколько исследований показали, что Verdana является одним из лучших шрифтов для основного текста веб-сайтов.
В одном исследовании участники экспериментов отдали предпочтение Verdana при чтении на экране компьютера. Участники также читали быстрее и имели меньше регрессов (обратное движение) при чтении текста с помощью Verdana.
Отдельное исследование показало, что участники предпочитали 12-точечный матричный шрифт Arial. Еще одно исследование показало, что участники читают быстрее при чтении шрифта без засечек.
Теперь вы можете беспокоиться, что ваши клиенты могут спутать ваш бизнес с другим, если вы используете общий шрифт — и это небезосновательно.
Компании критиковали за использование одинаковых или похожих шрифтов в своих брендах — просто подумайте, насколько похожи шрифты, используемые Google, Airbnb, Spotify и Pinterest.
Но, как отмечает предприниматель Тьерри Брунфо, использование шрифтов, похожих на другие в вашей отрасли, не всегда плохо.
Тьерри сказал, что:
«Количество визуальных элементов, которые ежедневно засыпают потребителя, огромно — на улице, на ноутбуке или смартфоне.
Визуальный хаос, в котором сложно ориентироваться. Воздействие и, прежде всего, ясность стали ключевыми словами для всех брендов.
Все эти смелые и нейтральные логотипы говорят потребителю одно и то же: наш бренд и наши услуги просты, понятны и понятны. И очень читабельный.
В основном:
Не уклоняйтесь от часто используемых шрифтов — они часто могут облегчить посетителям использование вашего веб-сайта или отправить более убедительное сообщение клиентам, чем уникальный (непроверенный) шрифт.
Независимо от того, используете ли вы знакомый или совершенно новый шрифт, ознакомьтесь с нижеприведенными фондами шрифтов, чтобы добавить новые шрифты на свой сайт.
Где найти лучшие шрифты для вашего сайта
Когда дело доходит до поиска шрифтов для использования на вашем веб-сайте, у вас есть два варианта. Первый — использовать то, что встроено в выбранный вами конструктор веб-сайтов.
Второй — использовать фабрику шрифтов или веб-сайт, на котором шрифты доступны для загрузки и / или продажи, что, конечно же, открывает вам больше возможностей.
Некоторые из лучших онлайн-литейных шрифтов:
№1. Google шрифты
Google Fonts — один из лучших веб-сайтов со шрифтами и, возможно, лучший веб-сайт для бесплатных шрифтов. Создатели могут получить доступ к сотням шрифтов с открытым исходным кодом, которые можно использовать для более чем 135 языков.
Каждый из шрифтов в Google Fonts можно использовать бесплатно и в коммерческих целях.
№2. Fonts.com
Как и Google Fonts, Fonts.com предлагает тысячи шрифтов на выбор — более 150 000, если быть более точным.
Однако вам необходимо приобрести каждый шрифт перед его использованием.
№3. Fontspring
Fontspring — это производитель шрифтов, который также предлагает тысячи платных шрифтов.
Что отличает Fontspring от других производителей, так это то, что они включают значок для шрифтов, который не налагает необычных ограничений или условий на пользователей.
Это снижает вероятность случайного нарушения условий контракта при использовании шрифта, приобретенного на их платформе.
№4. Какой шрифт
What Font — это расширение для детектора шрифтов веб-сайта, которое помогает вам идентифицировать шрифты на любой веб-странице.
Хотя у него нет шрифтов в продаже, он помогает вам определить шрифт на другом веб-сайте, который вы хотели бы использовать самостоятельно.
№5. Тип Деталь
Если вы нашли шрифт, который вам нравится, но не знаете, как он будет выглядеть в разных размерах и весах, перейдите в раздел «Сведения о типе».
Сведения о типе раскрывают (естественно) подробности о многих популярных шрифтах, например, этот профиль для шрифта Neue Swift.
Среди прочего, «Детализация шрифта» показывает, как шрифт выглядит в разных размерах и весах, что делает шрифт уникальным, а также похожие шрифты.
Теперь, когда вы знаете, где найти идеальный шрифт, узнайте, как легко изменить шрифты на витрине магазина Podia.
Как изменить шрифты на витрине Podia
Вы можете изменить шрифты своего веб-сайта в мгновение ока, если вы разместите свою витрину на Podia.
Сначала перейдите в редактор Podia и выберите страницу, которую хотите отредактировать. Оттуда выберите заголовки и стиль шрифта в раскрывающемся меню «Шрифты».
Просто щелкните направленную вниз стрелку рядом с каждым полем шрифта и выберите нужный шрифт.
Если вам не нравится какой-либо из доступных шрифтов, свяжитесь с нашей службой поддержки.
Щелкните фиолетовый значок чата на нашей домашней странице, и мы с радостью добавим любой шрифт Google на вашу витрину.
И вот так! Вы только что добавили уникальный шрифт в свою витрину.
У вас еще нет витрины, в которую можно было бы добавить шрифт? Получите его сегодня и подпишитесь на 14-дневную бесплатную пробную версию Podia.
Выберите лучший шрифт для своего сайта за несколько простых шагов
Шрифты не просто представляют слова — они могут повлиять на то, как люди воспринимают ваш бизнес.
Излишне говорить, что выбор шрифта для вашего бизнеса должен иметь приоритетное значение наряду с выбором правильного логотипа, цветов бренда и макета веб-сайта.
При использовании шрифтов для веб-сайтов необходимо:
Используйте удобный для чтения шрифт
Сделайте шрифт достаточно большим, чтобы его могли прочитать большинство (размер шрифта 18 или больше)
Не используйте слишком много разных типов, размеров или цветов шрифтов.
Поддерживайте постоянство использования шрифтов
Выберите шрифт, который передает правильное сообщение о вашем бренде.
Проверьте свой шрифт со своей аудиторией
Используйте общий шрифт, если вы еще не можете решить, какие шрифты использовать
Подобно правильному логотипу и фирменным цветам, шрифты вашего веб-сайта могут повлиять на положительное и отрицательное впечатление посетителей вашего веб-сайта. Вот для обеспечения положительного.
Новостная рассылка
Подпишитесь на нашу рассылку
Присоединяйтесь к тысячам авторов, которые получают наши еженедельные статьи о запуске, развитии и процветании творческого предпринимателя.
Учебник CSS 3. Статья «Работа со шрифтами в CSS»
В этой статье Вы узнаете основную информацию о шрифтах в CSS, а именно: как управлять размером шрифта, его начертанием и жирностью, научитесь подключать безопасные и веб-шрифты, узнаете какие бывают шрифты и где их можно найти. Кроме того, на примере службы Google Fonts подключим веб-шрифты на наши страницы.
Для привлечения внимания посетителей Вашего сайта вы можете придать привлекательный вид текстовому содержимому страниц. Для этих целей в CSS существует большое количество разнообразных свойств форматирования: шрифт текста, его цвет, размер, межстрочный интервал и так далее. В первую очередь рассмотрим методы работы с существующими шрифтами (безопасные веб-шрифты).
Безопасные веб-шрифты
В CSS стиле для выбора типа шрифта применяется свойство font-family, в котором указывается интересующий Вас шрифт. Предположим, что вы хотите применить для абзацев страницы шрифт Courier. В этом случае Вам необходимо будет создать, например, селектор типа и воспользоваться свойством font-family:
p {
font-family : Courier; /* устанавливаем тип шрифта – Courier */
}
Главная особенность данного способа заключается в том, что он будет работать, при условии, что у посетителя установлен подобный шрифт, иначе, страница будет отображена с использованием шрифта «встроенного» в браузер.
Так как вы заранее не знаете, есть у пользователя тот, или иной шрифт, то рекомендуется указывать не только основной шрифт, но и пару запасных (альтернативных) шрифтов, для того случая если у пользователя отсутствует основной шрифт.
Рекомендуется последним в списке шрифтов указывать и семейство шрифта (generic-family). Если у пользователя по каким-то причинам отсутствуют все перечисленные Вами шрифты, то в этом случае страница будет отображена хотя бы шрифтом того же семейства, а не шрифтом «встроенным» в браузер.
Давайте рассмотрим следующий пример:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Свойство font-family</title>
<style>
.times {
font-family: "Times New Roman", serif; /* определяем основной шрифт "Times New Roman", альтернативный serif (с засечками)*/
}
.courier {
font-family: Courier, monospace; /* определяем основной шрифт "Courier", альтернативный monospace (семейство моноширинных шрифтов) */
}
</style>
</head>
<body>
<p class = "times">Параграф, отображаемый шрифтом "Times New Roman".</p>
<p class = "courier">Параграф, отображаемый шрифтом "Courier".</p>
</body>
</html>
В данном примере для первого абзаца браузер проверит, есть ли в наличии у пользователя основной шрифт, если нет, то установит шрифт из семейства serif (с засечками). Для второго абзаца был задействован моноширинный шрифт Courier, а как альтернатива семейство моноширинных шрифтов (буквы имеют одинаковую ширину).
Шрифты, которые содержат в названии более одного слова, либо цифры, необходимо обязательно помещать в кавычки.
Результат нашего примера:
Рис. 34 Пример использования свойства font-family.Ниже я перечислю некоторые часто используемые комбинации безопасных веб-шрифтов, которые с большой вероятностью присутствуют на любом компьютере:
| Семейство шрифта (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 | Съешь же еще этих сочных мандаринов. |
| Семейство шрифта (font-family) | Пример |
|---|---|
| Georgia, serif | Съешь же еще этих сочных мандаринов. |
| «Palatino Linotype», «Book Antiqua», Palatino, serif | Съешь же еще этих сочных мандаринов. |
| «Times New Roman», Times, serif | Съешь же еще этих сочных мандаринов. |
| Семейство шрифта (font-family) | Пример |
|---|---|
| «Courier New», Courier, monospace | Съешь же еще этих сочных мандаринов. |
| «Lucida Console», Monaco, monospace | Съешь же еще этих сочных мандаринов. |
Типы веб-шрифтов и их поддержка браузерами
Все современные браузеры поддерживают использование определённых веб-шрифтов. Происходит это следующим образом: браузер пользователя загружает шрифт с указанного сервера и применяет его для отображения текущей страницы. В настоящее время существуют следующие виды веб-шрифтов:
- TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
- WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
- WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
- SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
- EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).
Ответственность и поиск веб-шрифтов
Сразу хочу обратить Ваше внимание на то, что многие шрифты создаются с целью заработать на них деньги и соответственно распространяются на коммерческой основе.
Чтобы не сталкиваться с любыми правовыми вопросами, связанными с использованием «платных» шрифтов на бесплатной основе, я рекомендую Вам, пользоваться службами шрифтов, например, такой как Google Fonts или, крупными коллекционными порталами, например, Webfont.ru. На начальном этапе Вам этого хватит «за глаза».
Добавление веб-шрифта на страницу
Для добавления шрифта на страницу Вам необходимо:
- использовать правило CSS @font-face, которое сообщает браузеру пользователя, откуда необходимо загружать шрифт и какое имя шрифта при этом используется. При работе с правилом @font-face важным моментом является размещение его в начале вашей таблицы стилей, это позволит вашему браузеру сразу преступить к обработке необходимого шрифта.
- использовать CSS свойство font-family, чтобы указать имя задействованного шрифта и применить к интересующему Вас фрагменту текста (по аналогии работы с локальными шрифтами).
Давайте рассмотрим пошаговое подключение сторонних шрифтов, на примере использования службы Google Fonts.
- Переходим на сайт службы Google Fonts.
- Выбираем понравившийся нам шрифт, я остановился на шрифте без засечек Roboto, Вы можете найти его в поиске, либо выбрать любой другой:
- После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):
- После добавления шрифта в коллекцию, для Вас будет доступна возможность скачать его:
- Распакуйте архив со шрифтами в директорию, из которой они будут подключаться к Вашей веб-странице, либо страницам:
Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.
Еще раз обращаю Ваше внимание, что один файл шрифта содержит:
- одну плотность шрифта.
- один стиль для этого шрифта.
Обратите внимание на важный момент — если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)!
Конечно в том случае, если они существуют для понравившегося Вам варианта шрифта, обязательно учтите эти моменты при работе с веб-шрифтами!
Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент <h3>) мы будем использовать шрифт — Roboto-Bold. Для абзацев (элемент <p>) будем использовать шрифт Roboto-Regular, а для курсивного начертания (элемент <i>) — Roboto-Italic.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Пример использования правила @font-face</title>
<style>
@font-face {
font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: url("/fonts/Roboto-Regular.ttf") format('truetype'); /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: normal; /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight: normal; /* определяет нормальное начертание символов - это значение по умолчанию */
}
@font-face {
font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
/* для упрощения работы со шрифтами допускается использовать одинаковое имя, но при этом начертание или стиль шрифта должен отличаться. IE 8 и ниже не поддерживают такой подход и если Вы хотите поддерживать эти браузеры, то Вам необходимо называть каждый шрифт по разному и более детально стилизовать каждый селектор */
src: url("/fonts/Roboto-Bold.ttf") format('truetype'); /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: normal; /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight: bold; /* определяет жирное начертание символов */
}
@font-face {
font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: url("/fonts/Roboto-Italic.ttf") format('truetype'); /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: italic; /* указываем, что стиль шрифта курсивный */
font-weight: normal; /* определяет нормальное начертание символов - это значение по умолчанию */
}
h3, p, b, i { /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family: "Roboto", sans-serif; /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif) */
}
</style>
</head>
<body>
<h3>Немного о пандах</h3>
<p><b>Большая панда</b> (<i>Ailuropoda melanoleuca</i>) — бамбуковый медведь, одно из редчайших вымирающих животных, занесённых в международную Красную книгу; единственный современный представитель рода <b>большие панды</b> (<i>Ailuropoda</i>).</p>
</body>
</html>
И так, что мы сделали в этом примере:
- Добавили три правила @font-face в начало наших CSS стилей (это важно).
- В каждом правиле с использованием CSS свойства (font-family) мы указали одно название шрифта, вы можете использовать своё название для всех правил, но будет лучше и понятнее если оно будет совпадать с наименованием шрифта.
- В каждом правиле мы указали путь к файлу, который содержит шрифт с разрешением TTF (True Type Font).
- Далее мы для всех правил с использованием свойства (font-style) указали стиль шрифта: для двух правил шрифт отображается обычным стилем — normal (это значение по умолчанию), а для одного указали, что он отображается курсивом (italic).
- Кроме того, для всех правил с использованием свойства (font-weight) указали жирность шрифта: для двух правил шрифт отображается обычной жирности — normal (это значение по умолчанию), а для одного указали что он отображается жирным шрифтом (bold).
- Нам осталось только применить наши шрифты к элементам. Для этого мы создали групповой селектор в котором с использованием ранее рассмотренного свойства font-family указали тип нашего шрифта и как альтернативу через запятую указали семейство шрифта, это сделано для того, что если по какой-то причине браузер пользователя не сможет загрузить наши шрифты, он смог использовать шрифты из указанного семейства, а не встроенные в браузер.
Результат нашего примера:
Рис.38 Пример использования правила @font-face.Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):
@font-face {
font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src:
local("font"); /* проверяется есть ли шрифт на локальном компьютере пользователя по имени, если нет то поиск осуществляется в других указанных источниках */
url("/fonts/font.woff2") format('woff2'); /* задаем путь к шрифту (url) и тип шрифта (format) */
url("/fonts/font.woff") format('woff'); /* задаем путь к шрифту (url) и тип шрифта (format) */
url("/fonts/font.ttf") format('truetype'); /* задаем путь к шрифту (url) и тип шрифта (format) */
}
Как вы можете заметить, для того, чтобы добавить несколько вариантов шрифтов необходимо указать несколько путей к файлам, которые содержат шрифты с определенным разрешением.
Обращаю Ваше внимание, что порядок, в котором вы указываете варианты шрифтов, имеет важное значение, так как Ваш браузер выбирает первый поддерживаемый шрифт. К примеру, если Вы хотите использовать шрифты на сайте WOFF2, которые поддерживаются не всеми браузерами, то необходимо их указать до WOFF.
В настоящее время с некоторыми браузерами могут возникать проблемы при использовании директивы local, которая служит для проверки наличия шрифта (по определенном имени) на локальном компьютере пользователя, по этой причине я не рекомендую Вам использовать её в своих проектах, для этих целей более надежным является использование скриптов.
Добавление веб-шрифта со стороннего ресурса
Давайте рассмотрим на примере службы Google Fonts варианты подключения шрифтов к Вашим страницам без загрузки их на Ваш сервер.
- Переходим на сайт службы Google Fonts.
- Выбираем понравившийся нам шрифт, я остановился на том же шрифте, который мы использовали в прошлый раз — шрифт без засечек Roboto. Вы можете использовать поиск по наименованию для его нахождения.
- После добавления шрифта необходимо нажать на вкладку «Family-selected» (выбранные вами шрифты):
- Далее необходимо выбрать те стили шрифтов, которые мы будем использовать на нашем сайте. Для этого необходимо перейти на вкладку «Customize»
Например, меня интересуют следующие:
- Для заголовков (элемент <h3>) и для жирного начертания я буду использовать шрифт – Bold 700 (Roboto Bold в наборе).
- Для абзацев (элемент <p>) будем использовать шрифт Normal 400 (Roboto Regular в наборе), а для курсивного начертания Normal 400 Italic (Roboto Italic в наборе).
При выборе Вам отобразят влияние тех или иных шрифтов на время загрузки страницы. Используя множество стилей шрифтов, может привести к замедлению загрузки Вашей страницы, поэтому рекомендуется выбирать только те шрифты, которые вам действительно необходимы на вашем сайте.
Первый вариант подключения (Standard). Создание ссылки на внешнюю таблицу стилей, используя HTML тег <link>. В адресе ссылки указывается веб-сервер Google и информация, которая необходима Google для загрузки необходимых шрифтов (как правило, это формат woff2 для современных браузеров, определение типа поддерживаемого шрифта происходит на стороне сервера Google в зависимости от Вашего браузера).
Как вы видите, в ссылке указывается наименование шрифта, толщина шрифта и какой набор символов используется. Если вы внимательно читали статью «Введение в CSS», то Вы уже догадались, что необходимо эту ссылку указать на каждой странице, где необходимо использовать данные шрифты.
Обращаю Ваше внимание, что тег <link> размещается всегда внутри тега <head> (как правило, перед закрывающим тегом </head>).
Необходимое наименование шрифта и альтернативный вариант так же указывается в описании:
Рассмотрим пример подключения, выбранных нами шрифтов:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Пример подключение веб-шрифтов, используя тег <link></title>
<link href = 'https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic' rel = 'stylesheet' type = 'text/css'> /* подключаем внешнюю таблицу стилей для загрузки необходимых шрифтов, в HTML 5 type='text/css' допускается не указывать */
<style>
h3, p, b, i { /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif; /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif) */
}
</style>
</head>
<body>
<h3>Немного о верблюдах</h3>
<p><b>Верблюды</b> (<i>Camelus</i>) — род млекопитающих семейства верблюдовых (<i>Camelidae</i>) подотряда мозоленогих (<i>Camelidae</i>) отряда парнокопытных (<i>Artiodactyla</i>). Это крупные животные, приспособленные для жизни в засушливых регионах мира — пустынях, полупустынях и степях.</p>
</body>
</html>
Результат:
Рис.44 Пример подключение веб-шрифтов, используя тег <link>.Второй вариант подключения, который мы также рассматривали в статье «Введение в CSS» это использование правила @import. В отличие от первого метода (используя HTML тег <link>), который требует добавления кода к каждой странице Вашего сайта, правило @import допускается использовать в начале своей таблицы стилей, которая у Вас уже должна быть подключена к каждой странице.
Чтобы выполнить привязку к внешнему файлу CSS, нужно использовать url и заключить путь к CSS файлу в круглые скобки. Допустимо заключить содержимое в скобках в кавычки:
@import url("path/to/file.css");
Предлагаемый вариант импортирования на страницу:
Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе, таблицы стилей не импортируются (браузеры просто их проигнорируют).
Вы можете использовать правило @import как во внешних таблицах стилей, так и во внутренних. Рассмотрим пример подключения, выбранных нами шрифтов, используя правило @import во внутренних таблицах стилей:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Пример подключение веб-шрифтов, используя правило @import</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic); /* импортируем внешнюю таблицу стилей */
h3, p, b, i { /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif; /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif) */
}
</style>
</head>
<body>
<h3>Немного о пингвинах</h3>
<p><b>Пингвиновые</b> или <b>пингвины</b> (лат. <i>Spheniscidae</i>) — семейство нелетающих морских птиц, единственное в отряде <b>пингвинообразных</b> (<i>Sphenisciformes</i>). В семействе 18 современных видов. Все представители этого семейства хорошо плавают и ныряют.</p>
</body>
</html>
Результат нашего примера:
Рис.46 Пример подключение веб-шрифтов, используя правило @import.Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.
Кроме того, в некоторых случаях правило @import может замедлять загрузку таблиц стилей, либо загружать их не в заданном порядке, что может быть критично для конечного отображения конкретной страницы. Не используйте его в своих проектах.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практические задания:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:
- Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты:
для заголовка — Roboto, для остального текста — Open Sans. Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans к странице. В результате у Вас должно получиться следующее:
Практическое задание № 10.
- Переходим на сайт службы Google Fonts, находим необходимый нам шрифт — Ubuntu, выбираем необходимые стили шрифта и языки, которые нам понадобятся. После этого с использованием тега <link> подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:
Практическое задание № 11.
Если у Вас возникают трудности при подключении шрифтов, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу примера, чтобы понять какой код CSS был использован.
15 лучших веб-безопасных шрифтов HTML и CSS
В качестве альтернативы возникли службы встраивания шрифтов (такие как Google Web Fonts или Adobe Fonts), придающие вашим дизайнам что-то новое, свежее и неожиданное.
Они также очень просты в использовании.
Возьмем, к примеру, Google:
Выберите любой шрифт, например Open Sans, Droid Serif или Lato. Создайте код и вставьте его в
вашего документа. И у вас все готово для ссылки на него в CSS.Это заняло 60 секунд. И это было совершенно бесплатно.(Спасибо, Google!)
Что может пойти не так?
Не у всех будет доступ к одному и тому же шрифту. Значит, у вас будет проблема. Этот красивый шрифт, который вы только что выбрали, будет показываться вашим посетителям как нечто случайное.
Нет, если вы создаете запасной вариант с безопасной альтернативой в Интернете! Вот как это работает.
Почему важна «безопасность в Интернете»?На каждом устройстве предустановлен собственный выбор шрифтов. Выбор во многом зависит от операционной системы.
Проблема в том, что каждая система немного отличается.
Устройства на базе Windows могут иметь одну группу. Один MacOS тянет от другого. Собственная система Android от Google также использует свою собственную.
Теперь откройте веб-сайт. Даже этот подойдет. Возможно, вы видите шрифт, отличный от оригинального.
Значение: допустим, дизайнер выбрал какое-то малоизвестное платное семейство шрифтов для дизайна этого сайта. Если у вас еще не установлен этот шрифт и он не загружается из веб-сайта, шрифт , который вы видите, по умолчанию вернется к некоторому базовому варианту, например Times New Roman .
Однако вы, как посетитель, не обязательно знаете, что именно это произошло. Для вас это может показаться просто уродливым.
«Веб-безопасные» доступны во всех операционных системах. Это небольшая коллекция шрифтов, которые накладываются друг на друга от Windows до Mac и Google (даже от Unix или Linux).
Они дают дизайнерам (и владельцам веб-сайтов) возможность указывать, какие шрифты с возвращаются к , если это необходимо. Таким образом, вы можете контролировать, что будет отображаться (независимо от того, что) на всех устройствах.И вы можете выбрать что-то, что по-прежнему вроде близко к исходному шрифту (чтобы ваши пользователи не увидели что-то случайное или неуместное).
Это план Б, версия «на всякий случай». Аварийная система, чтобы спасти мир от неправильного выбора шрифтов.
Понял? Хороший! Теперь давайте посмотрим на самые популярные веб-шрифты на выбор.
15 лучших веб-шрифтовМожет быть еще несколько.
Но это 15 лучших веб-шрифтов на выбор.Выберите один из них, и вы не ошибетесь.
1. ArialДля большинства Arial похож на стандарт de facto .
Это один из наиболее широко используемых шрифтов без засечек (что означает отсутствие маленьких завитков в конце каждой буквы). На устройствах с Windows его часто заменяют другими интересными (читай: более красивыми) шрифтами.
2. Times New RomanTimes New Roman для шрифтов с засечками то же самое, что Arial для без засечек.
Он является одним из самых популярных на устройствах Windows и представляет собой новый вариант старого шрифта Times.
3. TimesШрифт Times, вероятно, выглядит знакомо. Это старый газетный отпечаток, который вы привыкли видеть маленьким размером в узкие колонки. Это примерно так же традиционно, как и получается.
4. Courier NewCourier New, похожий на предыдущий Times New Roman, является разновидностью другой старой классики. Он также считается моноширинным шрифтом (в отличие от шрифта serif vs.без засечек мы только что видели).
5. CourierCourier — это старый монокосмический резервный сервер, доступный почти на всех устройствах и операционных системах.
6. VerdanaVerdana — настоящий веб-шрифт, потому что (1) — простые линии без засечек, а (2) — очень большой размер. Буквы почти вытянутые, что позволяет легко читать онлайн.
7. ДжорджияДжорджия похожа на Verdana по размеру и высоте (с более крупными буквами по сравнению со шрифтами того же размера).Поэтому, хотя он отлично подходит для определенных обстоятельств, избегайте сочетания этого шрифта с засечками с другими (например, Times New Roman), которые могут выглядеть незначительно по сравнению с ними.
8. ПалатиноИстория Палатино восходит к эпохе Возрождения. Шутки в сторону! Это еще один крупный шрифт, который делает его идеальным для Интернета, который традиционно используется для заголовков и рекламы в печатном стиле.
9. GaramondGaramond — еще один шрифт старой школы, восходящий к стилям Парижа 16 века.Эта новая и улучшенная версия была представлена и интегрирована на большинстве устройств Windows (и с тех пор была принята другими).
10. BookmanBookman (или Bookman в старом стиле) — еще один идеальный вариант заголовка, который сохраняет читаемость (или читаемость) даже при использовании небольшого размера.
11. Tahoma
Tahoma относится к шрифту без засечек. Он широко использовался как альтернатива Arial и был шрифтом по умолчанию в некоторых более ранних версиях Windows, таких как Windows 2000, Windows XP и Windows Server 2003.
12. Trebuchet MS
Trebuchet — еще один шрифт без засечек, получивший свое название в честь одноименной средневековой осадной машины. Он был выпущен в 1996 году и до сих пор остается одним из самых популярных шрифтов основного текста в Интернете.
13. Arial BlackArial Black — это большая, смелая и плохая версия вашего базового Arial. Как ни странно, он также имеет общие пропорции с Helvetica. Почему это важно? Чтобы они могли изначально использовать его для замены Helvetica и печати, не платя за лицензию.
14. ImpactImpact — еще один смелый вариант заголовка, который отлично смотрится в нескольких коротких словах, но совершенно ужасен в предложении или длиннее.
15. Comic Sans MSComic Sans MS — это забавная, причудливая альтернатива другим вариантам без засечек.
Тоже немного уныло. Но с другой стороны, это легкий шрифт для чтения людьми с дислексией.
ЗаключениеВеб-безопасные шрифты дают вам План Б.Резервный вариант, когда ваш первый вариант может не сработать.
Они широко доступны и доступны на большинстве устройств на протяжении десятилетий (в некоторых случаях).
Хотя не , но все из них являются победителями (Comic Sans MS), их достаточно для выбора, которые должны быть тесно связаны с вашим исходным вариантом.
Что будет, если нет? Вы не ошибетесь с Arial!
20 лучших шрифтов для веб-сайтов в 2021 году (бесплатные и платные)
Мы обращаемся к веб-дизайну, и специалистам по маркетингу, чтобы понять основные тенденции будущего.Ретро-гарнитуры. Объемные жирные буквы. Вариативные шрифты. С типографикой всегда происходит что-то новое.
Независимо от тенденций в области типографики, одно можно сказать наверняка: веб-дизайнерам нужен набор шрифтов, на которые они могут полагаться год за годом, веб-сайт за веб-сайтом.
К счастью, нам не нужно довольствоваться традиционными шрифтами, такими как Arial и Times New Roman, чтобы обеспечить удобный интерфейс. Помня о ключевых правилах веб-типографики , есть несколько невероятных шрифтов, которые являются сложными, креативными и уникальными, не жертвуя качеством чтения.
Мы составили список из 20 лучших шрифтов для веб-сайтов. Здесь вы найдете сочетание бесплатных и платных шрифтов, а также некоторые из лучших веб-шрифтов для оптимального взаимодействия с пользователем. Мы также рассмотрим, что такое веб-шрифты и почему это важный фактор, который необходимо учитывать при выборе правильных шрифтов для вашего веб-дизайна.
20 лучших шрифтов для веб-сайтов
Abril Fatface
Прощай
Andika
Arvo
Canela
- No.1
Хаттон
Лато
Линотип Дидот
Лора
Open Sans
Opposit
Proposit
Proxima Soft
Recoleta
Roboto
Romana
Voyage
Что такое веб-безопасные шрифты?
При выборе шрифта для вашего веб-сайта, как правило, цель состоит в том, чтобы использовать следующие шрифты:
Разборчивый,
Доступный,
Привлекательный,
Соответствующий,
И легкий .
Есть еще одна черта, о которой следует помнить, — это кроссбраузерность .
По мере роста числа устройств и браузеров, которые потребители используют для доступа в Интернет, мы рискуем представить посетителям веб-сайта непоследовательное или неполное «лицо». Это связано с тем, что, если шрифт не предварительно установлен в браузере или операционной системе, посетителям, скорее всего, будет показан резервный шрифт или шрифт по умолчанию.
Однако веб-шрифты (обычно) принимаются повсеместно.Таким образом, большинство ваших посетителей увидят шрифты, которые вы им предназначаете, гарантируя, что ваш веб-дизайн будет выглядеть так, как планировалось, в различных браузерах и устройствах.
В то время как варианты веб-безопасных шрифтов обычно включают такие как Courier, Helvetica и Georgia, есть более интересные и смелые варианты для работы. Вы найдете некоторые из них среди лучших шрифтов для веб-сайтов.
20 лучших шрифтов для веб-сайтов (бесплатные и платные)
1.
Abril FatfaceТип шрифта: Serif
Бесплатно / премиум: Бесплатно
Foundry or designer: Veronika Burian and Хосе Скальоне из TypeTogether
Предыстория: Abril Fatface — это бесплатный шрифт, который является частью гораздо более крупного семейства шрифтов премиум-класса под названием Abril.
Семейство шрифтов в целом было переосмыслением классического информационного интерфейса для современных читателей. Однако этот конкретный шрифт выделяется среди членов своего семейства из-за более тяжелых («жирных») символов. Это потому, что шрифт Abril Fontface был вдохновлен текстом заголовка, который использовался на рекламных плакатах в 1800-х годах.
Когда вам следует его использовать: Если вы ищете способ добавить яркости новостному сайту, цифровому журналу или блогу, это будет чистый, но надежный выбор шрифта для ваших заголовков.
2.
ПрощайТип шрифта: Расширенный без засечек
Бесплатно / премиум: Премиум Литейная мастерская или дизайнер: Кеннет Кнутсен для Good Type Foundry
Предыстория: Прощай, это так называемый расширенный шрифт. Это означает, что его символы очень широкие, что может заставить посетителей читать текст медленнее, чем обычно, что делает сообщение более запоминающимся.
Как довольно распространенный шрифт, Adieu обычно хорошо работает в логотипах и тексте заголовков веб-сайтов.Вдохновленные темами скорости и спорта, буквы отличаются высоким контрастом между толстыми и тонкими штрихами, создавая ощущение скорости.
Когда вам следует его использовать: Из-за ширины этого шрифта вы можете ожидать, что посетители будут читать ваши слова медленнее. Учитывая это, вам следует избегать использования этого шрифта для обычного текста абзаца и относить его только к своим заголовкам или логотипам.
3.
AndikaТип шрифта: Sans serif Бесплатно / премиум: Бесплатно Изготовитель или разработчик: SIL International
Предыстория: Andika — это шрифт, совместимый с Unicode, который был разработан для удобства чтения.Каждая буква имеет простой дизайн, и ее можно легко отличить от других букв, что позволяет избежать загромождения, которое может возникнуть при использовании шрифтов с засечками.
Andika имеет латинский и кириллический алфавиты.
Когда вам следует его использовать: Разработанный специально для начинающих читателей (т.е. детей и изучающих иностранный язык), Andika имеет и другие приложения. Согласно Accessibility and Usability в Penn State , он также полезен для посетителей веб-сайтов с нарушениями чтения, которым полезны веб-сайты с четкими и отчетливыми буквами.
4.
ArvoТип шрифта: Геометрический шрифт с засечками
Бесплатно / премиум: Бесплатно Литейное производство или дизайнер: Антон Коовит
Предыстория: Финское слово Arvo переводится как «число, ценность, ценность». Это имеет смысл, учитывая, что Arvo — это геометрический шрифт с плоскими засечками. Хотя шрифт имеет упорядоченный эстетический вид, тонкие штрихи придают ему немного преимуществ и выделяют его среди других шрифтов с засечками.Обратите внимание, например, на контраст, добавленный к цифрам, и небольшие дополнения к буквам «G», «c» и «s», которые отличают их от других букв.
Когда вам следует его использовать: Разработанный как для экрана, так и для печати, Arvo хорошо работает как дисплейный шрифт. Независимо от того, используете ли вы его для заголовка или основного текста, убедитесь, что геометрический стиль соответствует повествованию, которое сайт пытается рассказать.
5.
CanelaТип шрифта: Гибридный шрифт с засечками и без засечек
Бесплатно / премиум: Премиум Литейное производство или дизайнер: Miguel Reyes for Commercial Type
Предыстория: Canela — необычный шрифт, в котором используется гибридный подход.Благодаря классическому и современному дизайну типографики, а также соблюдению баланса между шрифтами с засечками и без засечек, полученный вид является уникальным и запоминающимся.
Когда вам следует его использовать: Шрифт впервые появился в журналах о моде и искусстве, поэтому есть что сказать об элегантном, но ультрасовременном стиле этого шрифта. Его поразительный вид делает его более подходящим для заголовков, а не для текста абзаца.
6.
Centra № 1Тип шрифта: Геометрический без засечек
Бесплатно / премиум: Премиум
Литейное производство или дизайнер: Джошуа Финкли и Лукас Шарп из Sharp Type
Фон : В отличие от других модернистских шрифтов из жанра геометрического без засечек, Centra No.1 имеет современную окраску, что отличает его от таких известных шрифтов, как Futura и Century Gothic. Его текстуры и углы придают ему большую глубину, чем эти классические шрифты в стиле Баухауса.
Семейство шрифтов имеет восемь различных толщин. Самый тяжелый из семейства — Centra No. 1 Black, который идеально подходит для логотипов и заголовков. Тем не менее, Centra No. 1 Hairline, самый тонкий из семейства, выглядит почти как другой шрифт, поскольку отсутствие толщины упрощает стилизацию символов и лучше всего подходит для основного содержимого.
Когда вам следует его использовать: Если вам нужен универсальный шрифт, который может украсить различные части веб-сайта и его брендинг, Centra No. 1 может многое предложить. И из-за его модернистских тенденций вы можете ожидать, что этот будет выносливым.
7.
HattonТип шрифта: Sans serif
Бесплатно / премиум: Premium
Foundry или дизайнер: Сотрудничество между Pangram Pangram Foundry и Two Times Elliot Studio
Фон: Хаттон-Гарден — старый ювелирный район Лондона (а также бывший район, где работала дизайнерская студия).Чтобы отдать дань уважения знаменитому ювелирному кварталу, дизайнеры наделили свои шрифты характеристиками, похожими на те, что можно найти в окрестностях, в виде вывесок и гравюр.
От сверхлегкого до черного цвета шрифта, вы обнаружите, что каждый из них излучает атмосферу ручной рендеринга.
Когда вам следует его использовать: Этот уникальный шрифт может придать индивидуальности любому веб-сайту, помогая создать отличный визуальный язык и выделить ваш бренд.
8.
LatoТип шрифта: Sans serif
Бесплатно / премиум: Бесплатно
Литейное производство или дизайнер: Лукаш Дзедзич из TyPoland, при поддержке Google
Фон: Lato изначально был разработан как фирменный шрифт для клиента, с которым работал дизайнер. Когда клиент передал его, дизайнер решил превратить его в общедоступный шрифт с открытым исходным кодом.
Дизайн передает ощущение гармонии и стабильности, что делает его чистым и ненавязчивым выбором, особенно при использовании в небольших размерах.При использовании для заголовков или другого более крупного текста выделяются тонкие характеристики. Неудивительно, что это третий по популярности шрифт Google .
Когда вы должны его использовать: Любой бизнес-сайт, который хочет казаться большим и заслуживающим доверия, выиграет от простоты и стабильности этого шрифта. Его нейтральность также позволяет легко сочетать его с другими, более сложными шрифтами.
9.
Linotype DidotТип шрифта: Serif
Бесплатно / премиум: Premium
Foundry или дизайнер: Firmin Didot (оригинальный дизайнер) и Adrian Frutiger для Linotype Studio and Foundry
Предыстория: Шрифт Didot получил свое название от известной семьи Didot, владевшей очень успешными типографиями и литейными цехами в Париже в 18-19 веках.Фактически, они были настолько успешными, что стали популярным принтером короля, а созданный ими шрифт Didot был использован в Вольтере La Henriade . Его современная версия также была использована для разработки «глазного» логотипа CBS.
С тех пор он был переработан для цифровых ридеров и теперь является веб-шрифтом.
Когда вы должны его использовать: Это отличный шрифт с засечками для цифровых публикаций и блогов, которые хотят позаимствовать немного старой элегантности и применить ее к своему собственному сообщению.
10.
LoraТип шрифта: Serif
Бесплатно / премиум: Бесплатно
Литейное производство или дизайнер: Cyreal
Фон: Lora может показаться вашим стандартным шрифтом с засечками, но его корни берут начало в каллиграфии. Если вы присмотритесь, то заметите нарисованные вручную кривые, которые контрастируют с засечками и придают этому шрифту более художественный вид.
Доступный в четырех вариантах толщины, этот шрифт хорошо подойдет для основной части ваших страниц.
Когда вы должны его использовать: Креативным брендам — будь то писатели, агентства, уникальные витрины или другой бизнес с вычурной атмосферой — понравится стиль этого шрифта.
11.
Open SansТип шрифта: Sans serif
Бесплатно / премиум: Бесплатно Литейное производство или дизайнер: Steve Matteson; по заказу Google
Предыстория: Open Sans основан на более раннем шрифте Google под названием Droid Sans, который был создан для смартфонов Android.Это немного более широкая версия этого шрифта, и его удобочитаемость была улучшена, поэтому он хорошо смотрится на всех экранах, даже в небольших размерах.
Не зря более 20 миллионов веб-сайтов используют этот шрифт, и это второй по популярности шрифт Google за все время.
Когда следует использовать: Это нейтральный шрифт. Если вы хотите, чтобы посетители любого типа чувствовали себя желанными гостями на вашем веб-сайте, этот простой и хорошо читаемый шрифт — разумный выбор.
12.
OppositТип шрифта: Sans serif
Бесплатно / премиум: Premium
Литейное производство или дизайнер: Кеннет Кнутсен для Good Type Foundry
Фон: В прямом противоречии с Большинство шрифтов без засечек Opposit состоит из доминирующих горизонтальных штрихов, которые толще вертикальных.Этот необычный, высококонтрастный подход делает шрифт привлекательным, который обязательно будет выделяться, где бы он ни использовался.
Когда вам следует его использовать: Если вы хотите создать нетрадиционный фирменный стиль, вы можете подумать о добавлении этого уникального шрифта в свой логотип и / или изображение главной страницы. Используя вместе с более нейтральным шрифтом, вы можете добиться правильного визуального баланса.
13.
OptimaТип шрифта: Sans serif roman
Бесплатно / премиум: Premium
Литейное производство или дизайнер: Hermann Zapf для Linotype
Фон: Optima — это веб- Безопасный шрифт, вдохновленный классическими римскими надписями, с некоторыми индивидуальными штрихами.В то время как шрифт в римском стиле имеет традиционный широкий и насыщенный набор символов, вы заметите такие отклонения, как наклоненная заглавная буква «S» и расширенная буква «M», среди прочего.
Это очень популярный шрифт с широким спектром приложений. Мемориал ветеранов Вьетнама, Estée Lauder и президентская кампания Джона Маккейна использовали его.
Когда вам следует его использовать: Сочетая в себе классический вид с чувством тепла и элегантности, Optima может быть хорошим выбором для определенных модных и косметических брендов или для других, которые имеют традиционный вид.
14.
ProphetТип шрифта: Sans serif
Бесплатно / премиум: Premium
Литейное производство или дизайнер: Йоханнес Брейер, Фабиан Харб и Эркин Карамемет для DINAMO Studio
Фон : Шрифт Prophet выделяется среди других шрифтов — с засечками или без засечек — своими нерегулярными сокращениями и изгибами, черпая вдохновение из мира более экспериментальной типографики . Он основан на другом шрифте под названием Georgina, разработанном Джозефом Черчвордом.
Когда вам следует его использовать: Из-за срезанных углов по краям этот шрифт, вероятно, будет лучше всего работать с более короткими фрагментами текста и более крупными шрифтами, например, в главных изображениях вашей домашней страницы.
15.
Proxima NovaТип шрифта: Sans serif
Бесплатно / премиум: Premium (подписка Creative Cloud)
Foundry или дизайнер: Mark Simonson of Mark Simonson Studio
Справочная информация : Proxima Nova в прошлом использовалась как Proxima Sans, семейство шрифтов гораздо меньшего размера, использовавшееся в 90-х годах.В наши дни дизайнер построил это семейство геометрических шрифтов, которое включает восемь начертаний, три ширины и курсивные аналоги, в общей сложности 48 шрифтов.
Это один из самых полных шрифтов, с которыми вы столкнетесь, поэтому неудивительно, насколько он популярен в Интернете.
Когда вам следует его использовать: Это универсальный шрифт без засечек, который имеет множество вариаций, которые можно адаптировать к вашему желанию. Вы реально можете использовать это где угодно, но имейте в виду, что это чрезвычайно популярно, поэтому вы рискуете почувствовать себя немного перегруженным.Однако это безопасный и надежный выбор, и его всегда можно сочетать с другим шрифтом, чтобы было интересно.
16.
Proxima SoftТип шрифта: Sans serif
Бесплатно / премиум: Premium (подписка Creative Cloud)
Литейное производство или дизайнер: Марк Симонсон из Mark Simonson Studio
Справочная информация : Дизайнер Proxima Nova решил, что необходима закругленная и более игривая версия Proxima Nova, и поэтому была создана Proxima Soft.Он поставляется с таким же обширным набором из 48 шрифтов и с поддержкой греческого и кириллического алфавитов.
Когда вам следует его использовать: Если вам нравится стиль Proxima Nova, но вы хотите что-то более мягкое и дружелюбное, вы можете использовать этот родственный шрифт.
17.
RecoletaТип шрифта: Serif
Бесплатно / премиум: Premium
Литейное производство или дизайнер: Хорхе Цистерна для Latinotype
Фон: Recoleta — это сборная солянка из популярных шрифтов из 70-х все в одном лице.Хотя это не обязательно похоже на то, что мы традиционно считаем «ретро» типографикой, вы можете сказать, что оно пришло из другого времени, но в современной интерпретации.
Всего в этом семействе 15 шрифтов, что дает вам некоторую гибкость в том, где и когда вы можете его использовать.
Когда вам следует его использовать: Благодаря своему ретро-происхождению, Recoleta может хорошо подойти тем брендам, которые хотят, чтобы клиенты возвращались к старым добрым временам и ценят нежное воспоминание о них с помощью этого шрифта.Однако в сочетании с современным дизайном Recoleta может выглядеть очень модно.
18.
RobotoТип шрифта: Sans serif
Бесплатно / премиум: Бесплатно
Литейное производство или дизайнер: Кристиан Робертсон; по заказу Google
Предыстория: Roboto — шрифт Google №1, с которым вы, скорее всего, будете сталкиваться каждый день, поскольку он является системным по умолчанию для всех устройств Android, а также для продуктов Google, таких как Google Images, Google Maps, Google Play и YouTube.
Поскольку его идентичность так скрыта в Google, мы могли бы легко описать его так же, как и Google: он чистый, упрощенный, современный и непритязательный.
Когда вы должны его использовать: Это невероятно легкий для чтения шрифт, и благодаря тому, что Google полагается на него, большинство потребителей уже привыкли к нему. Если ваш веб-сайт содержит много контента, который вы хотите, чтобы они прочитали, это может быть отличным выбором шрифта.
19.
RomanaТип шрифта: Serif roman
Бесплатно / премиум: Премиум
Литейное производство или дизайнер: Густав Шредер и Теофиль Бодуар; опубликовано Bitstream
Справочная информация: Romana — невероятно старый шрифт.Первоначально он был разработан во Франции в середине 19 века как попытка возродить старые римские шрифты. Затем он был адаптирован и расширен в конце 19 века.
Когда вам следует его использовать: Несмотря на то, что шрифт был модернизирован, этот шрифт все еще имеет старый и почти литературный вид. Вы захотите использовать этот шрифт для брендов, которые считают свой подход к бизнесу более традиционным и формальным.
20.
VoyageТип шрифта: Каллиграфический
Бесплатно / премиум: Премиум
Литейное производство или дизайнер: Джереми Шнайдер для VJ-Type
Предыстория: Voyage является одним из новейшие шрифты в этой подборке лучших шрифтов для веб-сайтов.Это также единственный по-настоящему каллиграфический шрифт в списке. Поскольку Voyage не слишком декоративен, как можно было бы ожидать от каллиграфического шрифта, он может хорошо вписаться в дизайн вашего веб-сайта, особенно при осторожном использовании в ограниченных случаях использования.
Voyage был создан, чтобы привнести приключенческий оттенок в большой шрифт на вашем сайте.
Когда его следует использовать: Это экранный шрифт, поэтому его лучше всего использовать в тексте заголовка, который должен сразу привлекать внимание посетителей.
Заключение
Хорошо подобранная типографика не только делает интерфейс более привлекательным, но и повышает удобство использования веб-сайта, поэтому внимание к тому, какие шрифты мы используем, продолжает расти из года в год.
Но только то, что вы должны быть осторожны с выбором шрифтов для своего веб-сайта, не означает, что вы не можете получать от этого удовольствие. Существует множество красивых и удобных шрифтов, которые могут укрепить идентичность вашего бренда и при этом обеспечить разборчивость. С этим списком лучших шрифтов для веб-сайтов у вас будет множество вариантов для начала.
Лучшие шрифты для обеспечения доступности веб-сайтов
Стиль шрифта является одним из наиболее важных факторов, влияющих на доступность дизайна веб-сайтов.Хотя программы чтения с экрана могут быть большим подспорьем в расшифровке текста для пользователей с ослабленным зрением, выбор шрифтов, которые легко читаются, с самого начала принесет пользу большему количеству пользователей.
Однако не всегда ясно, какие шрифты лучше всего подходят для доступа к содержимому веб-сайта. Итак, какие шрифты наиболее разборчивы и как лучше всего использовать их на веб-сайте?
Рекомендуемые шрифты
В настоящее время в разделе 508 Закона о реабилитации 1973 г. не указаны требования к выбору доступного шрифта для веб-сайта.Однако Министерство здравоохранения и социальных служб США неофициально рекомендует следующие шрифты для файлов PDF: Times New Roman, Verdana, Arial, Tahoma, Helvetica и Calibri.
Что общего у всех вышеперечисленных шрифтов? Во-первых, все они простые, простые и лишенные украшений, без лишних украшений или изюминок. Более того, они обычно автоматически устанавливаются на компьютеры. При прочих равных, дизайнеры всегда должны выбирать более популярный шрифт вместо менее популярной альтернативы.Это увеличит вероятность того, что компьютер пользователя сможет его отобразить.
Хотя шрифты с засечками обычно предпочтительнее для печатных материалов, таких как книги и газеты, для веб-сайтов справедливо обратное. Пропорционально «галочки» и «хвосты» шрифтов с засечками занимают больше места на экране, чем на печатной странице. В целом шрифты без засечек лучше отображаются на компьютерах и мобильных устройствах.
Прежде всего, избегайте декоративных или чрезмерно стилизованных шрифтов, которые часто трудно читать даже пользователям без нарушений зрения или нарушений чтения.
Дизайнеры, которые стремятся к максимальной разборчивости своих веб-сайтов, должны исследовать шрифты, созданные для читателей с дислексией или нарушениями зрения, такие как Read Regular, Lexie Readable и Tiresias.
Когда ничего не помогает, лучшим вариантом для доступного веб-сайта является популярный шрифт с чистым эстетическим оформлением без засечек. Некоторые из наиболее подходящих шрифтов в этом отношении — Arial, Helvetica, Lucida Sans, Tahoma и Verdana.
Другие особенности шрифтов для веб-сайтов
Выбор определенного стиля шрифта — это лишь одно из нескольких соображений для обеспечения доступности веб-сайта.В приведенных ниже рекомендациях предлагаются рекомендации по оптимальному отображению текста для максимальной доступности:
- По возможности текст веб-сайта должен быть написан как текст, а не как часть изображения или другой графики.
- Чтобы сделать текст более читабельным для дальтоников, ограничьте использование красного и зеленого и убедитесь, что цвет текста имеет высокий контраст с цветом фона.
- Чтобы улучшить доступность и разборчивость, а также избежать путаницы, веб-сайты должны использовать как можно меньше шрифтов.
- При выборе размера шрифта учитывайте ожидаемую аудиторию. Большинство веб-сайтов отображают абзацы и другой обычный текст размером от 12 до 14 пунктов, но его можно увеличить, чтобы улучшить читаемость для пользователей, которым требуется дополнительная помощь.
- Избегайте использования внешнего вида шрифта для передачи смысла. Полужирный и курсивный текст следует использовать только при необходимости, поскольку не все программы чтения с экрана информируют пользователей, когда текст выделен жирным шрифтом или курсивом.
Бесплатное сканирование веб-сайта
Хотите узнать, доступен ли ваш сайт? Запросите бесплатное сканирование веб-сайта.
Как выбрать лучший шрифт для своего сайта | Domain.com
Создание сайта — увлекательная задача.
Когда вы садитесь создавать веб-сайт, вы сталкиваетесь с миром возможностей.
Ваш веб-сайт так много может сделать для вас: увеличить продажи, расширить клиентскую базу, помочь вам в налаживании контактов, помочь вам в поиске работы или даже расширить круг читателей вашего блога. И это даже не охватывает всех преимуществ наличия веб-сайта.
Но если вы хотите максимально использовать возможности своего сайта и пожинать плоды, вам нужно внимательно и внимательно относиться к его планированию, дизайну и созданию.
На создание красивого и, самое главное, эффективного веб-сайта нужно многое. Мы понимаем, что может быть трудно увидеть помимо азарта от поиска идеального доменного имени и выбора подходящего конструктора веб-сайтов. Вот почему сегодня мы рассматриваем особенности дизайна сайта, о которых часто забывают: типографику и шрифт.
Типографика и шрифт могут не казаться важными элементами веб-дизайна — в конце концов, пока посетители вашего сайта получают необходимую им информацию, кого волнует, как выглядят буквы и как они представлены, верно? Неправильный.
Дьявол кроется в деталях, дорогой читатель. И эти две, казалось бы, мелкие детали, типографика и шрифт, могут улучшить или испортить ваш пользовательский опыт.
Что такое шрифт?
Шрифты— это «графическое представление текста, которое может включать другой шрифт, размер шрифта, толщину, цвет или дизайн».
Вы слышали о Times New Roman или Arial? Как насчет Calibri и Comic Sans MS? Даже если вы не знали их по имени, держим пари, что вы узнаете их в лицо.Все это примеры разных шрифтов.
Почему типы шрифтов имеют значение?
Успешные компании знают, что разные шрифты передают разные сообщения своей аудитории. Вот почему их нужно тщательно выбирать, никто не хочет случайно послать неверное сообщение своей клиентской базе. Мы готовы поспорить, что не существует компании из списка Fortune 100, которая не выбрала бы тщательно шрифт, который они используют для общения с клиентами.
Знаете ли вы, что Стива Джобса часто называют «дедушкой типографики»? Создавая свой первый Mac, он также разработал и создал десять различных шрифтов.Он понимал визуальную мощь написанного слова и стремился максимизировать ее с помощью новых, лучших шрифтов.
Хотя Стив Джобс не изобретал шрифты (это был скорее Иоганнес Гутенберг и его старый добрый печатный станок), он произвел революцию в мире цифровой типографики, предоставив нам множество шрифтов, которые позволили нам визуально выразить себя. До его появления одним из наиболее распространенных шрифтов был Digi Grotesk. Вот пример того, как это выглядит, от фаната Fonts.
Можете ли вы представить себе мир, в котором в Интернете в основном используется только один шрифт? На наш взгляд, это было бы довольно скучно.
Типы шрифтов
Существуют тысячи и тысячи различных шрифтов, но это не значит, что все они подходят для веб-дизайна. Фактически, вы захотите убедиться, что шрифт, который вы выбираете для своего веб-сайта, безопасен для Интернета.
Веб-безопасные шрифты легко читаются множеством различных интернет-браузеров. Если вы не используете безопасный для Интернета шрифт, скорее всего, он может отображаться в чужом браузере по-другому, чем в вашем собственном.
Различные шрифты вызывают у читателя разные чувства, поэтому давайте взглянем на некоторые общие семейства шрифтов, которые вы, вероятно, узнаете.Мы не рекомендуем использовать на своем сайте слишком много разных шрифтов, так как это может выглядеть загруженным и беспорядочным.
Шрифты с засечками
Шрифты с засечками или гарнитуры выделяются декоративной обводкой на конце букв (как по горизонтали, так и по вертикали).
Популярные шрифты, такие как Georgia, Century и Times New Roman, — это Serif. Это два очень известных шрифта, и вы не ошибетесь, используя их. Они безопасны для Интернета и легко читаются.
Шрифтыс засечками обычно используются для придания вашему веб-сайту изысканного формального тона.
Шрифты без шрифта
ШрифтыSans отличаются от шрифтов с засечками тем, что буквы не имеют засечек или декоративных штрихов. Знаете ли вы, что «без» по-французски означает «без»?
Эти буквы без украшений, поэтому они четкие, современные и чистые. Скорее всего, вы узнаете такие шрифты, как Helvetica, Verdana или Lucida Sans.
Если ваш сайт должен быть современным и понятным, попробуйте использовать шрифт Sans вместо Serif.
Выбор шрифтов для вашего сайта.
Теперь, когда вы знаете, какие шрифты следует использовать для своего веб-сайта и почему они так важны, пора подумать о количестве шрифтов, которые следует использовать на своем сайте.
Мы рекомендуем для начала выбрать три шрифта: основной шрифт, дополнительный шрифт и третичный шрифт.
Большую часть времени следует использовать основной шрифт. Вспомогательные и третичные шрифты поддерживают и предназначены для улучшения или выделения определенных элементов на вашем сайте.
Ознакомьтесь с этим визуальным руководством по типографике от Canva, чтобы увидеть, как ваши шрифты действительно могут выглядеть на вашем сайте, и сообщите нам, какие шрифты вы выбрали для использования в комментариях!
33 лучших веб-шрифта (и веб-шрифтов) для вашего веб-сайта
После долгих и изнурительных поисков лучших веб-шрифтов и веб-шрифтов для вашего бренда вы наконец-то нашли идеальный: это Comic Sans.Но увы! Comic Sans — это тоже идеально! Ваши посетители будут настолько заняты восхищением изящной красотой Comic Sans, что не обратят внимания на то, что вы на самом деле говорите. Какие еще шрифты могут сделать ваш сайт потрясающим, не украшая при этом всю славу?
Чтобы помочь вам найти подходящие шрифты для своего веб-сайта, мы собрали все лучшие веб-шрифты и лучшие веб-шрифты, которые вы можете использовать в своей работе.
Веб-шрифты и веб-безопасные шрифты: в чем разница?
–
Прежде чем мы начнем, давайте проясним небольшую терминологию.В чем разница между шрифтами, уже установленными на вашем устройстве, и теми, которые вам нужно скачать? Один известен как «веб-шрифт», а другой — «веб-шрифт»:
- Веб-безопасные шрифты: также известны как «системные шрифты» или «шрифты браузера». веб-безопасных шрифтов — это шрифты, установленные на всех устройствах и браузерах.
- Веб-шрифты: хотя и нечеткие, веб-шрифтов относятся ко всем шрифтам, которые не являются веб-безопасными шрифтами , особенно коммерческими и независимо разработанными шрифтами.
Таким образом, веб-безопасные шрифты являются наиболее распространенными, доступными в Windows или Mac, Chrome или Safari. Таким образом, веб-шрифты не так легко доступны, и обычно вам приходится загружать и устанавливать их сами.
Иллюстрация OrangeCrushКакой из них следует использовать в веб-дизайне?
У обоих есть свои преимущества и недостатки.
Для веб-дизайна, который является средой, рассматриваемой в этой статье, главное преимущество веб-безопасных шрифтов заключается в том, что они загружаются быстрее, что сокращает время, необходимое для загрузки вашего сайта.Это не большая разница, но если вы хотите сократить каждую потерянную миллисекунду, они имеют значение.
Обратной стороной веб-безопасных шрифтов является то, что они универсальны. В них нет ничего уникального или оригинального — они доступны буквально каждому. Если вам нужен стиль или артистизм, вам придется использовать другой веб-шрифт.
Веб-шрифты отличаются гораздо большим разнообразием; это набор шрифтов, которые постоянно добавляются и расширяются. Вы можете получить лучшие веб-шрифты для своего бренда, специально разработанные на основе того, что вы ищете, или вы можете лицензировать уже существующий онлайн в центре шрифтов.Главное их достоинство — это, конечно же, оригинальность. Если вам нужен выделяющийся шрифт, веб-шрифты его не подберут.
Если у вас возникли проблемы с принятием решения, воспользуйтесь этой полезной блок-схемой от Дэвида Гилбертсона из Hackernoon (имейте в виду, что он использует «системные шрифты» в значении «веб-безопасные шрифты»).
Через Hackernoon.А как насчет индивидуальной эстетики шрифта?
Но выбор между лучшими веб-шрифтами и лучшими веб-шрифтами — не единственное ваше решение. Вы также должны решить, какой стиль типографики подойдет вашему бренду и функциям сайта.Различные шрифты лучше подходят для длинных блоков текста, чем для привлекающих внимание заголовков, не говоря уже о том, как они влияют на восприятие вашего бренда.
В этом руководстве мы разбиваем их все на три категории, основанные на эстетике шрифта: с засечками, без засечек и декоративные. Для тех, кто не знает, засечки — это те маленькие метки или «флажки», которые иногда появляются на концах букв. Мы объясним рекомендуемое использование каждого из них ниже, а также то, как они отражаются на идентичности вашего бренда.
Узнайте, как выбрать правильную типографику для своего веб-сайта, в нашем подробном руководстве по выбору шрифтов для веб-дизайна.
Когда использовать шрифты с засечками в веб-дизайне
—
Засечки имеют долгую историю в типографике. Но если вы ищете шрифты для веб-сайтов, все, что вам нужно знать, это то, что засечки относятся к «серьезной» стороне спектра. Это делает их отличными для профессиональных и официальных брендов, но немного противоречивыми для дружелюбных и повседневных брендов, если они не настроены соответствующим образом.
Ищете ли вы лучший веб-шрифт или веб-шрифт, засечки лучше всего подходят для брендов, которые хотят подчеркнуть авторитет, изысканность и класс. У них классическая привлекательность из истории, поэтому они хорошо работают с брендами, которые существуют уже давно, или брендами, которые хотят, чтобы выглядел таким образом. Компромисс заключается в том, что шрифты с засечками могут восприниматься как серьезные, возможно, излишне формальные, поэтому, если вы используете их, они должны работать с ценностями вашего бренда, чтобы не оттолкнуть целевую аудиторию.
Также стоит отметить, что шрифты с засечками удобны для чтения, поэтому их часто используют для основного текста, заголовков и подзаголовков. Это не значит, что шрифты без засечек плохо читаются; они отлично подходят для длинных блоков текста. Но есть причина, по которой высококлассные издания, такие как The New York Times и Boston Globe , по-прежнему используют веб-шрифты с засечками для своих цифровых статей. И, не случайно, обе эти газеты склоняются к «формальному» и «классическому» стилям брендинга, продвигая при этом длинный текст.
Размер и стиль шрифтов с засечками также имеют решающее значение. Крупные и яркие засечки сделают ваш шрифт более стилизованным, а в крайних случаях — более ярким и профессиональным. Точно так же более мелкие и крошечные засечки менее формальны — идеально, если вы ищете золотую середину между «серьезным» и «забавным».
Лучшие веб-шрифты с засечками:
Баскервиль
Дом для любителей истории, Баскервиль был спроектирован Джоном Баскервилем в 1750-х годах. Это прочный, популярный шрифт с засечками, многообещающий, с отличным характером и удобочитаемостью.
Камбрия
Cambria был разработан специально для чтения на экране. Его интервалы и пропорции особенно ровные, поэтому он будет отличным вариантом для сайтов с большим объемом текста, таких как блог.
Курьер
Кажется, будто он снят прямо с пишущей машинки на ваш компьютер, Courier привносит ретро-стиль и удобочитаемость вашей копии.
Дидо
Вы можете узнать это по заголовку Vogue, украшающему обложки их журналов. Didot фигуристая, стильная, она восходит к концу 1700-х годов; это вне времени.
Гарамонд
Возможно, самый необычный из этой группы веб-шрифтов с засечками, Garamond является фаворитом дизайнеров. Имейте в виду, что этот шрифт лучше всего подходит для печати — он отлично подходит для дизайна с большим количеством текста, поскольку его пропорции приятны для глаз.
Times New Roman
Всегда серьезный, всегда прямой, Times New Roman действительно хорошо работает с фактическим, формальным содержанием, таким как академический текст или шрифт, выбранный юридической фирмой для текста.
Лучшие веб-шрифты с засечками:
Одежда
По латинотипу.Загрузите его здесь.Apparel выглядит так, как будто мне принадлежит журнальный столик, он такой стильный и минималистичный. Он подойдет для фирменной копии аналогичной эстетики, так что, возможно, если вы запускаете модный или интерьерный бренд, это могло бы отлично сработать в вашем руководстве по стилю.
Изготовлено литейным заводом atipo. Загрузите его здесь.Это великолепный заголовочный шрифт, он хорошо сочетается с минималистичным эстетическим и высококачественным или роскошным продуктом. Это может сработать, если вы представите рецепты в новой кулинарной книге, на веб-сайте престижного салона или разместите вашу последнюю фотосессию в онлайн-портфолио.
Богарт
Автор: Zetafonts. Загрузите его здесь.Bogart — это плавный, ностальгический и инновационный шрифт для заголовков, который был разработан в 2020 году. Он обладает особой индивидуальностью, чтобы привлечь внимание аудитории к дизайну упаковки продуктов или обложек книг.
Гивены
Автор Craft Supply Co. Загрузите его здесь.Прочтите между буквами: следует ценить интервалы шрифта Giveny. Наряду с упрощенной структурой письма, Giveny может похвастаться доступностью и хорошо подойдет для дизайнов с короткими впечатляющими копиями, такими как плакаты, баннеры или визитки.
Хуана
По латинотипу. Загрузите его здесь.Хуана противопоставляет толстые и тонкие мазки, изгибы и края. На него приятно смотреть, и он поможет отличить бренды от конкурентов по дизайну логотипов, редакционным статьям журналов и целевым страницам.
Майя
Автор Creativetacos. Загрузите его здесь.Еще одно универсальное число, очаровательная Майя может работать в разных средах для правильного бренда. Он хорошо сочетается с минималистичным эстетическим вкусом и высококачественным продуктом или услугой.
Когда использовать шрифты без засечек в веб-дизайне
— Шрифты
без засечек — полная противоположность шрифтов с засечками как по форме, так и по тому, как они воспринимаются зрителем. В данном случае без засечек буквально означает «без засечек», поэтому все шрифты без засечек — это шрифты без засечек.
Как вы понимаете, шрифты без засечек более просты и беззаботны. Они не выглядят так, как шрифты с засечками. Гротески — это шрифты для дружеской беседы и неформальных сообщений, напоминающие простой почерк.Они созданы для скорости и простоты, возможно, за счет приличия.
Шрифтыбез засечек лучше всего подходят для веб-сайтов, которые хотят показать своим посетителям, что «мы такие же, как вы». Они непринужденные и непринужденные, идеально подходят для учебных материалов, цифровых публикаций или блогов. Если вы много шутите или используете смайлики в своих письмах, шрифт без засечек теоретически подойдет лучше всего.
По той же причине шрифты без засечек являются предпочтительным выбором для неформального и дополнительного текста: подписей к изображениям, публикаций в социальных сетях, подписей, заявлений об отказе от ответственности и веб-рекламы.Шрифты без засечек лучше работают в тексте, когда чтение выполняется быстро и без срочности, поэтому важно понимать, как ваша целевая аудитория потребляет тип контента, который вы хотите создать, прежде чем выбирать, может ли это быть лучший веб-шрифт (или безопасный для Интернета). font) для вас.
Лучшие веб-безопасные шрифты без засечек:
Arial
Arial, на мой взгляд, отличный веб-шрифт без излишеств без засечек. Он универсален для разных отраслей и обеспечивает отличную читаемость, поскольку был разработан в первую очередь для цифрового использования.
Калибри
Неформальный, простой и приятный, Calibri почти разговорчивый. Отличный выбор, если вы хотите по-настоящему общаться со своим читателем на дружеском уровне.
Dejavu Sans
Повседневный и легкий для чтения, Dejavu Sans сияет беззаботным текстом. Это также может сделать технический контент более доступным, так что это может быть хорошо, если вы представляете финансовый бренд, ориентированный на потребителей.
Женева
Женева известна своим гротескным стилем. Он немного узкий и излюбленный для крупных брендов, таких как Facebook и Apple (компания, из которой он создан).
Helvetica
Helvetica отличается удобочитаемостью. Некоторые считают, что это самый популярный современный шрифт, который долгое время считался «безопасным» для отображения больших объемов текста.
Лучшие веб-шрифты без засечек:
Девант Про
Автор Webhance Studio. Загрузите его здесь.Devant Pro почти переливается по характеру. Такое ощущение, что он только что выпрыгнул из постера фильма 60-х годов — отличный вариант для современных брендов, желающих развивать свой собственный стиль.
Графтон
Изготовлено Zeune Type Foundry. Загрузите его здесь.Еще одно выражение гротескного движения — Grafton — дружелюбный, неформальный и отличный претендент на дополнение к текстовому дизайну в заголовке.
IBM Plex Sans
Автор: Майк Эббинк и смелый понедельник. Загрузите его здесь.IBM Plex Sans был разработан, чтобы показать отношения между машиной и человечеством. Результат произвольный, но дружелюбный — используйте, чтобы придать вашему бренду более гуманистический вид.
Italico
Антонио Филиньо.Загрузите его здесь.Italico для меня кричит о современной, минималистичной и экологичной упаковке продуктов. Он харизматичный, оригинальный и вызывает доверие потребителей.
Монолит
Автор: Unio. Загрузите его здесь.Важным преимуществом Monolith является то, что он имеет полные многоязычные возможности. У него есть легкая и обычная версии, и, если вы спросите меня, это довольно круто.
TT Norms Pro
По TypeType. Загрузите его здесь.TT Norms Pro — лидер среди геометрических шрифтов. Его простота и удобочитаемость означает, что он довольно универсален для разных носителей и типов копий.
Когда использовать декоративные шрифты в веб-дизайне
—
Наконец, у нас есть декоративные шрифты, которые могут быть шрифтами с засечками или без засечек. Они также могут быть лучшим веб-шрифтом или веб-безопасным шрифтом для ваших заголовков и заголовков. Декоративные гарнитуры имеют богатый дизайн; они должны быть художественными или стилистическими, с большим упором на то, как они выглядят, чем на то, что они говорят. Хотя большая часть типографики предназначена для функциональности, эти шрифты предназначены для зрелища.
Декоративные шрифты лучше всего подходят для выделения и акцента, например.грамм. заголовки, выделенные цитаты или заголовки статей. Они — вишенка на торте, поэтому используйте их экономно и для драматического эффекта. Они добавляют индивидуальности, юмора и креативности, только не переусердствуйте. Думайте об этом как о добавлении соли в готовку и избегайте подавления вкуса аудитории. Это означает, что они не подойдут для длинных блоков текста или подписей к изображениям. Ни для контактной информации вашего бренда, ни для текста в вашем нижнем колонтитуле.
Поскольку декоративные веб-шрифты подходят для всех стилей и индивидуальностей, они отлично работают в сочетании с более простыми шрифтами с засечками или без засечек.Но никогда не жертвуйте удобочитаемостью ради внешнего вида. Декоративные шрифты — это только развлечение, пока читатель не сможет понять, о чем они должны говорить.
Лучшие декоративные веб-безопасные шрифты:
Брэдли Хэнд
Bradley Hand довольно привередлив к тексту, но он добавляет индивидуальности любому короткому заголовку или заголовку.
Кисть Script M7
Brush Script M7 напоминает о стационарных наклейках и наклейках на бампер. Он яркий, креативный и добавляет индивидуальности вашему бренду.
Медная пластина
Copperplate хорошо работает со стационарными изделиями и брендами; он добавляет нотку причудливого характера к сдержанному дизайну.
Luminari
Великолепно готический, Luminari освещает любую страницу, которую он украшает. Средневековый, магнетический и нишевый.
Монако
Монако, фаворит в программировании, идет рука об руку с темным режимом. Отлично подходит для упоминания игровых или технических субкультур в работе.
Лучшие декоративные веб-шрифты:
Адмара
Автор Фарас.Загрузите его здесь.Цифровая альтернатива почерку, Адмара добавляет интимности, но не самый доступный. На самом деле он разрешен только для личного использования, поэтому не подходит для коммерческих материалов.
Даниэль Подпись
Автор Rometheme. Загрузите его здесь.Danielle Signature — элегантный, индивидуальный и ароматный. Это был бы отличный вариант логотипа для независимого розничного бренда.
Hypologic
Автор Kreafolk. Загрузите его здесь.Каждый раз, когда я вижу какой-либо текст в Hypologic, я представляю, как он светится неоновым светом.Это универсальный, современный и актуальный вариант для добавления изюминки в вывески и настенные дисплеи.
Уортон
Автор Сердарибут. Загрузите его здесь.Длинные изгибы и нежный мазок делают Warton романтичным. Подойдет для свадебных приглашений, заголовков или логотипов для малых предприятий с очень специфической аудиторией.
Чудо-ночь
Автор: Artefak Project. Загрузите его здесь.Чудесный, нестандартный и веселый! Wonder night отлично подходит для брендов, ориентированных на более молодую аудиторию, возможно, где текстовые тексты короткие.Это может быть отличным инструментом для оживления образовательного текста!
Или вы можете просто использовать Comic Sans
—
Выбор веб-шрифта для вашего веб-сайта — важное решение, которое влияет как на то, как посетители используют ваш сайт, так и на то, как они воспринимают ваш бренд. Чтобы быть уникальным и завоевать авторитет в своем веб-дизайне, часто нужно найти лучший веб-шрифт, а не лучший веб-шрифт. Применение правильного шрифта в правильных местах влияет на то, какие элементы будут видны в первую очередь, а при стратегическом использовании может увеличить конверсию, время пребывания на сайте и многие другие бизнес-цели.
Если это решение кажется слишком сложным, вы всегда можете просто использовать Comic Sans. В конце концов, какая вам польза от смертных, если вы можете ходить среди богов?
Нужна помощь в разработке вашего сайта?
Наше сообщество талантливых дизайнеров всегда готово помочь.
Почему типографика так важна для дизайна вашего веб-сайта
Что такое типографика в веб-дизайне?
Так что же такое типографика в веб-дизайне?
Проще говоря, типографика описывает креативный дизайн текста на ваших веб-страницах.
Включает такие стилизованные элементы, как буквенное оформление, кернинг и интерлиньяж.
Хотя мы часто не задумываемся о том, какие шрифты используются нашими любимыми брендами, шрифты, которые мы выбираем, делают гораздо больше, чем просто доносят тщательно продуманную рекламу бренда, они вызывают сильную эмоциональную реакцию.
Почему важен шрифт и выбор шрифта
Причина, по которой шрифт и выбор шрифта так важны для вашего бренда или компании, заключается в том, что вы хотите, чтобы ваши шрифты вызывали положительные эмоции и в то же время обеспечивали удобство чтения.
С учетом этих двух критериев, определяющих ваш выбор шрифта, а также подборку шрифтов, давайте обсудим некоторые другие важные факторы, которые вы захотите учесть.
Помимо учета эмоций и удобочитаемости шрифта, следующий фактор, который следует учитывать при выборе шрифтов, — это ваша отрасль.
Почему ваша отрасль так важна? От него будет зависеть, выберете ли вы веселый повседневный шрифт или более серьезный и профессиональный.
Если вы профессиональная ИТ-компания, вы можете выбрать современный, более профессиональный шрифт.Если вы работаете в интернет-магазине, ориентированном на подростков, непринужденный веселый шрифт может идеально соответствовать имиджу вашего бренда.
Получите оценку своего сайта, воспользуйтесь нашим калькулятором стоимости сайта, проведите SEO-аудит и многое другое с помощью наших бесплатных инструментов!
Попробовать бесплатно
Веселые и профессиональные шрифты
Давайте рассмотрим несколько примеров, которые помогут передать значение забавного шрифта по сравнению с профессиональным шрифтом, которые помогут вам в принятии решения.
Возьмем, к примеру, логотип Pinterest — это более простой скриптовый шрифт, который передает дружелюбие и веселье, а это идеальные эмоции, которые сайт закрепления изображений, вероятно, хочет вызвать у своей, в основном, женской, творческой аудитории.
Теперь давайте взглянем на логотип более серьезной компании, такой как следующая компания, предоставляющая управляемые ИТ-услуги, как упоминалось ранее.
Эта компания использует более простой, современный шрифт, который вызывает меньше эмоций и передает более профессиональный тон, что идеально подходит для компании, предоставляющей услуги под управлением ИТ.
Теперь, когда мы рассмотрели то, что некоторые сочтут обычным шрифтом в сравнении с профессиональным веб-шрифтом, давайте рассмотрим, что еще должно включать в себя руководство по вашему бренду — сочетание шрифтов и примеры или сценарии, в которых эти шрифты следует использовать.Часто компании используют два или три шрифта на своем веб-сайте.
Работаете над созданием собственного веб-сайта? Обязательно следуйте этим 5 правилам и передовым практикам.
Подробнее
Создание пары визуально привлекательных шрифтов для вашего веб-сайта
Вам может быть интересно, зачем вам нужно более одного шрифта для вашего бренда и веб-сайта.
И он может вам не понадобиться, в зависимости от вашей отрасли или если ваш веб-сайт и маркетинговые материалы больше ориентированы на изображение, чем на текст, например, на интернет-магазине, который фокусируется на изображении продукта, а не на описании.
Но добавление второго шрифта часто помогает обеспечить визуальные подсказки о том, какую информацию предлагает текст, и облегчить чтение.
В случаях, когда используются два шрифта, компании обычно используют один шрифт для заголовков, а другой — для основного текста.
В приведенном здесь примере заголовок использует шрифт с засечками, а основной текст или абзац под заголовком — шрифт без засечек.
Если используется третий шрифт, его можно использовать в подзаголовках или в кнопке CTA (призыв к действию), чтобы визуально указать читателю, что есть ссылка на дополнительную информацию.
По сути, используя разные шрифты, вы можете сделать страницы с большим количеством копий более привлекательными и читабельными, и это просто результат хорошей типографики.
Итак, с чего начать при выборе сочетания шрифтов?
Хорошая новость в том, что существует простое практическое правило, когда дело касается шрифта, который может помочь вам в принятии решения; выберите шрифт с засечками и без засечек.
Шрифт без засечек — это шрифт без засечек, которые представляют собой штрих, добавляемый к каждому символу или числу.
Чтобы помочь продемонстрировать, что такое штрих и как отличить шрифт с засечками от шрифта без засечек, сайт fontpair.co объединяет шрифты вместе.
Как вы понимаете, в тех случаях, когда у вас много копий, хорошее сочетание шрифтов улучшает читаемость и обеспечивает визуальную подсказку для типа информации, содержащейся в тексте.
Если вы не знаете, с чего начать, ваш графический дизайнер или фирма, с которой вы работаете, могут помочь в этой области, дав несколько рекомендаций.
Ваш веб-сайт устарел, уродлив или сложен в использовании? Сотрудничайте с нами и подготовьте свой бизнес-сайт к 2019 году и далее.
Узнать больше
Ресурсы, которые помогут вам выбрать правильную типографику
Если вам удобнее провести какое-то исследование самостоятельно, этот пост от Visme — отличное место для начала.
Они предоставляют несколько изображений, которые играют с различными комбинациями шрифтов, толщиной шрифта, которая относится к толщине или полужирности букв, или размерам.
Если вы больше визуальный человек, вот пара других замечательных ресурсов, которые помогут вам начать работу:
Font Squirrel — отличный сайт, который вы можете посетить, чтобы загрузить нужные шрифты или выполнить поиск шрифтов на основе общих дескрипторов поиска, таких как гранж или элегантный. Вы также можете посмотреть такие категории, как «что нового» или «популярное», которые тоже стоит проверить, потому что всегда есть модные, новые или популярные шрифты для определенных отраслей.
Google Fonts — еще одно отличное место для начала, которое позволяет выполнять поиск по таким критериям, как serif, sans serif или рукописный ввод.Он обеспечивает визуальное отображение каждого шрифта, включая то, как каждый шрифт выглядит в абзаце, в алфавите или в виде цифр. Вы можете выбрать несколько шрифтов, которые вам нравятся, и просмотреть их вместе.
Вкратце
Выбранные шрифты важны для поддержки имиджа вашего бренда, читабельности вашего веб-сайта и предоставления визуальных подсказок в тексте.
Если вы не знаете, с чего начать, ознакомьтесь с некоторыми из ваших конкурентов или позвоните нам в AWEBCO.
Мы не только великие веб-дизайнеры из Иллинойса, мы любим делиться своей страстью к дизайну и типографике.
Мы будем рады помочь вам в выборе цветовой палитры и шрифтов для вашего веб-сайта.
Часто задаваемые вопросы о типографике в Интернете
✒️ Что такое типографика в веб-дизайне?
Типографика просто описывает креативный дизайн текста на ваших веб-страницах. Это включает в себя выбранные вами пары шрифтов, а также стилизованные аспекты, такие как дизайн букв, кернинг и интерлиньяж.
???? Почему важен шрифт и выбор шрифта?
Гарнитура и выбор шрифта важны для вашего бренда или компании, поскольку они вызывают положительные эмоции и в то же время обеспечивают удобство чтения.Отрасль, в которой вы работаете, также должна влиять на ваш выбор шрифта, а также на вашу целевую аудиторию.
???? Сколько шрифтов вы должны использовать на своем веб-сайте?
Как правило, на веб-сайтах (или почти в любой публикации) вы захотите использовать не более 3 шрифтов. Дальнейшее загромождение веб-сайта сделает его более трудным для чтения и затруднит обнаружение ваших призывов к действию. Использование курсива и полужирного шрифта также добавляет разнообразия к выбору шрифтов.
???? Какие существуют классификации шрифтов?
Существует 5 основных классификаций гарнитур:
- Serif — завершающий штрих на концах букв в некоторых гарнитурах (Times New Roman, Georgia, Garamond, Century и т. Д.)
- Sans-Serif — противоположность шрифту с засечками; НЕ имеет завершающего штриха на концах букв на гарнитурах (Arial, Helvetica, Geneva, Product Sans и т. д.)
- Script — Гарнитуры, имитирующие естественный почерк и курсив, обычно используемые для демонстрационной или торговой печати (Alex Brush, Pacifico, Allura и т. Д.)
- Моноширинный — Каждая буква моноширинного шрифта занимает одинаковое количество места на горизонтальной строке текста (Courier, New Courier, Lucida Console и т. Д.)
- Дисплей — Гарнитуры дисплея разработаны и предназначены для использования в больших размерах, таких как заголовки, вместо текста абзаца (Stencil, Rosewood, Magneto, Collegiate и т. Д.)
Awebco — агентство по дизайну и развитию веб-сайтов, базирующееся в Данвилле, штат Иллинойс.Основанная в 2015 году, Awebco продолжает обслуживать местные и национальные компании в США. Наша миссия — помочь владельцам бизнеса избавиться от необходимости создавать и поддерживать свой веб-сайт, наняв нас, чтобы мы сделали это за них.
22 лучших веб-безопасных шрифта для использования на вашем веб-сайте
Независимо от того, являетесь ли вы начинающим профессиональным веб-дизайнером или создателем бизнес-сайтов своими руками, вы, возможно, встречали термин «безопасные веб-шрифты». Это важный элемент любого успешного дизайна, но поиск и использование лучших шрифтов для Интернета может быть сложной задачей.
К счастью, веб-безопасные шрифты легче получить и встроить в ваш веб-сайт, чем вы думаете. Они не только обеспечивают согласованность вашего брендинга, но и предоставляют преимущества с точки зрения пользовательского опыта (UX) и поисковой оптимизации (SEO).
В этой статье рассказывается, что такое безопасные веб-шрифты и почему они важны с точки зрения веб-дизайна. Затем мы поделимся некоторыми популярными примерами, ресурсами, где вы можете их приобрести, и инструкциями по их использованию. Не стесняйтесь использовать ссылки ниже, чтобы перейти к наиболее интересному разделу.
Есть много чего рассказать, так что приступим!
Введение в веб-безопасные шрифты (и почему они имеют значение)
Веб-безопасный шрифт — это просто шрифт, который можно просматривать на большинстве устройств, включая настольные и мобильные. Обычно они предустановлены в каждой операционной системе (ОС).
Это важно, потому что, если посетитель пытается просмотреть ваш веб-сайт и он использует шрифт, который не установлен на его устройстве, вместо этого он увидит общий шрифт, такой как Arial или Times New Roman.В некоторых случаях ваш контент может даже стать нечитаемым на определенных устройствах.
Конечно, последняя ситуация нежелательна, поскольку пользователи обычно не задерживаются, если не могут прочитать ваш сайт. Однако даже необходимость отображать общее семейство шрифтов может нарушить общий дизайн вашего сайта. Это также может привести к несоответствиям в вашем брендинге.
В некоторых случаях использование безопасных веб-шрифтов может сократить время загрузки ваших страниц. Поскольку они предустановлены в большинстве популярных операционных систем, современным браузерам не нужно загружать их с вашего сервера во время рендеринга вашего сайта.Это может улучшить как UX, так и SEO.
Не можете выбрать конкретный шрифт?
Не волнуйтесь; когда вы сотрудничаете с DreamHost, вы получаете бесплатный доступ к WP Website Builder и более чем 200+ отраслевым стартовым сайтам!
22 лучших веб-безопасных шрифта для использования на вашем веб-сайте
К счастью, существует множество различных веб-шрифтов, из которых вы можете выбирать при разработке своего сайта. Найти тот, который соответствует тону и индивидуальности вашего бренда, не должно быть сложной задачей.
Чтобы дать вам фору, мы собрали для вас несколько популярных вариантов. Начнем с основ, а затем рассмотрим еще несколько уникальных вариантов.
1. ArialМногие дизайнеры считают Arial простым или скучным, но вы не можете отрицать, что это проверенный и надежный веб-шрифт. Это идеально подходит для использования в качестве запасного варианта для более необычного (и не всегда доступного) шрифта. Кроме того, он очень разборчивый.
2. Times New RomanЕсли вы цените надежность и простоту Arial, но предпочитаете шрифт с засечками, вам подойдет Times New Roman.Хотя ему также не хватает индивидуальности, вы можете быть уверены, что его можно будет просматривать на любом устройстве.
Связано: ваш набор шрифтов может повысить коэффициент конверсии вашего сайта
3. HelveticaHelvetica — это шрифт без засечек, который многие предпочитают в качестве альтернативы Arial. Он специально разработан, чтобы быть трудолюбивым и лишенным индивидуальности, что делает его полезным для документации или другого простого контента, который вы хотите сделать читабельным.
4. КалибриCalibri — еще один базовый шрифт без засечек, похожий на Helvetica и Arial. Уже несколько лет он является шрифтом по умолчанию для Microsoft Office и является отличным выбором для современных предприятий и сайтов электронной коммерции. Используя скромный ненавязчивый шрифт, вы сможете привлечь больше внимания к своим товарам и услугам.
Связано: 11 способов, которыми ваш интернет-магазин может конкурировать с мега-ритейлерами и побеждать
5. ГрузияШикарная Джорджия с засечками выглядит неподвластной времени, которая добавляет тональности и стиля вашему веб-сайту, не перегружая его дизайн.Он идеально подходит для блогов, посвященных образу жизни, и для брендов, которые хотят выглядеть более мягко и не слишком резко.
6. КамбрияКамбрия похожа на Грузию, но с немного более современной интерпретацией. Его засечки немного более тонкие, что может облегчить чтение, особенно на небольших экранах.
Связанные: 10 уроков веб-дизайна, которые вы можете извлечь на StarWars.com
7. ВерданаVerdana была разработана специально для использования на экране, поэтому ее особенно легко читать на всех устройствах.Он выглядит классически и точно не отвлекает от вашего контента. Он хорошо адаптируется к заголовкам или основному тексту, поэтому вы можете использовать его практически для любого контента.
8. ТахомаTahoma — еще один четкий и легко читаемый шрифт без засечек. Он достаточно гибкий, чтобы хорошо работать с бизнес-сайтами, блогами, творческими портфолио и т. Д., Для чего еще он вам нужен. Персонажи чистые, однородные и приятные для глаз.
9. TrebuchetРазработанный для удобочитаемости и использования в знаках, Trebuchet — идеальный шрифт для заголовков и заголовков.Он также сохраняет удобочитаемость при меньшем размере, поэтому не бойтесь использовать его и в основном тексте.
10. Готика векаЭлегантный, чистый и геометрический, Century Gothic выделяется своими заголовками и названиями. Если Arial и Helvetica слишком просты на ваш вкус, но вам все же нужен острый шрифт без засечек для вашего сайта, стоит подумать об этом.
11. ДидоКлассический, элегантный Didot создает интеллектуальное ощущение, которое хорошо подходит для университетского сайта или даже некоторых блогов или стартапов.Он отличается чистыми, прямыми линиями с минималистичными засечками, которые не слишком сильно искажают текст.
Связано: Контрольный список для редизайна вашего веб-сайта
12. БодониЭтот привлекательный шрифт с засечками — более интересная альтернатива стандартному Times New Roman. Более острый, чем у Джорджии, но не такой вызывающий, как что-то вроде Courier New или Rockwell, Bodoni — отличный компромисс, если вы хотите, чтобы ваш текст был немного изящным, но не брал на себя дизайн.
13. Calisto Мягкие линии и изящные засечкиCalisto придают ему женственный вид, идеально подходящий для ведения блога или стартапов, возглавляемых женщинами. Его небольшой интервал может не подходить для длинных блоков текста, но он будет выглядеть потрясающе в заголовках и заголовках.
Связано: 30 способов стать союзником женщин в сфере технологий
14. ЧандараПредставленный в коллекции шрифтов Microsoft ClearType Font Collection, Candara часто рассматривается как один из менее современных шрифтов без засечек.Он демонстрирует открытое, легкое отношение, которое может придать запоминающийся тон вашему веб-сайту и бренду.
15. ОптимаМожет быть трудно придать индивидуальности гладкому и чистому шрифту без засечек, но Optima, безусловно, справляется с этим. Он достаточно запоминающийся, чтобы хорошо подойти к развитию вашей торговой марки, но не заставит читателей казаться загроможденными или запугивающими длинные отрывки.
16. ПалатиноPalatino — это классический шрифт с засечками, идеальный для заголовков цифровых журналов и другого текста, который должен выделяться жирным шрифтом.Он кажется немного менее структурированным, чем Джорджия, и гораздо более индивидуальным, чем ваш стандартный Times New Roman.
17. Зыбучие пескиQuicksand — это современный шрифт, который хорошо смотрится на мобильных устройствах. Оно простое и не слишком яркое, но все же демонстрирует достаточно причудливую индивидуальность, чтобы ваш основной текст оставался интересным. Этот довольно обтекаемый шрифт также легко читается, что делает его отличным выбором для сайтов с большим количеством текста.
18. Курьер НовыйCourier New — необычный шрифт, который очень узнаваем и обладает большой индивидуальностью.Это идеальный выбор, если вы хотите, чтобы ваш сайт выглядел более винтажно, и вам нужен сильный шрифт, который передаст индивидуальность вашего бренда.
19. Роквелл Отличительные засечкиRockwell напоминают Courier New, только без исключительно винтажной атмосферы. Его может быть немного сложнее читать на небольших экранах и меньших размерах, но это может быть забавный шрифт для заголовков и заголовков.
20. ГарамондGaramond — это вневременной шрифт, созданный в 1615 году.К сожалению, в печатном виде читать легче, чем в Интернете. Тем не менее, вы все равно можете использовать его в качестве акцентного шрифта в заголовках или, возможно, даже как часть вашего логотипа.
Связано: Как создать логотип для вашего веб-сайта, который понравится посетителям
21. Медная пластинаЭтот очень характерный шрифт, который трудно не заметить, придает вашему тексту индустриальный, официальный вид. Copperplate — идеальный шрифт для привлечения внимания к заголовкам или логотипу.К сожалению, это может стать трудночитаемым при использовании для меньшего основного содержимого.
22. УдарУдачно названный, Impact — это шрифт утверждений, который вы, возможно, захотите зарезервировать для заголовков и заголовков. Этот тяжелый шрифт привлекает внимание читателей, когда они прокручивают ваш блог или просматривают ваши сообщения в поисках ключевой информации.
Не волнуйтесь о размере шрифта
Если вам нужна помощь в поиске другого шрифта, разработке собственного сайта или загрузке файла шрифта, мы можем помочь! Подпишитесь на наш ежемесячный дайджест, чтобы не пропустить ни одной статьи.
Где скачать безопасные веб-шрифтыКороче говоря, вам не нужно загружать веб-шрифты. Поскольку они уже предустановлены во всех популярных операционных системах, вы можете просто закодировать их на своем сайте с помощью CSS, и они должны отображаться должным образом на всех устройствах.
С учетом сказанного, если вы по какой-то причине чувствуете необходимость загрузить безопасный для Интернета шрифт, вы можете найти их в большинстве популярных библиотек шрифтов, таких как Google Fonts, DaFont или FontSpace.
Однако имейте в виду, что тот факт, что шрифт доступен на одном из этих ресурсов, не означает автоматически, что он безопасен для Интернета.
Как добавить безопасные веб-шрифты на свой веб-сайт
Вы можете добавлять шрифты на свой сайт с помощью CSS. Лучшая практика — включить ваш предпочтительный шрифт (который может быть безопасным или небезопасным в Интернете) и резервный шрифт (который всегда должен быть безопасным в Интернете). Таким образом, если выбранный вами основной шрифт несовместим с операционной системой пользователя, вы все равно можете иметь право голоса в резервном шрифте, который отображается вместо него.
Есть несколько различных вариантов добавления CSS для включения веб-безопасных шрифтов на ваш веб-сайт. Если вы используете WordPress, вы можете поместить его в раздел «Дополнительные CSS» в настройщике.
Вы также можете изменить шрифт своего веб-сайта в его таблице стилей (style.css). В этом файле должен быть раздел шрифтов и гарнитур, где вы можете указать, какие шрифты следует использовать для разных типов текста.
Вот пример:
p {font-family: Montserrat, Arial, sans-serif; } В этом фрагменте мы настроили текст абзаца так, чтобы сначала отображался шрифт Montserrat.Если на устройстве пользователя не установлен Montserrat, вместо него будет использоваться Arial. При желании вы можете включить более двух шрифтов и использовать разные шрифты для основного текста, заголовков и заголовков.
У вас есть любимый веб-шрифт?Если вы не опытный дизайнер, легко упустить из виду важность шрифта вашего веб-сайта. Однако этот элемент играет важную роль в вашем брендинге. Выбор шрифта, который не отображается на всех устройствах, может нарушить UX или даже помешать посетителям полностью прочитать ваш контент.
В этом посте мы объяснили важность веб-шрифтов и то, как вы можете добавить их на свой сайт. Мы также поделились 22 вариантами, которые вы можете использовать в своих будущих проектах, включая обычные шрифты без засечек, такие как Helvetica, классические шрифты с засечками, такие как Georgia, и некоторые уникальные варианты, включая Courier New и Quicksand.
