Адаптивный или отзывчивый веб-дизайн – это не только столбцы, сетки, картинки и иконки. Все это не будет иметь смысла без текстового контента. Как однажды сказал Билл Гейтс: «Контент – это король». Поэтому, адаптивная типография – это тот важный фактор, который не должен упускать из виду каждый веб-дизайнер и веб-разработчик.
В сегодняшней статье мы обсудим основы создания адаптивной веб-типографики, а также те факторы, которые влияют на это.
Хорошая типография – это правильный выбор шрифта. Правильное сочетание шрифта, цвета текста, размера шрифта гарантирует, что контент будет выглядеть в самом высоком качестве.
Прежде чем мы углубимся в процесс создания адаптивной веб-типографии, вот несколько терминов, которые нужно обсудить.
Тип шрифта (гарнитура, typeface)
Также известен, как семейство шрифтов (font family
). Это коллекция дизайна символов, в котором собран полный набор букв, цифр, символов, специальных символов, а также их вес («жирность», weight).
Пример в CSS: font-family: "Open Sans", Arial, sans-serif;
Шрифт
Это фактический компьютерный файл, который содержит информацию об используемых символах, такую как шрифт, вес, ширина, стиль и т.д. Такие файлы имеют расширение .eot
, .woff
, .ttf
.
Базисная линия (baseline)
Это нижняя горизонтальная линия, по которой проходят самые высокие буквы.
Отслеживание (tracking)
Также известен как межбуквенный интервал (letter spacing
). Это последовательное увеличение или уменьшение расстояния между буквами.
Кернинг
Процесс корректировки пространства между отдельными символами в глифах различной ширины.
Направляющая (leading)
Также известна как высота строки (line height
) в CSS. Это межстрочный интервал (интерлиньяж) текста, подсчет которого ведется от базовой линии шрифта.
Слова, фразы и предложения имеют значение, но и каждый символ очень важен. Общий дизайн не будет иметь смысла, если ваша аудитория не поймет контент, или он ее не будет привлекать. В веб-типографии есть четыре основных элемента:
Все это оказывает большое влияние на конечный результат и влияет на выразительность вашего месседжа.
Существует четыре фактора, которые могут помочь вам создать презентабельную веб-типографику.
Большинство сайтов в настоящее время используют одни и те же шрифты. Даже сегодня очень популярны Arial и Helvetica. Тем не менее, было бы больше смысла, если бы вы могли согласовать шрифты с вашим сообщением.
Например, если на вашем сайте размещен контент для детей, тогда было бы уместно использовать шрифты вроде DK Crayon Crumble или Little Miss Priss в заголовках.
Здесь главное убедиться, что используемая типография соответствует вашей целевой аудитории, а текст четкий и легко читается.
Практически все современные браузеры поддерживают веб-шрифты, которые подключены с помощью команды @import
или стандартного тега ссылки (<link>
).
Пример использования тега @import
:
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
Пример тега ссылки:
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Это означает, что вы можете использовать любой шрифт, доступный на сайте шрифтов, например, на Google Font и Typekit.
Преимущества использования веб-шрифтов:
Одна из главных ошибок, которую веб-дизайнеры в настоящее время совершают, — они добавляют ненужные цветовые комбинации на свои сайты. Помните, что хороший веб-дизайн определяется тем, насколько хорошо функционирует сайт и насколько хорош дизайн.
Если вы используете много цветов и в случайном порядке, это сделает ваш текст нечитабельным и принесет боль в глаза посетителю. Но как выбрать правильные цветовые комбинации? Хотя нет общего правила, есть некоторые рекомендации.
Как все мы знаем, картинки замедляют работу веб-страниц. Если позволяет ситуация, используйте текст, а не картинки.
Отзывчивая типография в веб-дизайне – это больше, чем просто адаптация или оптимизация размера текста под различные размеры экрана. Давайте поговорим об основных правилах, которые мы можем применять для достижения адаптивной и отзывчивой типографии.
Использование пикселей очень популярно. Но, пиксели – это фиксированная величина. Это означает, что когда вы изменяете размер окна в браузере, трудно определить эффективный размер текста.
Лучшим вариантом является использование rem
. Rem, также известный как «root em», всегда равен размеру шрифта корневого HTML-элемента, и что более интересно, так это то, что он поддерживается всеми современными браузерами.
html{ font-size: 16px; // 1rem = 16px } h1{ font-size: 1.9rem // 19px } h2{ font-size: 1.8rem // 18px }
В данном примере мы определили базовый размер шрифта в 16 пикселей, который является ссылкой на размер шрифта других элементов. Размеры h1
и h2
будут меняться при изменении размера области просмотра.
Для более старых версий Internet Explorer мы можем сначала указать размер шрифта в пикселях, а затем в rem
единицах.
html{ font-size: 16px; // 1rem = 16px } h1{ font-size: 19px; font-size: 1.9rem; } h2{ font-size: 18px; font-size: 1.8rem; }
Теперь, когда вы знаете, как использовать rem
, вам нужно поэкспериментировать на экранах разных размеров с помощью запросов @media
.
@media (max-width: 640px) { h1 {font-size:1.7rem;} h2{font-size: 1.6rem;} } @media (min-width: 480) { h1 {font-size:1.9rem;} h2{font-size: 1.8rem;} }
Обратите внимание, что на меньших экранах размер шрифта немного больше по сравнению с более широкими экранами. Это сделает текст более читабельным, поскольку сегодня большинство пользователей читают в телефоне или планшете.
Самый идеальный показатель для длины строки – это примерно от 45 до 75 символов в строке. Для адаптивного веб-дизайна размер не так просто контролировать, особенно на маленьких устройствах. Если вы не можете контролировать размер, вы не можете контролировать разборчивость вашего текста.
Адаптивный дизайн становится все более и более продвинутым. Картинки, макет и сетки — это важно. Однако мы не должны забывать, что контент или текст – это то, что читают не только люди, но и поисковые системы.
Занимаясь построением эффективного макета, также не забывайте о том, как будет выглядеть ваш текст. Самое главное, чтобы ваш текст был читабелен, понятен и легко просматривался на различных устройствах с разным размером экрана.
К основным преимуществам движка WordPress можно отнести множество бесплатных и премиальных тем (шаблонов) и плагинов.…
Сегодняшний обзор посвящен людям, для которых важен вопрос конфиденциальности в Интернете и кто ценит свои…
Впервые о бренде Pro Plan услышали в 1986 году, когда он стал частью американской компании…
Страх наказания хуже самого наказания (В наказании есть нечто определенное, оно все же лучше, чем…
Если вы планируете разместить веб-сайт в Интернете, очень важно найти для него быстрый и надежный…
Учеба за границей уже давно ассоциируется с качественным образованием, новыми возможностями и множеством перспектив. Но…