При поиске оптимального шрифта для вашего отзывчивого веб-дизайна вы можете воспользоваться широким спектром предлагаемых бесплатных веб-шрифтов. Ознакомьтесь с третьей и последней частью нашей серии статей, чтобы узнать, как изобразить шрифты в отзывчивом веб-дизайне и как реализовать их с помощью CSS.
Бесплатные шрифты для отзывчивого веб-дизайна
Веб-шрифты являются идеальным средством для отзывчивой типографики, поскольку они основаны на свободно масштабируемой векторной графике. Когда загружается веб-страница, использующая веб-шрифты, шрифты загружаются с сервера и затем преобразуются для отображения в браузере пользователя. Это позволяет шрифту подстраиваться под размер и настройки браузера или устройства.
Быстрый взгляд на результаты поиска в поисковой системе покажет огромное количество онлайн-платформ, каждая из которых предлагает разнообразный ассортимент отзывчивых веб-шрифтов, доступных для загрузки — некоторые бесплатно, некоторые платно. Среди наиболее известных поставщиков шрифтов можно назвать Typekit и Fontspring, которые могут похвастаться большим выбором известных шрифтов, включая все классические. Вы также можете воспользоваться разнообразным ассортиментом бесплатных веб-шрифтов, предлагаемых Google Fonts, Adobe Edge Web Fonts, Font Squirrel и DaFont.
Однако не все шрифты, доступные на этих ресурсах, подходят для общего использования; например, странные и причудливые дизайны следует ограничить заголовками и заголовками. Вы также должны знать, что набор символов в разных шрифтах сильно различается. Это особенно важно для тех, кому необходимо использовать специальные знаки, такие как символы и акцентированные буквы. По этой причине очень важно, чтобы ваш отзывчивый веб-дизайн включал шрифт, отвечающий вашим требованиям. Читайте далее, чтобы познакомиться с некоторыми примерами наиболее универсальных шрифтов Google Fonts.
Отзывчивые веб-шрифты от Google Fonts
Основанный в 2010 году, Google Fonts за последние несколько лет стал платформой, на которую ориентируются многие веб-дизайнеры в поисках идеальной отзывчивой типографики. С момента своего создания Google Fonts предоставляет исключительно бесплатные шрифты, которые можно использовать как в коммерческих, так и в некоммерческих целях. В Google Fonts на выбор предлагается более 700 бесплатных веб-шрифтов, все из которых можно скачать и внедрить в свой веб-сайт с помощью кода.
Open Sans
Open Sans — это популярный шрифт с засечками, имеющий простой и чистый вид. Он был разработан Стивом Маттесоном и оптимизирован для использования в Интернете, на мобильных устройствах и традиционных печатных изданиях.
Lato
Лато» — еще один широко используемый шрифт без засечек. Этот шрифт был разработан Лукашем Дзедзичем при поддержке Google.
Roboto
Roboto» был изначально создан как шрифт для операционных систем Android и с тех пор постоянно развивается. Это еще один веб-шрифт без засечек, состоящий из относительно тонких букв, что означает, что на одной строке помещается больше символов, чем в большинстве других шрифтов.
Source Serif Pro
Source Serif Pro» был изначально разработан для программного обеспечения Adobe Systems. Шрифт с засечками может служить дополнением к шрифту с засечками ‘Source Sans Pro’ и моноширинному шрифту ‘Source Code Pro’, которые можно бесплатно приобрести в компании Adobe.
Дисплей Playfair
Если вам нужен стильный шрифт с засечками, веб-шрифт ‘Playfair Display’ — отличный вариант, на выбор предлагается шесть различных версий.
Интеграция типографики с помощью Google Fonts
Эти популярные шрифты можно найти в базах данных различных поставщиков, включая Google Fonts, Adobe Edge Web Fonts и Font Squirrel. Здесь мы видим пример внедрения бесплатного шрифта ‘Open Sans’ с помощью Google Font.
- Найдите шрифт ‘Open Sans’ в строке поиска и нажмите на кнопку «Быстрое использование», которая обозначена символом стрелки.
- Затем вам будут представлены варианты этого шрифта, из которых вы можете выбрать наиболее понравившийся. Здесь же вы можете указать, хотите ли вы использовать нестандартные знаки и символы.
- Код появится как для раздела <head> ваших веб-страниц, так и для документов CSS.
- Чтобы встроить ‘Open Sans’ в HTML-документ, вставьте код (включая ссылку на Google Fonts) в <head> вашей веб-страницы. Команда должна выглядеть следующим образом:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>How to integrate a Google web font</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
</head>
<body>
</body>
</html>Второй код определяет шрифт в CSS:
body {
font-family: 'Open Sans', sans-serif;
font-size: 100%
}Как видите, использование Google Fonts для внедрения бесплатного веб-шрифта — простая задача. Наряду с этими вариантами, вы также можете использовать Google Fonts для внедрения шрифта с помощью правила @import для CSS или Javascript.
Резюме: множество бесплатных шрифтов на выбор
Когда дело доходит до выбора отзывчивой типографики для веб-сайтов, в вашем распоряжении огромное количество ресурсов. Дизайнеры избалованы выбором: такие платформы веб-шрифтов, как Google Fonts, Adobe Edge Web Fonts, Font Squirrel и многие другие, предлагают тысячи бесплатных шрифтов, которые легко внедрить. Важно отметить, что определенные шрифты, такие как «Open Sans», «Roboto» и «Lato», часто используются в Интернете, поэтому они не очень уникальны. Вам будет трудно получить бесплатно особенно уникальные веб-шрифты (в смысле корпоративные шрифты). Однако бесплатные веб-шрифты, доступные на таких платформах, предоставляют большую свободу в плане настройки. Кроме того, эти шрифты очень легко встраивать в веб-страницу, делая ваш контент доступным для различных устройств.
Краткое изложение первых двух частей нашей серии, а также руководство по внедрению отзывчивой типографики читайте в третьей части серии.