Шрифты в веб дизайне: 10 советов по типографике в веб-дизайне

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

“У вас должно быть около 60 символов на строку, если вы хотите получить хороший опыт чтения. Наличие правильного количества символов в каждой строке является ключом к читабельности вашего текста”.

Если линия слишком короткая, глазу придется слишком часто возвращаться, нарушая ритм читателя. Если строка текста слишком длинная, пользователю будет сложно сосредоточиться на тексте. Изображение: Material Design Для мобильных устройств вы должны использовать 30–40 символов в строке. Ниже приведен пример двух сайтов, просматриваемых на мобильном устройстве. Первый использует 50-75 символов в строке (оптимальное количество символов в строке для печати и для компьютера), а второй использует оптимальные 30-40 символов. Изображение: Usertesting В веб-дизайне вы можете добиться оптимального количества символов в строке, ограничивая ширину ваших текстовых блоков используя em (относительную единицу измерения) или пиксели.

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

5. Используйте шрифты с различимыми буквами

Во многих шрифтах слишком легко перепутать аналогичные формы букв, в частности “i” и “L” (как видно на изображении ниже), и маленькие расстояния между буквами, например, когда “r” и “n” выглядят как “m”. Поэтому, выбирая шрифт, обязательно проверяйте его в разных контекстах, чтобы убедиться, что это не вызовет проблем у ваших пользователей.

Текст, целиком написанный прописными буквами – отлично подходит в контекстах, которые не подразумевают чтение (например, акронимы или логотипы), но, когда ваше сообщение подразумевает чтение, не заставляйте своих пользователей читать текст, написанный заглавными буквами. Как уже упоминалось Майлсом Тинкером, в его знаковой работе “Легкость печати”, текст целиком написанный в верхнем регистре значительно замедляет скорость просмотра и чтения по сравнению с нижним регистром.

В типографике у нас есть специальный термин для расстояния между двумя строками текста – лидинг (leading) или межстрочный интервал.

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

• Маленький текст должен иметь коэффициент контрастности не менее 4,5: 1 по отношению к фону.
• Большой текст (при 14 pt жирный / 18 pt обычный) должен иметь коэффициент контрастности по крайней мере 3: 1 по отношению к фону.

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

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

Контент, который вспыхивает или мерцает, может вызвать припадки у восприимчивых людей. Это может не только вызвать припадок, но, скорее всего, это будет раздражать или отвлекать пользователей в целом. Избегайте мигающего текста!

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

Типографика существует, чтобы обеспечивать контент

Типографика должна обеспечивать контент таким образом, чтобы она никогда не добавляла когнитивную нагрузку на пользователя. У вас есть собственные советы по типографике в веб-дизайне? Или вы хотите получить более подробную информацию о упомянутых выше вопросах? Дайте мне знать в комментариях ниже! Подписывайтесь на UX Planet: Twitter | Facebook

Перевод статьи Nick Babich

15 примеров хорошей типографики в веб-дизайне

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

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

Что такое типографика в веб-дизайне?

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

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

15 лучших примеров типографики в веб-дизайне

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

1. Van Holtz Co

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

2. Cambridge International School

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

3. Child’s own

Child’s own – это сайт, на котором детские рисунки используются для изготовления мягких игрушек. Что касается типографики, то дизайнер использовал два контрастных шрифта, но они хорошо сочетаются друг с другом. Шрифт заголовков контрастирует со шрифтом инструкций. Шрифт заголовка делает дизайн игривым, что соответствует «детской» тематике сайта.

4. The Next Rembrandt

The Next Rembrandt — это напечатанная на 3D-принтере картина, созданная на основе данных о произведениях Рембрандта. Дизайн этого сайта выделяется значительным негативным пространством и набором текста. Общий минималистичный характер этой страницы выделяет центральный текст и фокусируется на теме сайта. Панель навигации также проста и понятна.

5. 1MD

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

6. Kashoo

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

7. Innovator. Boris Ignatovich

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

8. Evolve Wealth

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

9. RSQ

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

10. Luke Stephenson

Luke Stephenson – это фотопутешествие, посвященное бренду мороженого. Эта страница имеет чистый и элегантный дизайн и является хорошим примером выбора правильной типографики.

11. Pest Stop Boys

Pest Stop Boys — компания по борьбе с вредителями. На этой странице используется много отличных цветов как для фона, так и для текста. Активное использование типографики, большой фоновой графики и анимированных тараканов выделяет предоставляемые услуги и контактную информацию компании.

12. By the Books

By The Books – это виртуальный литературный фестиваль, на котором представлены книги, рекомендованные Аминату Соу ​​и Энн Фридман. Это отличный пример того, как типографика может влиять на дизайн сайта. Заголовки и основной текст используют одинаковую типографику на всей странице, но в разных книгах используются дополнительные шрифты, что делает дизайн слегка контрастным, но согласованным.

13. Marianne Brandt

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

14. Rijksmuseum

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

15. KOTI Sleepover

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

Лучшие практики типографики в веб-дизайне

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

Ограничьте количество шрифтов

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

Сопоставьте шрифты и подберите правильные сочетания

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

Ограничьте длину строки

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

Установите межстрочный интервал

Если вы правильно используете пробелы между строками текста, улучшится не только визуальная привлекательность, но и удобочитаемость. Чтобы текст было легче читать, можно установить междустрочный интервал 120–145 % от кегля. Если вы используете такой инструмент дизайна, как Mockplus, вы можете легко установить межстрочный интервал на левой панели.

Используйте цветовой контраст

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

Старайтесь не писать текст только заглавными буквами

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

Не забудьте проверить текст

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

Вывод

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

Перевод статьи uxplanet.org

Дизайн для удобочитаемости: руководство по веб-типографике

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

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

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

Проблемы цифровой типографики

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

• Размер экрана: невозможно предсказать, однако адаптивный дизайн направлен на то, чтобы приспособиться к любому незначительному изменению размеров. Но это означает, что набор текста иногда может быть напрасным.
• Разрешение экрана: Плотность пикселей играет большую роль в удобочитаемости текста. Технологические достижения сделали экраны с высоким разрешением более доступными для широких масс, но дизайнеры должны помнить об отклонениях от более старых технологий.
• Калибровка экрана: Уровни яркости определяют, как цвета отображаются на экране. Выбор цвета для веб-дизайна должен соответствовать всем типам настроек экрана.

Выбор лучшего шрифта для чтения на экране

Цифровой дизайн — сложное ремесло: не так давно мы были ограничены лишь несколькими шрифтами, совместимыми с мониторами с низким разрешением.

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

Шрифты для печати созданы из чернил. Веб-шрифты созданы из квадратных пикселей.

Дизайн не должен ограничиваться универсальными стандартными шрифтами (Time New Roman может выйти из употребления). Для дизайнеров доступно бесчисленное множество вариантов шрифтов, безопасных для Интернета и доступных. Google Fonts, Font Library и Adobe Typekit — это лишь некоторые из них, которые предлагают простую интеграцию и широкий выбор вариантов.

Форматирование для приятного чтения

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

Grid Lover позволяет пользователям настраивать форматирование шрифта для лучшей читабельности. CSS генерируется сбоку, для простоты реализации.

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

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

Никогда не экономьте на тестировании

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

Руководство по веб-типографике

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

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

Загрузите PDF-версию этой инфографики.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Анализ тонкостей анатомии типографики
• Понимание нюансов классификации шрифтов
• Слова имеют значение — истинная ценность UX Copy
• Создание руководства по стилю пользовательского интерфейса для лучшего UX
• Основы редизайна веб-сайта — пример из практики

Понимание основ

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

Шрифты, которые лучше всего подходят для чтения с экрана, имеют характерные и открытые формы букв. Proxima Nova, Georgia и Fira имеют характеристики, облегчающие чтение на различных экранах. На удобочитаемость шрифта влияют и другие факторы, такие как размер шрифта, высота строки, контрастность шрифта и цвета фона.

Размер шрифта на веб-сайте должен соответствовать размеру экрана, на котором он отображается. Как правило, размер шрифта должен быть 12–16 пунктов на экране мобильного устройства, 15–19 пунктов на экране планшета и 16–20 пунктов на экране настольного компьютера. Также следует учитывать такие факторы, как размер шрифта, высота и длина строки.

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

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

Джордан ДеВос

Дизайнер

Об авторе

Джордан — опытный дизайнер, специализирующийся на визуальных коммуникациях и объединяющий стратегию, дизайн услуг и UX/UI. Она работала в различных компаниях, от корпоративных до дизайнерских студий. Джордан, начинающая с самого начала, которая носит много шляп, находится в своей стихии, руководя проектом или управляя командой.

Hire Jordan

22 лучших веб-безопасных шрифта для использования на вашем веб-сайте

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

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

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

• Знакомство с веб-безопасными шрифтами
• 22 веб-безопасных шрифта для использования на вашем веб-сайте
• Где скачать веб-безопасные шрифты
• Как добавить веб-безопасные шрифты на ваш сайт

Нам предстоит многое рассказать, так что приступим!

Введение в веб-безопасные шрифты (и почему они важны)

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

Это важно, потому что, если посетитель попытается просмотреть ваш веб-сайт и использует шрифт, не установленный на его устройстве, он увидит вместо него стандартный шрифт, такой как Arial или Times New Roman. В некоторых случаях ваш контент может даже стать нечитаемым на определенных устройствах.

Конечно, последняя ситуация нежелательна, так как пользователи, как правило, не будут оставаться на вашем сайте, если они не могут читать ваш сайт. Однако даже необходимость отображать стандартное семейство шрифтов может нарушить общий дизайн вашего веб-сайта. Это также может привести к несоответствиям в вашем брендинге.

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

22 лучших веб-безопасных шрифта для использования на вашем веб-сайте

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

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

1. Ариал

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

Если вы цените надежность и простоту Arial, но предпочитаете шрифт с засечками, вам подойдет Times New Roman. Хотя ему также не хватает индивидуальности, вы можете быть уверены, что его можно будет просмотреть на любом устройстве.

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

Calibri — еще один базовый шрифт без засечек, похожий на Helvetica и Arial. Уже несколько лет он является шрифтом по умолчанию для Microsoft Office и является отличным выбором для современных предприятий и сайтов электронной коммерции. Используя скромный, ненавязчивый шрифт, вы можете привлечь больше внимания к своим продуктам и услугам.

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

Камбрия похожа на Грузию, но немного более современная. Его засечки немного тоньше, что облегчает чтение, особенно на небольших экранах.

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

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

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

Гладкий, четкий и геометрический стиль Century Gothic делает смелое заявление в заголовках и заголовках. Если Arial и Helvetica слишком просты на ваш вкус, но вам все же нужен четкий шрифт без засечек для вашего сайта, стоит рассмотреть этот шрифт.

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

Этот привлекательный шрифт с засечками представляет собой более интересную альтернативу стандартному Times New Roman. Более резкий, чем Джорджия, но не такой бросающийся в глаза, как Courier New или Rockwell, Bodoni – отличный компромисс, если вы хотите, чтобы ваш текст обладал изюминкой, но не брался за дизайн.

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

Представленный в коллекции шрифтов ClearType от Microsoft, шрифт Candara часто считается одним из менее современных шрифтов без засечек. Он демонстрирует открытое и непринужденное отношение, которое может придать запоминающийся тон вашему веб-сайту и бренду.

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

Palatino – это классический шрифт с засечками, который идеально подходит для заголовков цифровых журналов и другого текста, который должен громко заявить о себе. Он кажется немного менее структурированным, чем Джорджия, и имеет гораздо больше индивидуальности, чем ваш стандартный Times New Roman.

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

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

Отличительные засечки Rockwell напоминают Courier New, только без чрезмерно винтажной атмосферы. Его может быть немного сложнее читать на небольших экранах и в меньших размерах, но это может быть забавным шрифтом для заголовков и заголовков.

Garamond — это вневременной шрифт, разработанный в 1615 году. К сожалению, его легче читать в печатном виде, чем в Интернете. Тем не менее, вы все равно можете использовать его в качестве акцентного типографского шрифта в заголовках или, возможно, даже как часть вашего логотипа.

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

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

Получайте контент прямо в свой почтовый ящик

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

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

С учетом сказанного, если вы по какой-то причине чувствуете необходимость загрузить веб-безопасный шрифт, вы можете найти его в большинстве популярных библиотек шрифтов, таких как Google Fonts, DaFont или FontSpace.

Однако имейте в виду, что тот факт, что шрифт доступен через один из этих ресурсов, не означает автоматически, что он безопасен в Интернете.

Как добавить безопасные веб-шрифты на свой веб-сайт

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

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

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

Вот пример:

 p {семейство шрифтов:Montserrat,Arial,sans-serif; } 

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