5 веб-безопасных шрифтов, которые вы можете использовать на своем веб-сайте

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

Что такое веб-безопасный шрифт?

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

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

Почему веб-безопасные шрифты имеют значение?

В идеальном мире вы можете выбрать любой шрифт для своего веб-сайта. Однако в зависимости от операционной системы устройства имеют свои собственные предустановленные шрифты. Проблема заключается в том, что их дизайн обычно отличается в зависимости от используемой системы. У устройств, работающих на Windows, может быть одна группа, у MacOS может быть другая, а у Google Android другая версия.

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

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

Что такое пять семейств шрифтов?

В типографике все шрифты относятся к одному из пяти семейств шрифтов на основе сходства их дизайна. Вот они:

1. Курсив (например, Zapf-Chancery)

Семейство шрифтов Cursive имитирует человеческий почерк, буквы обычно плавно соединяются вместе. Это часто ассоциируется с людьми с каллиграфией и более быстрым письмом.

2. Фэнтези (например, «Звездные войны»)

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

3. С засечками (например, Times New Roman)

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

4. Без засечек (например, Helvetica)

В отличие от шрифтов семейства Serif, шрифты семейства Sans-serif не имеют маленькой линии, прикрепленной к каждой букве. Большинство шрифтов, принадлежащих к этому семейству, имеют одинаковую ширину штриха, что делает его минималистичным и современным.

5. Монопространство (например, Курьер)

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

Вам может понравиться: 11 удивительных шрифтов Photoshop, которые вам нужно попробовать (БЕСПЛАТНО!).

Популярные веб-шрифты:

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

1. Ариал

Один из наиболее широко используемых шрифтов без засечек как в онлайн, так и в печатных СМИ. Это стандарт де-факто. Версия OpenType 3.0 описывает это как:

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

Это также шрифт по умолчанию в документах Google.

2. Таймс Нью Роман

Times New Roman — это вариант старого шрифта Times из семейства шрифтов Serif. Создан по заказу британской газеты «Таймс» в 1931 году и разработан Стэнли Морисоном, художественным консультантом компании по производству печатного оборудования Monotype, в сотрудничестве с Виктором Лардентом из отдела надписей рекламного подразделения «Тайм». Он стал одним из самых популярных шрифтов всех времен и предустановлен на большинстве устройств.

Название Roman в Times New Roman является отсылкой к римскому стилю, первой части разработанного семейства шрифтов Times New Roman. Он берет свое начало в итальянской печати конца 15-го и начала 16-го веков, дизайн не имеет никакого отношения к Риму или римлянам.

3. Гельветика

Helvetica или Neue Haas Grotesk — широко используемый шрифт из семейства шрифтов без засечек. Разработан в 1957 году швейцарским дизайнером шрифтов Максом Мидингером при участии Эдуарда Хоффмана. Он выполнен в нео-гротескном стиле с большой высотой по оси x, окончанием штрихов на горизонтальных или вертикальных линиях и очень необычным малым расстоянием между буквами, что в совокупности придает ему солидный, плотный вид. Первоначально разработанный для использования в качестве нейтрального шрифта, который имел большую четкость, не имел внутреннего смысла в форме и мог использоваться в различных вывесках и назывался Neue Haas Grotesk (Новый гротеск Haas), он был быстро лицензирован Linotype и переименован в Helvetica в 1960 году. , латиница для швейцарца. Шрифт любим дизайнерами за его нейтральность, и его предпочитают многие известные бренды, такие как Jeep, Kawasaki, Motorola и BMW.

4. Курьер

Шрифт Courier относится к семейству шрифтов Serif. Разработанный Говардом «Бадом» Кеттлером первоначально для пишущих машинок IBM, он был адаптирован для использования в качестве компьютерного шрифта, и почти все компьютеры устанавливаются с ним. Из-за своего моноширинного набора в 1990-х годах он нашел новое применение в электронной и компьютерной промышленности, где столбцы символов должны быть последовательно выровнены, например, при кодировании, где это шрифт по умолчанию для написания или изображения любого вида кода.

Согласно отраслевому стандарту, все сценарии должны были быть написаны шрифтом Courier с размером шрифта 12 пунктов. Государственный департамент США использовал его в качестве стандартного шрифта для всех документов до января 2004 года. С ростом использования в цифровой индустрии Courier разработал варианты с такими функциями, как более крупные знаки препинания, более четкое различие между похожими символами (такими как цифры 0 / заглавная буква O и цифра 1 / строчная буква L) и т. д. для лучшей читаемости на экране.

5. Калибри

Шрифт Calibri является членом семейства шрифтов Sans-serif, разработанного Лукасом де Гроотом в 2002–2004 годах. Он был выпущен публично в 2007 году в комплекте с Microsoft Office 2007 и Windows Vista. Начиная с Office 2007, он заменил Times New Roman в качестве шрифта по умолчанию в MS Word и Arial в качестве шрифта по умолчанию для MS Powerpoint, MS Excel, Microsoft Outlook и WordPad. Он является частью коллекции шрифтов ClearType, предназначенной для работы с системой рендеринга текста ClearType от Microsoft, чтобы сделать текст более четким для чтения на жидкокристаллических дисплеях (ЖК-дисплеях).

Инструменты для работы со шрифтами

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

Пара шрифтов

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

Wordmark.it

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

WhatTheFont

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

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

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

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

1. Откройте файл header.php.

2. Скопируйте исходный/стандартный код шрифта. Обычно это можно найти через Google.

3. Вставьте код в начало файла заголовка.

4. Загрузите свой style.css, введите код шрифта, чтобы изменить текст шрифта по вашему выбору.

В конце ваша таблица стилей должна выглядеть так:

 Эта статья написана Абхьянком Шринетом. Абхьянк имеет степень магистра менеджмента ESCP Europe и диплом инженера со специализацией в области контрольно-измерительных приборов. Его интерес к цифровому ландшафту побудил его создать онлайн-стартап для прикладного консультирования (MiM-Essay), ориентированный на распространение качественной информации о начальной степени магистра.