Параметры subject и body в mailto ссылках Захват экрана в GIF
На главную Наверх

06 февраля 2014

Font-weight: bolder для шрифтов со множеством начертаний

css typography Комментарии

Если вы используете шрифт со множеством начертаний, то вам, вероятно, захочется, чтобы теги strong и b не увеличивали жирность шрифта до фиксированного значения font-weight:700, как это происходит по-умолчанию, а использовали промежуточные значения, рассчитанные исходя из жирности шрифта родительского элемента.

Ведь не очень красиво, когда в ультратонком шрифте появляются жирные кляксы тегов strong.

Возьмём для примера Open Sans.

Open Sans и все его начертания

Open Sans имеет пять начертаний: Light 300, Normal 400, Semi-Bold 600, Bold 700 и Extra-Bold 800.
Цифры соответствуют значению font-weight.

Основной текст имеет начертание Light 300, заголовки и цитаты — Normal 400, а промо-блок — Semi-Bold 600:

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
h1, h2, h3, h4, h5, h6,
blockquote {
  font-weight: 400;
}
.promo {
  font-weight: 600;
}

Тег strong может встечаться и в основном тексте, и в цитатах, и промо-блоке. Надо это учесть.

По-умолчанию:

strong, b {
    font-weight: bold; /* bold = 700 */
}

А нам хочется, чтобы у strong и b для основного текста было Normal 400, для цитат и заголовков — Bold 700, а для промо блока — Extra-Bold 800. Это сохранит контраст между жирным и нежирным текстом примерно равным во всех случаях.

Уверен, многие пробовали использовать strong {font-weight: bolder;}, но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.

А всё потому, что согласно спецификации, значение bolder (lighter) увеличивает (уменьшает) унаследованное значение font-weight до следующего возможного для данного шрифта значения, согласно следующей таблице.

Наследуемое значениеbolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

Значения «bolder» и «lighter» в зависимости от наследуемого значения.

Но в браузерной CSS прописано strong, b {font-weight:bold;}, т.е. унаследуется значение «700», а потом оно ещё и увеличивается до «900». Поэтому кажется, что bolder работает неправильно.

Добавлено 22 января 2016

На самом деле это был баг и он присутствовал во всех браузерах на момент написания статьи. Позже баги в браузерах были исправлены. А мой пулл-реквест был принят в normalize.css.

Исправить это можно так:

/* сбрасываем стандартное «bold»,
шрифт становится таким же как его родительский элемент */
strong, b {
  font-weight: inherit;
}

/* теперь bolder будет вычисляться исходя из веса шрифта родительского элемента */
strong, b {
  font-weight: bolder;
}

Именно так, как два отдельных правила. Первое обнуляет значение font-weight из браузерной таблицы стилей, второе задаёт жирность уже в относительных, а не абсолютных единицах.

Теперь нам не придётся заботиться о вложенности элементов — каскад всё сделает автоматически. Мы можем вкладывать теги strong друг в друга.

Вложенные теги «strong». Толщина шрифта определяется исходя из значения родительского элемента.

Демка

Ограничения

Используя относительные значения font-weight мы получаем только по три градации жирности шрифта для bolder и lighter соответственно. Спецификация не гарантирует, что браузеры правильно сопоставят названия начертаний и числовые значения. Не гарантирует, что для шрифта найдётся более жирное или более тонкое начертание. У некоторых шрифтов всего два начертания, у некоторых может быть восемь.

Единственной гарантией при использовании bolder / lighter является то, что шрифт при значении «bolder» не будет тоньше, чем более легкие начертания этого шрифта, а при значении «lighter» будет не толще, чем более жирные начертания этого шрифта.

Чтобы более тонко настроить вес шрифта, надо использовать абсолютные значения.

Баги

Если у вас шрифт установлен в системе, но не подключен через @font-face, то Google Chrome определяет только Normal и Bold начертания шрифта. Чтобы локальный шрифт заработал, нужно дополнительно указать его font-family.

.fw300 {
  font-family: "Open Sans Light", "Open Sans";
  font-weight: 300;
}
.fw600 {
  font-family: "Open Sans SemiBold", "Open Sans";
  font-weight: 600;
}

© Павел Радьков 2014.

Поделиться
Твитнуть
Плюсануть
Поделиться
Телеграфировать
  • 04 июля 2017

Как правильно использовать переменные в препроцессорах Less и Sass

  • 13 февраля 2016

Как верстальщику получить код ревью

  • 02 мая 2014

Веб-лицензии для платных шрифтов могут стоить вам дорого

  • 01 мая 2014

Бесплатная замена платному Helvetica Neue

  • 25 апреля 2014

Деплой Docpad-сайта на GitHub Pages

  • 07 апреля 2014

Краткое руководство по Маркдауну

  • 10 февраля 2014

О каких дизайнерах мечтают верстальщики

  • 09 февраля 2014

Захват экрана в GIF

  • 06 февраля 2014

Font-weight: bolder для шрифтов со множеством начертаний

  • 04 февраля 2014

Параметры subject и body в mailto ссылках

  • 26 января 2014

Посещённая ссылка при наведении

  • 19 января 2014

CSS-селектор :not. Полезные примеры

  • 24 января 2013

Списки и картинки с флоатами

  • 09 декабря 2012

Pointer-events

  • 27 ноября 2012

Как отключить javascript в Google Chrome

  • 28 октября 2012

Перечёркивание крест-накрест

  • 08 апреля 2012

Отладка мобильных сайтов в Webkit. Инспектор кода на мобильных устройствах

  • 18 марта 2012

Горячие клавиши для выбора предыдущего и следующего слоя в Photoshop

  • 11 марта 2012

HTML-сущности и их UTF-коды

  • 22 февраля 2012

Нарезка в Photoshop — New Layer Based Slice

  • 12 февраля 2012

Как перекрасить поля с автозаполнением в Google Chrome