Если вы не укажете никаких стилей для текста, браузеры будут применять свои собственные стили по умолчанию. Они называются таблицами стилей User Agent и могут различаться в зависимости от браузера. Пользователи также могут устанавливать свои собственные предпочтения для отображения текста.
Если не указать длину строки, браузеры будут переносить строки текста по краям экрана. Таким образом, текст в интернете по умолчанию является адаптивным — он подстраивается под размер области просмотра пользователя.
Но то, что текст помещается на экране, еще не значит, что его удобно читать. Хорошая типографика — это прежде всего правильное представление текста. Типографика — это не только выбор подходящих шрифтов. Необходимо учитывать предпочтения пользователя, размер текста, длину строки и расстояние между строками.
Размер текста
Сложно определить, какой размер текста следует использовать в интернете.
Если кто-то использует небольшой экран, можно с уверенностью сказать, что он находится довольно близко к глазам — на расстоянии вытянутой руки.
Но по мере увеличения размеров экранов установить эту связь становится все сложнее. Экран ноутбука, вероятно, будет находиться довольно близко к зрителю, а широкоформатный монитор настольного компьютера примерно такого же размера, как экран телевизора. Люди сидят на расстоянии вытянутой руки от экрана настольного компьютера, но гораздо дальше от телевизора.
Тем не менее, хотя вы не можете точно знать, на каком расстоянии находится человек от экрана, вы можете попробовать использовать размеры текста, которые, как вы надеетесь, окажутся подходящими. Используйте меньший размер текста для маленьких экранов и больший размер текста для больших экранов.
Для изменения свойства font-size по мере увеличения ширины экрана можно использовать медиазапросы.
@media (min-width: 30em) {
html {
font-size: 125%;
}
}
@media (min-width: 40em) {
html {
font-size: 150%;
}
}
@media (min-width: 50em) {
html {
font-size: 175%;
}
}
@media (min-width: 60em) {
html {
font-size: 200%;
}
}
Масштабирование текста
Переключение между фиксированными размерами текста на определенных контрольных точках происходит довольно резко. Более адаптивный подход заключается в том, чтобы размер текста зависел от ширины экрана устройства пользователя.
В CSS единица измерения vw означает «ширина области просмотра». Сопоставление размеров шрифта с шириной области просмотра означает, что текст будет увеличиваться и уменьшаться пропорционально ширине браузера. Это затрудняет прогнозирование размера текста при любой конкретной ширине, но вы знаете, что размер текста будет соответствовать ширине браузера пользователя.
Важно не использовать vw отдельно в объявлении размера шрифта.
html { font-size: 2.5vw; }
В этом случае пользователь не сможет изменить размер текста. Изменение размера текста станет возможным, если вы используете относительные единицы измерения, такие как em , rem или ch . Для этого идеально подходит функция CSS calc() .
html { font-size: calc(0.75rem + 1.5vw); }
Пусть браузер сам произведёт расчёты. Это затрудняет точное предсказание размера текста при любой конкретной ширине, но вы знаете, что размер текста будет в нужном диапазоне. Браузер пользователя позаботится о точном расчёте размера текста.
Но теперь существует вероятность того, что текст станет слишком мелким на узких экранах и слишком крупным на широких.
Текст зажима
Вероятно, вам не захочется, чтобы ваш текст сильно сжимался и увеличивался. Вы можете контролировать начало и конец масштабирования с помощью функции CSS clamp() . Она "ограничивает" масштабирование определенным диапазоном.
Функция clamp() аналогична функции calc() , но принимает три значения. Среднее значение совпадает с тем, что передается в calc() . Начальное значение задает минимальный размер, в данном случае 1rem, чтобы не опускаться ниже предпочтительного размера шрифта пользователя. Конечное значение задает максимальный размер.
html {
font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}
Теперь размер текста уменьшается и увеличивается пропорционально экрану пользователя, но размер текста никогда не будет меньше 1rem или больше 2rem .
Длина строки
Интернет — это не печатные издания, но мы можем извлечь уроки из мира печатных изданий и применить их в интернете.
В своей классической книге «Элементы типографского стиля » Роберт Брингхерст высказался о длине строки (или её измерении) следующим образом:
Для одноколоночной страницы, набранной шрифтом с засечками определенного размера, длина строки от 45 до 75 символов считается вполне достаточной. Идеальным считается строка в 66 символов (с учетом букв и пробелов). Для многоколоночной работы лучше использовать в среднем от 40 до 50 символов.
В CSS нельзя напрямую задать длину строки. Свойства line-length не существует. Но можно предотвратить чрезмерное расширение текста, ограничив ширину контейнера. Для этого идеально подходит свойство max-inline-size .
Не задавайте длину строки с помощью фиксированной единицы измерения, например, px ). Пользователи могут изменять размер шрифта, и длина строки должна соответствующим образом корректироваться. Используйте относительные единицы измерения, такие как rem или ch .
article { max-inline-size: 700px; }
article { max-inline-size: 66ch; }
Использование единиц измерения ch для ширины приведет к переносу строк на 66-м символе при данном размере шрифта.
Высота строки
Хотя в CSS нет свойства line-length , существует свойство line-height .
Для коротких строк текста можно использовать более высокие значения line-height . Но если использовать большие значения line-height для длинных строк текста, читателю будет трудно переместить взгляд с конца одной строки на начало следующей.
article {
max-inline-size: 66ch;
line-height: 1.65;
}
blockquote {
max-inline-size: 45ch;
line-height: 2;
}
Используйте безразмерные значения для параметров line-height . Это гарантирует, что межстрочный интервал будет относительным к font-size .
line-height: 24px;
line-height: 1.5;
Комбинации и масштаб
При создании пользовательских интерфейсов всегда помните о необходимости соблюдения иерархии для большей ясности и лучшей упорядоченности страниц. Отличный способ сделать это — использовать типографическую шкалу, встроенную в вашу систему дизайна .
Веб-шрифты
Шрифт — это как голос для ваших слов. Долгое время в интернете было очень мало вариантов шрифтов. Единственными были системные шрифты. Но теперь вы можете выбрать веб-шрифт, который соответствует стилю вашего контента.
Используйте @font-face , чтобы указать браузерам, где найти файлы веб-шрифтов. Используйте формат веб-шрифтов woff2. Он хорошо поддерживается и обеспечивает наилучший прирост производительности.
@font-face {
font-family: Roboto;
src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
font-family: Roboto, sans-serif;
}
Но каждый добавленный вами файл веб-шрифта потенциально может ухудшить пользовательский опыт, поскольку увеличивает время загрузки страницы. Помните, дизайн — это не только то, как выглядят конечные пиксели. Скорость отрисовки этих пикселей — критически важная часть пользовательского опыта. Быстрый пользовательский опыт — это хороший пользовательский опыт.
Загрузка шрифта
Вы можете запросить у браузеров начало загрузки файла шрифта как можно скорее. Добавьте в head документа элемент link , который ссылается на ваш файл веб-шрифта. Атрибут rel со значением preload указывает браузеру на приоритетную загрузку этого файла. Атрибут ` as со значением font указывает браузеру, к какому типу относится этот файл. Атрибут type позволяет указать еще более точный тип файла.
<link href="/fonts/roboto-regular.woff2" type="font/woff2"
rel="preload" as="font" crossorigin>
Даже если вы размещаете файлы шрифтов самостоятельно, необходимо добавить атрибут crossorigin .
Используйте свойство CSS ` font-display , чтобы указать браузеру, как управлять переключением с системного шрифта на веб-шрифт. Вы можете вообще не показывать текст, пока не загрузится веб-шрифт. Вы можете сразу отобразить системный шрифт, а затем переключиться на веб-шрифт после его загрузки. У обеих стратегий есть свои недостатки. Если вы подождете, пока веб-шрифт загрузится, прежде чем показывать текст, пользователи могут долгое время смотреть на пустую страницу. Если вы сначала покажете текст системным шрифтом, а затем переключитесь на веб-шрифт, пользователи могут столкнуться с резким изменением содержимого на странице.
Хорошим компромиссом является небольшая задержка перед отображением текста. Если веб-шрифт загрузится раньше, текст отобразится с использованием веб-шрифта без смещения содержимого. Если же веб-шрифт не загрузится по истечении этого времени, текст отобразится с использованием системного шрифта, чтобы пользователь хотя бы мог прочитать содержимое.
Если вы хотите, чтобы веб-шрифт заменял системный шрифт при каждой загрузке веб-шрифта, используйте значение ` swap для параметра font-display .
body {
font-family: Roboto, sans-serif;
font-display: swap;
}
Если вы хотите, чтобы после отрисовки текста использовался системный шрифт, установите значение font-display равным fallback .
body {
font-family: Roboto, sans-serif;
font-display: fallback;
}
Переменные шрифты
Если вы используете множество различных вариантов толщины или стиля одного и того же шрифта, вам может потребоваться множество отдельных файлов шрифта — отдельный файл шрифта для каждого варианта толщины или стиля.
Вариативные шрифты решают эту проблему, используя один файл. Вместо отдельных файлов для обычного, жирного, сверхжирного и других вариантов, файл вариативного шрифта является адаптивным. Он содержит всю необходимую информацию для отображения в широком диапазоне начертаний или стилей.
Это означает, что один файл вариативного шрифта больше, чем один файл обычного шрифта, но один файл вариативного шрифта, вероятно, будет меньше, чем несколько файлов обычных шрифтов. Если вы используете много разных начертаний, вариативный шрифт может значительно повысить производительность.
Хорошая типографика в интернете — это не только выбор шрифтов, который вы делаете как дизайнер. Адаптивная типографика также предполагает уважение к устройству пользователя и его сетевому соединению. В результате получается дизайн, который выглядит правильно независимо от способа просмотра.
Теперь, когда вы освоили адаптивный текст, пришло время перейти к адаптивным изображениям .
Проверьте свое понимание
Проверьте свои знания в области типографики.
Для того чтобы текст переносился внутри видимой области, необходимо добавить стили.
clamp() полезна для создания плавной типографики, потому что
calc()clamp() в типографике.clamp() в типографике. Какие значения line-height были рекомендованы в этом руководстве?
24pxline-height .2rem1.52vwline-height создаст проблемы. Что делает font-display ?
block или inline-block .