Как менять размер текста при изменении размера окна?

Значения свойств

Значение Описание Воспроизвести
medium Устанавливает размер шрифта на средний размер. Это значение по умолчанию Воспроизвести »
xx-small Устанавливает размер шрифта в xx-малый размер Воспроизвести »
x-small Устанавливает размер шрифта в очень маленький размер Воспроизвести »
small Устанавливает размер шрифта в небольшой размер Воспроизвести »
large Устанавливает размер шрифта в большой размер Воспроизвести »
x-large Устанавливает размер шрифта в очень большой размер Воспроизвести »
xx-large Устанавливает размер шрифта в xx-большой размер Воспроизвести »
smaller Устанавливает размер шрифта меньше размера родительского элемента Воспроизвести »
larger Устанавливает размер шрифта больше размера родительского элемента Воспроизвести »
length Устанавливает размер шрифта до фиксированного размера px, cm, и т. д. Прочитать о Единицы длины Воспроизвести »
% Устанавливает размер шрифта в процентах от размера шрифта родительского элемента Воспроизвести »
initial Устанавливает для этого свойства значение по умолчанию. Прочитать о initial Воспроизвести »
inherit Наследует это свойство от родительского элемента. Прочитать о inherit

Проценты %

Проценты , как и – относительные единицы.


Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.


Вот пример с , он выглядит в точности так же, как с :

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых берётся не так:

При установке свойства в , процент берётся от ширины родительского блока, а вовсе не от его .
При установке свойства в , процент берётся от текущего размера шрифта, а вовсе не от родителя. Детали по и размеру шрифта вы также можете найти в статье Свойства font-size и line-height.
Для обычно процент от ширины/высоты родителя, но при , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Property Values

Value Description Play it
medium Sets the font-size to a medium size. This is default Play it »
xx-small Sets the font-size to an xx-small size Play it »
x-small Sets the font-size to an extra small size Play it »
small Sets the font-size to a small size Play it »
large Sets the font-size to a large size Play it »
x-large Sets the font-size to an extra large size Play it »
xx-large Sets the font-size to an xx-large size Play it »
smaller Sets the font-size to a smaller size than the parent element Play it »
larger Sets the font-size to a larger size than the parent element Play it »
length Sets the font-size to a fixed size in px, cm, etc. Read about length units Play it »
% Sets the font-size to a percent of  the parent element’s font size Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

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

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

Межстрочный интервал влияет на горизонтальное движение глаз

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

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

Межстрочный интервал и размер шрифта

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

Слева: межстрочный интервал составляет 150% от размера шрифта, но на iPhone текст читать сложно. Справа: тот же самый контент с немного увеличенным межстрочным интервалом читается гораздо легче.

Размер шрифта и чтение

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

Статические веб-страницы и размер шрифта

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

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

Слева: Главная колонка текста имеет рекомендованную длину, однако без адаптивной структуры, он слишком мал для устройств с небольшими экранами. Справа: Размер шрифта (Verdana 13 пикселей для левой колонки, Georgia 18 пикселей для введения и 16-пиксельная Georgia для основного контента) хорошо подходит для чтения на ноутбуке.

Небольшие устройства и размер шрифта

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

Слева: для сохранения длины строки размер шрифта уменьшен до 12 пикселей Verdana и 14-пиксельной Georgia, что усложняет чтение. Справа: 13-пиксельная Verdana и Georgia 17 пикселей позволяют улучшить «читабельность», хотя длина строки теперь и не является идеальной.

Большие устройства и размер шрифта

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

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

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

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

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

На практике гораздо более эффективным методом является сохранение общей «читабельности» текста с простым выравниванием по ширине. Если же этого не делать и увеличивать шрифт с сохранением идеальной длины строки, то читать такой текст на большом экране не очень удобно. Пример подобной ошибки — сайт проекта A List Apart, текст на котором хорошо считывается на маленьком экране мобильного устройства, но становится слишком большим на экране ноутбука.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode


z-index

Значения свойства

Значение Описание
font-style Задает стиль шрифта. Смотрите возможные значения у свойства font-style.
font-variant Указывает разновидность шрифта. Смотрите возможные значения у свойства font-variant.
font-weight Задает жирность шрифта. Смотрите возможные значения у свойства font-weight.
font-size/line-height Задает размер шрифта и высоту строки. Смотрите возможные значения у свойств font-size и line-height.
font-family Определяет семейство шрифта. Смотрите возможные значения у свойства font-family.
caption Шрифт используется для текста элементов управления (кнопок, раскрывающихся списков и т.п.).
icon Шрифт используется для текста под иконками.
menu Шрифт используется в раскрывающимися меню.
message-box Шрифт используется для диалоговых окон.
small-caption Тоже самое, что и caption, только используется уменьшенный шрифт (для небольших элементов).
status-bar Шрифт используется для строки состояния окна.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    p.ex1 { font: 15px arial,sans-serif; }
    p.ex2 { font: italic bold 12px/1 Georgia,serif; }
  </style>
</head>

<body>

  <p class="ex1">Пример демонстрирует, как можно изменить текст
  на странице с помощью свойства font. </p>
  
  <p class="ex2">С помощью свойства font можно отредактировать текст,
  например поменяв толщину шрифта, его размер и высоту строки.</p>
  
</body>
</html>

Результат данного примера в окне браузера:

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Единицы области просмотра


К единицам измерения области просмотра относятся vw (ширина) и vh (высота), позволяющие масштабировать элементы относительно области просмотра, то есть видимой части веб-страницы.

width: 50vw; /* 50% от ширины области просмотра */
height: 25vh; /* 25% от высоты области просмотра */

Двумя дополнительными единицами являются vmin и vmax, которые задают минимальное или максимальное значение размера области просмотра.

width: 1vmin; /* 1vh или 1vw, в зависимости от того что меньше */
height: 1vmax; /* 1vh или 1vw, в зависимости от того что больше */

Единицы измерения относительные области просмотра поддерживаются в Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ и Opera 15+.

Итого

Мы рассмотрели единицы измерения:

  • – абсолютные пиксели, к которым привязаны и потому не нужны , , и . Используется для максимально конкретного и точного задания размеров.
  • – задаёт размер относительно шрифта родителя, можно относительно конкретных символов: () и (), используется там, где нужно упростить масштабирование компоненты.
  • – задаёт размер относительно шрифта , используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в , а JS меняет шрифт у .
  • – относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.
  • , , , – относительно размера экрана.

С этим читают