x
 
Андрей Ерес
26 октября 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Василий!

У меня вопрос к примеру из совета о вёрстке картинок: https://bureau.ru/soviet/20170831/

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


Я не Васи­лий, но попро­бую ответить.

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

Бюро­санс 30пк/40пк
Гель­ве­тика 30пк/40пк
Бюро­санс выгля­дит мельче и не вырав­ни­ва­ется с Гель­ве­ти­кой

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

С помо­щью font-size мы задаём раз­меры квад­рата, отно­си­тельно кото­рого рас­счи­ты­ва­ются реаль­ные раз­меры шрифта. Отно­си­тель­ные раз­меры реаль­ных сим­во­лов в шриф­тах раз­ли­ча­ются, поэтому Бюро­санс выгля­дит мельче Гель­ве­тики при одном кегле.

line-height задаёт высоту строки, внутри кото­рой рису­ются сим­волы. Но высота базо­вой линии зада­ётся внутри шрифта, поэтому рас­по­ло­жен­ные рядом Бюро­санс и Гель­ве­тика не вырав­ни­ва­ются друг с другом.

Из‑за этого рас­сто­я­ние между базо­выми лини­ями отли­ча­ется от высоты строки:

Бюро­санс 30пк/40пк
Гель­ве­тика 30пк/40пк
40пк
40пк
43пк
Рас­сто­я­ние между базо­выми больше высоты строки

В сле­ду­ю­щем совете рас­скажу о том, как мы решаем это про­блему в наших проектах.

Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Как бороться с багами? Часть десятая: не утонуть в багах и глюках Как организовать процесс сдачи задачи и код-ревью в рамках спринта? Типовые решения в вёрстке. Как форматировать ХТМЛ 9 Что нужно, чтобы сайт на Айфоне выглядел также как на Андроиде, а не в два раза меньше? 1




Недавно всплыло

Продолжение совета о системной фотосъёмке пластинок, часть 4 1 Колледж, вуз или Школа бюро, доступный кайф в архитектуре, как устроен Дизайн-буфет, когда откроются продажи Бюросайна 1 6 5