05Сетка и типографикаиз архива
Базовая линия 8 px на лендинге: есть смысл, если текст 17 px?
Карина 91 показала 7 августа 2025
- Правки
- 4 правки
- Последняя
- 15 августа 2025
- В разборе
кейс
Делаю лендинг для студии растяжки, это уже пятый платный заказ в этом году. Сетка 12 колонок на 1440, поля 120, гаттер 24. Решила всё сделать по базовой линии 8 px, как учили на курсах: текст 16/24, заголовки 40/48 и 28/32, отступы между блоками 96 и 64. А потом заказчица попросила текст крупнее, я поставила 17, и всё поехало: 17 на 24 смотрится тесно, 17 на 32 рыхло, а промежуточные значения на 8 не делятся. Второй вечер сижу и двигаю строки туда-сюда.
Вопрос такой: базовая линия на лендинге вообще нужна, или это больше для приложений и журналов? И если нужна, что делать с 17 px? Может, проще вернуть 16 и как-то объяснить заказчице, почему так лучше?
Вопрос такой: базовая линия на лендинге вообще нужна, или это больше для приложений и журналов? И если нужна, что делать с 17 px? Может, проще вернуть 16 и как-то объяснить заказчице, почему так лучше?
правка 1
правка принятаавтор кейса взял в работу
Карина, базовая линия нужна не ради кратности самой по себе, а ради ритма, и на лендинге она работает так же, как в приложении. Но жёсткие 8 px на кегль 17 не натянешь, и не надо мучиться. Как делаем у нас в студии:
- шаг 4 px для текста, 8 px для отступов между блоками. 17/26 в шаг 4 не ложится, поэтому берём сразу 18/28, а не 17;
- 18/28 для студии растяжки будет читаться лучше, аудитория там часто 30+, и смотрят с телефона в раздевалке, а не за столом;
- отступы между блоками оставь 96/64 на десктопе и 64/40 на 360, из-за кегля их трогать не нужно.
правка 2
И учти, что в браузере базовая линия всё равно немного поплывёт: межстрочный добавляет воздух сверху и снизу строки поровну, поэтому первая строка блока стоит не там, где в макете. Я отступы считаю от края блока, а не от линии шрифта. Держи кратность в отступах и в межстрочном, а идеальное попадание букв на линию оставь печати.
правка 3
У нас в приложениях то же самое, кратность 4 по высоте строк, и никто не страдает)
правка 4
Через неделю отчитываюсь. Сделала, как Елена писала: 18/28, отступы между блоками не трогала, на 360 текст 16/24. Показала заказчице оба варианта на телефоне, она даже не стала слушать объяснения, сразу ткнула в крупный. Макет приняли, сейчас в вёрстке. Геннадий, вам отдельное спасибо, я как раз боялась, что верстальщик всё сдвинет и скажет, что я не умею в сетку.