Высота шрифта css: CSS3 | Высота шрифта

Свидетельства профессиональных типографов. написал:

«Для сохранения удобочитаемости шрифты с большой высотой по оси x… (например, Century Schoolbook или Helvetica) нуждаются в большей высоте строки… чем Garamond или Futura, у которых высота по оси x меньше ». — Gilbertson (2012) (Ссылки добавлены автором.)

Jeremiah Shoaf — известный графический дизайнер Typewolf , сайта, с которого я многое узнал о веб-шрифтах и как они на самом деле используются на веб-сайтах. В своем обширном обзоре веб-типографики Контрольный список безупречной типографики , он написал (контрольная точка № 16):

«Шрифты с большими x-высотами нуждаются в большем межстрочном интервале; шрифтам с маленькой высотой x нужно меньше». — Shoaf (2017–2020)

Донни Труонг — автор Professional Web Typography , веб-книги, которая научила меня всем основам веб-типографики. Используя термин интерлиньяж для обозначения высоты строки, он написал:

«Если x-высота большая…, вам нужно увеличить интерлиньяж. Наоборот, если x-высота мала… вам нужно подтянуть интерлиньяж». — Truong (2019)

Почему x-height имеет значение для line-height?

Похоже, типографы пришли к единому мнению, что чем больше становится x-height, тем больше должна быть высота строки. Почему?

Я не видел, чтобы кто-нибудь в явном виде объяснял, почему x-height имеет значение для высоты строки. Мне кажется, что основная причина заключается в том, что высота x, а не размер шрифта, определяет эффективный размер текста .

Одно и то же значение CSS font-size дает разное представление о размере текста для разных шрифтов из-за разницы в x-height. Magalhães (2017) очень четко иллюстрирует этот момент следующими примерами.

При одинаковом размере шрифта разные шрифты выглядят по-разному:

С теми же x-height , однако разные шрифты выглядят одинаково по размеру:

Чем больше кажется размер текста (из-за большей высоты x), тем больше должна быть высота строки, чтобы обеспечить удобочитаемость за счет вставки достаточного количества пробелов между строками. Creger (2014) перефразирует этот момент следующим образом:

«Некоторые шрифты, такие как Bernhard Modern, имеют более короткую x-высоту. Это дает им видимость использования меньшего пространства. С другой стороны, такие шрифты, как Helvetica Neue, имеют большую высоту x, из-за чего слова могут казаться более тесными. Шрифты с более высокой x-высотой… часто нуждаются в большем интерлиньяже, чтобы сделать их более разборчивыми». — Creger (2014) (Ссылки добавлены автором.)

Другая причина: мы видим x-height, а не font-size

[Этот раздел в значительной степени заимствован из того, что я сам написал в Line -height Picker app site.]

Думая о том, как найти наилучшее значение line-height , я сам пришел к следующей идее. Абзац текста на латинице состоит из полос x-высоты и пробелов. На рисунке ниже серые прямоугольники показывают, что я имею в виду под «полосами x-высоты»:

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

Мы не видим размер шрифта в абзаце текста, как ясно видно на следующем рисунке:

Таким образом, очень глупо выбирать высоту строки на основе размера невидимой длины (т.е. размера шрифта). Мы должны основывать наше решение на том, что мы видим, то есть на высоте x.

Размер шрифта имеет значение, только когда мы пишем CSS

Многие люди рекомендуют оптимальные значения высоты строки относительно font-size . Это необходимо, когда мы пишем код CSS (см. McMahon 2019 для наиболее подробного описания этого момента; см. также Cope 2015).

Но это не значит, что мы должны получить оптимальное значение высоты строки из font-size . Мы должны выполнить следующую двухэтапную процедуру: (1) получить наилучшую высоту строки, умножив x-высоту на некоторое число; (2) преобразовать его в относительную величину до размер шрифта , когда мы кодируем таблицы стилей CSS.

Если эта двухшаговая процедура кажется утомительной, то это действительно так. CSS не предназначен для установки длины относительно x-height. Предполагается, что эту роль будет играть менее известная единица измерения ex , но она ненадежна по двум причинам: она может быть установлена ​​как 0,5em , даже если фактическая высота по оси x не составляет половины размера шрифта ценность; и это относится к «первому доступному шрифту» (рабочая группа CSS 2019). Если вы не используете только один шрифт на своем веб-сайте, ex unit практически бесполезен для установки line-height .

Именно поэтому я создал приложение Line-height Picker. Он позволяет получить значение CSS line-height из трех входных данных: шрифт, x-высота в пикселях и отношение x-высоты к высоте строки.

Например, выберите Open Sans, 10 пикселей для высоты x и 1:3 для соотношения высоты строки. И затем приложение выдает вам значение line-height 1,6055 (вместе с размером шрифта значение 18,6861 пикселей). Вам просто нужно скопировать и вставить этот код CSS в свои таблицы стилей. Этот пример показан в GIF ниже:

Волшебство исходит от использования библиотеки Opentype.js для получения отношения x-height к значению font-size из метаданных файла шрифта.

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

Коп, Сара. (2015) «Line-height», CSS Tricks , 15 мая 2015 г.

Крегер, Ребекка. (2014) «6 советов по улучшению межстрочного интервала в вашей типографике», 99 Designs.

Рабочая группа CSS. (2019) «ex unit», Модуль значений и единиц CSS, уровень 3 , 6 июня 2019 г.

Gilbertson, Alan. (2012) «Ответ на вопрос «Оптимальная высота строки по отношению к размеру шрифта»», StackExchange: Графический дизайн , 27 августа 2012 г.

Кудамацу, Маса. (2018) «Оптимальное значение высоты строки для веб-страниц», medium.com , 7 августа 2018 г.

Magalhães, Ricardo. (2017) «Чтобы выбрать правильный шрифт, посмотрите на его высоту по оси x», Prototypr.io , 24 мая 2017 г.

МакМахон, Кэтлин. (2019) «Пиксели против относительных единиц в CSS: почему это все еще важно», 24 Доступность , 23 декабря 2019 г.

Шоаф, Иеремия. (2017–20) Контрольный список безупречной типографики .

Труонг, Донни. (2019) «Настройка типа в браузере», Professional Web Typography , 2-е издание.

Как автоматически настроить размер шрифта с помощью CSS font-size-adjust?

Многие разработчики используют несколько семейств шрифтов и размеров шрифта, чтобы лучше представить веб-страницу. Например, разработчик может использовать шрифт Bold Comic Sans для заголовков и шрифт Roboto для основного текста. Однако это может сделать ваш сайт загроможденным, так как многие браузеры не поддерживают все шрифты. Свойство CSS font-size-adjust позволяет избежать такой ситуации, задав автоматическую настройку размера шрифта.

CSS font-size-adjust принимает несколько единиц измерения, в которых отображаются размеры шрифта, включая пиксели, em, rem, ключевые слова и единицы области просмотра. Его можно применять к классам и идентификаторам CSS, а также к самим элементам. Таким образом, его можно использовать как отличный хак, чтобы остановить значительное уменьшение размера шрифта, если ваш первый выбор шрифта не загружается.

Однако, прежде чем разобраться со свойством CSS font-size-adjust, важно учесть, что все ваши CSS-элементы должны идеально выглядеть на экранах всех размеров. Вы можете использовать бесплатный удобный для разработчиков браузер LT Browser для отладки мобильных представлений, в котором вы можете увидеть мобильное представление вашего веб-сайта в разрешениях Android и iOS.

СКАЧАТЬ LT БРАУЗЕР

Теперь давайте быстро взглянем на свойство CSS font-size.

СОДЕРЖАНИЕ

• CSS font-size Свойство
• Свойство CSS font-size-adjust
• Как работает настройка размера шрифта CSS?
• Совместимость с браузером
• Проверка размера шрифта в разных браузерах

Свойство CSS font-size

Свойство CSS font-size указывает желаемую высоту глифов на основе шрифта. Для масштабируемого шрифта для вычисления размера шрифта применяется коэффициент масштабирования. Однако для немасштабируемого шрифта абсолютная единица размера шрифта соответствует установленному размеру шрифта.

Синтаксис:

• абсолютное число: Это значение относится к рассчитанным размерам шрифта.
• относительный размер: имеет значение относительно вычисленного размера шрифта и таблицы размеров шрифта.
• length-percentage: Указывает, что размер шрифта является абсолютным.

Свойство CSS font-size-adjust

Свойство CSS font-size-adjust предоставляет разработчикам честное управление размером шрифта, позволяя им изменять размер шрифта части, когда первоначально выбранный тип шрифта недоступен.

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

CSS-свойство font-size-adjust указывает, что размер шрифта элемента необходимо изменить на основе высоты строчных букв, а не вершины прописных букв.

Синтаксис:

• нет: указывает, что высота x шрифта не сохраняется
Число
• : это значение относится к аспектному номеру первого использованного шрифта, а затем остальные доступные шрифты будут масштабироваться в соответствии со следующей формулой: с = (а/а’) с

где:

Пример

Если 15px Roboto (со значением аспекта 0,50) был недоступен, а следующий заданный шрифт имел значение аспекта 0,40, размер шрифта используемого замещающего шрифта был бы 15*(0,50/ 0,40) = 18,75 пикселей

Интересно почитать: 11 фреймворков CSS, которые стоит ожидать в 2020 году

Как работает CSS font-size-adjust?

Вот демонстрация того, как работает функция font-size-adjust, обеспечивающая автоматическую настройку размера шрифта. Ниже приведен пример, в котором сравниваются два разных типа шрифта с разным соотношением сторон. Высоту x строчных букв двух шрифтов можно изменить, чтобы она соответствовала высоте x другого шрифта.

На изображении выше к тексту слева применен шрифт Comic Sans с соотношением сторон 0,53. Напротив, текст справа был использован со шрифтом Calibri, который имеет значение аспекта 0,47. В результате получается чрезвычайно мелкий текст. К нижней строке была применена настройка размера шрифта, равная 0,53, из-за чего размер шрифта на нижней стороне руки теперь имеет размер шрифта, измененный в соответствии с указанным соотношением сторон.

Значение свойства CSS font-size-adjust влияет на используемое значение font-size, но не влияет на его перечисляемое значение. Это влияет на размеры относительных единиц, поддерживаемых метриками шрифта, такими как ex и ch, для шрифтов, доступных в первую очередь, но не повреждает масштаб единиц em.

Поскольку числовые значения высоты строки сверяются с вычисленным размером размера шрифта, свойство CSS font-size-adjust не изменяет используемое значение высоты строки; скорее, он автоматически настраивает размер шрифта.

В CSS авторы часто указывают «высоту строки» как кратное размеру шрифта. Поскольку свойство CSS font-size-adjust влияет на используемое значение font-size, авторы должны обязательно установить высоту строки при использовании CSS font-size-adjust.

Примечание: Слишком узкая установка высоты строки может привести к перекрытию строк текста в этой ситуации.

Пример

index.html <голова> <тело>

Шрифт Без настройки.

Шрифт с настройкой.

Предварительный просмотр в {Browser}.

Совместимость с браузерами

Давайте поговорим о поддержке CSS в браузерах. В настоящее время только Firefox по умолчанию поддерживает свойство CSS font-size-adjust. Начиная с версии 43–30, Chrome и Opera также поддерживают это свойство за флагом «Экспериментальные функции веб-платформы», который можно включить в chrome://flags. Edge и Safari вообще не поддерживают свойство CSS font-size-adjust.

Свойство CSS font-size-adjust изначально было введено в CSS2, но позже было удалено в CSS2.1, а затем снова введено в CSS3.

Ниже приведена таблица, в которой перечислены основные браузеры вместе с версиями, поддерживающими эту функцию:

Вам также могут быть интересны: Руководство по совместимости браузеров для режимов написания CSS

Проверка размера шрифта в разных браузерах

С помощью LambdaTest вы можете беспрепятственно проверять размер шрифта в браузерах на настольных и мобильных устройствах, выполняя тестирование на совместимость между браузерами. На приведенных ниже снимках экрана мы реализуем свойство font-size-adjust для платформы Netlify и попытаемся получить к нему доступ в разных браузерах.

1. Войдите в панель управления LambdaTest. Вы можете бесплатно зарегистрироваться здесь.

2. Выберите Тестирование в реальном времени и оптимизируйте желаемые конфигурации.

3. Предварительный просмотр настройки размера шрифта CSS в несовместимом и совместимом браузере.

• Google Chrome (несовместимый)
• Firefox (совместимый)

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

Подведение итогов!

Теперь у вас должно быть представление о том, что делает свойство CSS font-size-adjust, почему оно необходимо и как определить значение аспекта различных шрифтов.

Поскольку CSS font-size-adjust изящно деградирует в старых браузерах, вы сможете перейти и начать использовать его сегодня, чтобы улучшить читаемость текста на рабочих веб-сайтах. Однако у него есть серьезные ограничения, поскольку он поддерживается только некоторыми браузерами, как вы уже убедились, выполнив тестирование совместимости между браузерами. В таких ситуациях следует выбирать шрифты практически одинакового соотношения, чтобы избежать разницы в размерах. Это руководство по кросс-браузерному тестированию в старых браузерах также может помочь.

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

Удачных испытаний!!!

Нимрити

Нимрити работает техническим писателем в LambdaTest. Увлеченная различными технологиями и техническими тенденциями, она всегда стремится исследовать уникальные аспекты веб-разработки и веб-тестирования.

Посмотреть профиль автора

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

В этой статье я рассмотрю еще один аспект микротипографики, а именно ведущий или то, что мы называем в CSS line-height 9.0004 . В этой статье я буду использовать термины взаимозаменяемо.

Другие сообщения из этой серии

• Несколько замечаний по использованию зажима и vw для установки размера шрифта
• Применение принципа близости для улучшения типографики веб-статей
• Установка адаптивных размеров шрифта в CSS
• Некоторые примечания по измерению (или ширине строки) на веб-сайтах

Что ведет?

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

Набор Athelas с узким интерлиньяжем слева и более щедрым справа.

С технической точки зрения, для браузеров ведущим на самом деле является не пробел между строками. Это высота каждой строки (отсюда line-height вместо, скажем, line-spacing ).

В пределах высоты строки сам текст получает область содержимого x пикселей в высоту, что определяется свойством CSS font-size и собственными метриками шрифта. Таким образом, у вас может быть размер шрифта из 16px , высота строки из 24px и высота области содержимого где-то посередине, в зависимости от того, как был разработан шрифт. Это повлияет на то, насколько щедрым будет казаться ведущий . Мы обсудим это позже в статье.

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

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

По мере увеличения размера шрифта высота строки должна увеличиваться. Удобно, мы можем — и должны — выразить line-height как кратное font-size . Например:

 html {
  размер шрифта: 100%; /* Вероятно, 16 пикселей */
}
п {
  размер шрифта: 1rem; /* Вероятно, 16 пикселей */
  высота строки: 1,5; /* Вероятно, 24 пикселя */
}
 

Выбор интерлиньяжа

Когда мы пишем длинный текст, такой как сообщение в блоге, нам нужно учитывать две вещи:

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

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

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

Как правило, основной текст должен иметь высоту строки в 1,3–1,7 раза больше размера шрифта . Заголовки и заголовки должны иметь высоту строки от 1,1 до 1,25 размера шрифта .

Примечание – это приблизительные направляющие. У авторов и их читателей будут свои предпочтения. Например, обычно . Я предпочитаю что-то около нижнего диапазона, когда читаю статью на ноутбуке, скажем, 1.45 , но это можно легко изменить. Как и любая типографика, это смесь искусства и науки.

Однако есть несколько объективных факторов, которые следует учитывать:

Гарнитура

Мы знаем, что гарнитуры различаются по своим пропорциям и тому, как браузеры вычисляют высоту области содержимого в строке текста. Как мы видели на примере измерения, одни и те же значения CSS могут привести к совершенно разным результатам. Возьмем этот пример, где IBM Plex Serif и Athelas имеют одинаковый размер с 1.5 высота строки . Ателас, кажется, имеет более щедрое лидерство.

IBM Plex Serif слева и Athelas справа.

Мы часто ссылаемся на размер шрифта x высота , когда описываем его общий размер. Высота x — это высота нижнего регистра x . Снова сравните два шрифта (а также обратите внимание, что Plex Serif «квадратнее», чем Athelas, но линии Athelas толще):

IBM Plex Serif «x» слева и Athelas справа.

Таким образом, высота строки будет частично зависеть от используемого вами шрифта . Чем больше высота x и площадь содержимого, тем больше требуется line-height .

Мера (или ширина строки)

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

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

Возьмем веб-сайт Мэтта Геммелла. Максимальная ширина абзаца сообщения в блоге составляет 750 пикселей . При этой ширине высота строки равна 1,6 :

Веб-сайт Мэтта Геммелла на 750px

Но когда абзацы просматриваются на более узком экране, например, на мобильном телефоне, и поэтому линии становятся уже, line-height составляет 1. 3 :

Веб-сайт Мэтта Геммелла на мобильном телефоне

В отличие от случая, когда мы устанавливали max-width для определения меры следует учитывать реальную ширину строки, а не количество слов, из которых она состоит. Это связано с тем, что усилия читателей при переходе к следующей строке зависят от расстояния от конца текущей строки до следующей, а не от количества слов в строке.

Обратите внимание: на самом деле мы не можем сказать, насколько широка линия. Мы можем изменить только line-height на основе ширины области просмотра, которая равна ширине экрана плюс ширина полосы прокрутки. Поскольку ширина линии явно ограничена шириной окна просмотра, корреляция достаточно близка.

CSS

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

line-height — это уникальное свойство CSS, поскольку оно может принимать безразмерное значение . Все другие пропорциональные свойства требуют той или иной единицы измерения, например, % , em , vh , px и т. д.0021 может взять единицу измерения, но иногда полезно ее не применять.

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

 html {
  размер шрифта: 125%; /* Вероятно, 20 пикселей */
}
тело {
  высота строки: 1,5; /* Безразмерный! */
}
п {
  размер шрифта: 1rem;
  /*
  Автоматически наследует высоту строки x1,5.
  Вероятно, вычислить размер шрифта 20px
  И высота строки 30px.
  */
}
цитата {
  размер шрифта: 0.875rem;
  /*
  Автоматически наследует высоту строки x1,5. 
  Вероятно, вычислить размер шрифта 14px
  И высота строки 21px.
  */
}
 

Если мы не хотим использовать наш множитель по умолчанию line-height (когда мы устанавливаем заголовки, например), мы должны явно установить line-height элемента, чтобы переопределить наше значение по умолчанию:

 html {
  размер шрифта: 125%; /* Вероятно, 20 пикселей */
}
тело {
  высота строки: 1,5;
}
ч2 {
  размер шрифта: 2.25rem;
  
  /*
  Автоматически наследует высоту строки x1,5.
  Вероятно, вычислить размер шрифта 36px
  И высота строки 54px.
  Что выглядит неправильно!
  Поэтому мы установим собственную высоту строки.
  */
  
  высота строки: 1,25; /* Все еще безразмерный! */
  
  /*
  Который, вероятно, будет вычисляться до 45 пикселей
  Что выглядит в самый раз 👍.
  */
}
 

Наконец, так же, как и при масштабировании размеров шрифта, мы можем использовать медиа-запросы для увеличения высоты строки в качестве ширины экрана и, следовательно, ширины строки:

 body {
  высота строки: 1,375;
}
@media screen & (минимальная ширина: 30em) {
  тело {
    высота строки: 1,4375;
  }
}
@media screen & (минимальная ширина: 30em) {
  тело {
    высота строки: 1,5;
  }
}
 

Искусство и наука, пробы и ошибки

Как и в случае с мерой, интерлиньяж определяется комбинацией различных более или менее объективных факторов (например, пропорций шрифта и ширины строки), а также вкусом и ощущением.