Вертикальный ритм: Вертикальный ритм / Хабр

Вертикальный ритм / Хабр

Сетка 8pt — это мощная система для создания последовательных и визуально привлекательных пользовательских интерфейсов. Этот пост о том, как установить вертикальный ритм и типографию в сетке 8pt. Чтобы лучше понимать материал, зацените статью «Введение в систему 8pt сеток» и «Сетка на основе 8pt: обводка и разметка».

Что же такое вертикальный ритм и почему он так важен

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

HTML хоть и «древняя» технология, но именно она до сих пор задаёт ритм современному Интернету.

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

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

Применение повторяющихся интервалов в наших проектах создает привычный и предсказуемый опыт. Статья Зелла Лью о том, почему вертикальный ритм важен, отлично это описывает:

«Повторение порождает осведомленность. Оно имеет способность создавать ощущение, будто вещи должны быть вместе. Начинает казаться, что кто-то все продумал, что это — часть плана». — Зелл Лью.

Что такое сетка базовых линий

Вы часто услышите термин «сетка базовых линий» в разговоре о достижении вертикального ритма. Сетка базовых линий позволяет нам отследить вертикальные расстояния между типом и другими объектами в дизайне, и я настоятельно рекомендую использовать её для достижения вертикального ритма. Однако, помните, что веб-браузеры немного по-разному измеряют типографскую разметку. Это может привести к своего рода неясности для дизайнеров и разработчиков, в зависимости от средств разработки и платформы.

Как можно измерять, используя базовые линии

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

Измерение пространства от базовой линии до базовой линии в тексте называется ведущим. Во многих дизайнерских программах оно будет автоматически установлено (Photoshop, Illustrator, InDesign).

Как измерить высоту строки

Высота строки — это ограничивающая рамка, созданная вокруг текста на сайтах или в программах дизайна, таких как Sketch или Figma. В CSS высоте строки можно придать размер пикселя, коэффициент или процент.

В примере выше, правый абзац имеет font-size 16px и значение line-height может быть записано как 24px, 1.5, или 150% в CSS.

Если типографию возможно измерить двумя разными способами, какой использовать

Мы установили, что веб-среда будет измерять типографию разными путями, и некоторые люди высказывают разное мнение о том, какой же путь правильный. Правильны оба по своим собственным причинам. Так возникли три подхода:

1. Измерять все по базовой линии.
2. Ваши встроенные приложения уже имеют эту возможность. Но вот с браузером все сложнее. Вы должны будете работать на основе базовой линии, а затем использовать весьма специфические интервалы, чтобы ваш контент выровнялся. Я бы не стал рекомендовать этот способ для систем с большой площадью поверхности. Если вас заинтересовал этот подход, и вы хотите узнать больше — в «Smashing Magazine» есть отличная статья.
3. Измерять все по высоте строки.
4. Это естественное состояние веб-браузера. Встроенные приложения также могут измерять по этому методу, хотя некоторые утверждают, что результат не так точен.
5. Позвольте веб-среде решить все за вас.
6. Осознайте, что разные платформы будут делать разные типы измерений. Ну и забейте. Лучше достигнуть устойчивой последовательности вместо тщательного изучения различий пикселей.

Выбор своего подхода

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

Как вы можете уменьшить количество решений, которые ваша команда должна принять?

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

«Достижение последовательного вертикального ритма является самой важной частью дизайна» — Джоэль Бийкелман.

Создание вертикального ритма

Использование сетки 8pt для измерения высоты ваших элементов является отличным началом для создания вертикального ритма. Пост Энтони Коллурафичи о сетке 8pt хорошо рассказывает, как это работает в программе Sketch.

Общий вопрос, который я получаю, относящийся к сетке 8pt — как я настраиваю мои сетки в Sketch или Illustrator. По правде говоря, обычно я не использую эти функции, когда занимаюсь элементами пользовательского интерфейса. Я вообще фанат сеточных макетов и уважаю код как источник истины. Я буду использовать элементы интервала в своих файлах, чтобы сделать макет базовой сетки, но я, как правило, просто измеряю каждый элемент. Я использую сетку 8pt как относительную пространственную систему, а не строгую сетку.

Дополнительное чтение

Здесь несколько статей и ресурсов, которые помогли мне ответить на некоторые сложные вопросы.

• Zell Liew’s Why is Vertical Rhythm an Important Typography Practice?
• Wilson Miner’s Setting Type on the Web to a Baseline Grid
• Priyanka Godbole’s A framework for creating a predictable & harmonious spacing system for faster design-dev handoff
• Anthony Collurafici’s Sketch Workflow  —  8-point Soft Grids
• Google’s Material Design Guidelines about Metrics & Keylines
• Vincent De Oliveira’s Deep dive CSS: font metrics, line-height and vertical-align
• Leigh Taylor  —  The Grid: Website пост, где вы можете скачать примеры.

Вертикальный ритм в web дизайне

Блог разработчика Дизайн Почему вертикальный ритм важная часть типографики?

Вы возможно слышали термин «вертикальный ритм» если вы немного интересовались типографикой для веба. Это одна из наиболее важных частей при работе с типографикой. Я использую вертикальный ритм во всех моих сайтах с тех пор как прочитал про него.

Когда-то, когда я не понимал почему вертикальный ритм так важен, я задал себе два вопроса: «Как Вертикальный ритм улучшает дизайн сайта?» и «Какие уроки я могу извлечь из этого, чтобы улучшить свой дизайн?»

Я решил это выяснить и далее привожу свои мысли.

Что такое вертикальный ритм?

Вертикальный ритм это концепция пришедшая из полиграфии. Мы пытаемся сохранить на странице вертикальное пространство между элементами согласованными друг с другом.

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

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

Сетки в интернете немного отличаются из-за того как работает свойство line-height. Мы часто видим базовую сетку, которая выглядит так:

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

На этом этапе мы знаем, что Вертикальный ритм требует базовой линии и базовой сетки. Следующий вопрос «как мы будем их задавать?».

Базовая линия определяется свойством текста line-height. Предположим, что line-height задано 24px. Значит базовая линия тоже 24px.

Реализация вертикального ритма с этого момента проста. Существует два правила:

1. Устанавливать отступы между элементами кратно 24px
2. Устанавливать свойство line-height кратно 24px

В CSS это выглядит следующим образом:

h2 {
  line-height: 48px;
  margin: 24px 0;
}

p {
  line-height: 24px;
  margin: 24px 0;
}

Просто следую этому правилу можно получить неплохой результат:

Какой дизайн лучше? Вы почувствуете это, так как он станет:

• Более спокойный
• Более упорядоченный
• Легче читать
• Более профессиональный
• и так далее

Что делает эти два правила такими мощными, что Вы сразу видите разницу в верстке? Это принцип дизайна, называемый Повторением.

Принцип повторения

Он заключается в дублировании одной или более частей в дизайне. Повторяться может все что угодно. Например:

• Шрифты
• Начертание (жирный, курсив)
• Размер шрифта
• Цвет
• Линии
• Формы

Можно даже потерять отступы, как мы делаем это с отступом в 24px.

Повторение создает ощущение родственности. Как будто элементы взаимосвязаны друг с другом. Это дает ощущение, как будто кто-то объединил все, как части одного плана.

Возьмем один круг

Что этот круг делает здесь? Что имелось в виду? Что дизайнер хотел этим сказать?

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

Посмотрим что произойдет, если объединим круги в группу.

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

Много кругов. Теперь вы видите паттерн.

Что вы чувствуете когда смотрите на эту картинку? Как она соотносится в двумя предыдущими рисунками?

Ощущения такие же как при сравнении картинки до/после с вертикальным ритмом.

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

Вертикальный ритм работает тем же причинам. Мы просто повторяем базовую линию через всю страницу.

Разнообразные повторения

Мы не можем просто поделить все на 24px. Это было бы скучно. Нам нужно что-то менять, но как?

Ответ может быть найден внутри правил вертикального ритма

1. Устанавливать отступы между элементами кратно 24px
2. Устанавливать свойство line-height кратно 24px

Ключевое слово «кратно».

Можно умножать 24 на любое значение, какое захотите. Главное множитель должен оставаться постоянным. Поскольку у нас уже есть сильная база — 24px. Следующая сильная вариация, которую мы можем получить это умножить или поделить на 2. Здесь мы получаем либо 12, либо 48.

Продолжая по аналогии, получим размерный ряд: 12px, 24px, 36px, 48px, 60px, 72px …

Попробуем использовать любые из этих значений как margin или padding для любых элементов и вы почувствуете как они станут частью дизайна.

Повторение 24px где угодно

Пока мы сосредоточены на повторении 24px сверху вниз, но можно повторять и по горизонтали. Попробуйте использовать их как левый и правый padding компонентов.

.component {
  padding-left: 24px;
  padding-right: 24px;
}

Попробуйте использовать как разделитель между столбцами в сетке.

.grid {
  display: flex;
  justify-content: space-between
  margin-left: -12px;
  margin-right: -12px;
  overflow: hidden;
}
. grid-item {
  margin: 24px;
}

Попробуйте воспользоваться этим для создания padding или margin между текстом и краем экрана (особенно на мобильных устройствах.)

article {
  margin-left: 24px;
  margin-right: 24px;
}

@media (min-width: 600px) {
  article {
    margin-left: 0;
    margin-right: 0;
  }
}

Заключение

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

Повторение дает возможность создать ощущение, что вещи связаны вместе. Что они части одного плана.

После исследования связи между Вертикальным ритмом и повторением мы пошли дальше и сформулировали несколько вариантов замены 24px для придания большей гибкости дизайну.

Наконец, после получения повторения 24px по вертикали, мы применили повторение горизонтально.

Почему вертикальный ритм — важная практика типографики?

Опубликовано 000Z»> 24 февраля 2016 г.

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

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

Решил узнать почему. Вот мои мысли.

Давайте начнем статью с некоторого контекста, чтобы мы были на одной странице.

Что такое вертикальный ритм?

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

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

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

Базовая сетка в полиграфическом дизайне

Базовые сетки в Интернете немного отличаются из-за того, как работает свойство line-height . Вместо этого мы часто видим базовую сетку, которая выглядит так:

.

Базовая сетка для Интернета

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

На данный момент мы знаем, что для вертикального ритма требуется базовая линия и базовая сетка. Тогда следующий вопрос: « как мы определяем базовый уровень?»

Базовый уровень определяется свойством line-height основного текста . Допустим, ваш основной текст имеет вычисленное значение line-height 24px. Ваша базовая линия составляет 24 пикселя.

С этого момента реализовать вертикальный ритм очень просто. Есть два правила:

1. Установите вертикальное белое пространство между элементами на , кратное 24px .
2. Установите для line-height всех текстовых элементов значение , кратное 24px .

Простая реализация этих двух правил может выглядеть так:

 ч2 {
  высота строки: 48px;
  поле: 24px 0;
}
п {
  высота строки: 24px;
  поле: 24px 0;
} 

Простое следование этим простым правилам приводит к таким результатам:

До и после внедрения вертикального ритма

Какой дизайн кажется лучше? Под словом «лучше» могут подразумеваться такие вещи, как чувство:

• Спокойнее
• Более аккуратный
• Легче читать
• Более профессиональный
• (и т. д.)…

Но почему? Что делает эти два правила такими мощными, что они сразу же меняют ваше восприятие двух (хотя и простых) конструкций?

Давайте еще раз посмотрим на два правила:

1. Установите вертикальный пробел между элементами равным кратно 24px .
2. Установите для высоты строки всех текстовых элементов значение , кратное 24 пикселям .

Вы заметили сходство между этими двумя утверждениями? Да, это , кратное 24px .

Эти два правила связаны с принципом дизайна, называемым Повторение .

Принцип повторения

Повторение — это просто повторение количества повторений одного или нескольких аспектов дизайна. Все можно повторить. Некоторые примеры:

• шрифт
• вес шрифта
• размер шрифта
• цвет
• строка
• форма (например, круг, квадрат или треугольник)
• (и т. д.) …

Вы даже можете повторять пространственные отношения. В случае вертикального ритма мы повторяем интервал в 24 пикселя по всей странице.

Итак, что делает повторение?

Повторение порождает знакомство . У него есть способность заставить вещи чувствовать, как будто они принадлежат друг другу. Создается ощущение, что кто-то все продумал, как будто это часть плана.

Возьмем, к примеру, одинокий круг в глуши.

Одинокий, я Мистер Одинокий, у меня никого нет ~~~ ♪

Что там делает круг? Что это должно означать? Что хотел сказать дизайнер?

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

Посмотрите, что произойдет, если вы добавите больше кругов в группу

Больше кругов

Круг больше не кажется таким неуместным, не так ли? Разве вы не чувствуете себя более комфортно сейчас?

Посмотрите, что произойдет, если вы добавите еще больше кругов в группу

Моар-моар-моар круги!!!

Ач. Много кругов. Теперь вы начинаете видеть закономерность.

Теперь, что вы чувствуете, когда смотрите на это изображение? Как это соотносится с предыдущими двумя изображениями?

Ощущения почти такие же, как когда вы пытались сравнить пример до и после вертикального ритма, не так ли?

Вау! Почему?

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

Вертикальный ритм работает по той же причине. Мы просто повторяем базовую линию на всей странице.

А вот с Вертикальным Ритмом есть одна хитрость . Хитрость заключается в определении базовой линии. Думаю об этом. Почему из всех чисел мы выбрали 24 пикселя в качестве базовой линии?

Есть только одна причина: это значение, которое чаще всего повторяется на странице.

Еще раз взгляните на базовую сетку. Обратите внимание, что вы видите сейчас:

Видите, как базовая линия 24 пикселя повторяется несколько раз?

Умопомрачительно просто, не правда ли.

Теперь, когда мы знаем принцип повторения, как мы можем применить его к остальной части нашего дизайна?

Повторить еще раз. Вы также можете варьировать количество повторений.

Различные повторения

Мы не можем разделить все по 24 пикселя. Это будет скучно. Нам нужно где-то добавить несколько вариантов. Но как?

Ответ можно найти в двух правилах вертикального ритма:

1. Установите вертикальное белое пространство между элементами равным , кратному , равному 24 пикселям.
2. Установите для высоты строки всех текстовых элементов значение, кратное из 24 пикселей.

Да, ключевое слово кратно .

Вы можете умножать 24 пикселя на любой коэффициент. Ключ в том, чтобы оставаться последовательным. Поскольку у нас уже есть сильная база в 24 пикселя, следующий самый сильный вариант , который мы можем иметь, — умножить или разделить 24 пикселя на 2 . Здесь мы получаем либо 12px, либо 48px.

Продолжайте этот процесс умножения, и в конечном итоге вы получите шкалу:

.

12 пикселей, 24 пикселей, 36 пикселей, 48 пикселей, 60 пикселей, 72 пикселей …

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

Второй элемент заголовка имеет margin-top 72px вместо 24px

Конечно, не забывайте повторять число, которое вы решили использовать!

Повторяющиеся 24 пикселя В другом месте

Пока что мы сосредоточены на повторении потока 24 пикселей сверху вниз. Как вы думаете, вы не можете повторить 24 пикселя по горизонтали слева и справа?

Попробуйте на левом и правом отступах компонентов:

 .компонент {
  отступ слева: 24px;
  отступ справа: 24px;
} 

Попробуйте использовать его как желоб для элементов сетки:

 .сетка {
  дисплей: гибкий;
  выравнивание содержимого: пробел между
  поле слева: -12px;
  поле справа: -12px;
  переполнение: скрыто;
}
.grid-элемент {
  поля: 24px;
} 

Попробуйте использовать его в качестве отступа (или поля) между текстом и краем экрана (особенно на мобильном устройстве)

 статья {
  поле слева: 24px;
  поле справа: 24px;
}
@media (минимальная ширина: 600 пикселей) {
  статья {
    поле слева: 0;
    поле справа: 0;
  }
} 

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

Таким образом, вертикальный ритм важен, потому что он следует одному из принципов дизайна – повторению.

Повторение может заставить вещи чувствовать, что они связаны друг с другом. Создается ощущение, что кто-то все продумал, как будто это часть плана.

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

Наконец, устав повторять 24 пикселя по вертикали, мы попробовали повторить 24 пикселя по горизонтали.

Вот оно! Что вы узнали о вертикальном ритме? Как это знание повлияет на ваш дизайн или код с этого момента? Позвольте мне знать в комментариях ниже!

Я надеюсь, что вы нашли это полезным. Если вы это сделали, я надеюсь, что вы поделитесь этим с кто-нибудь другой. И не стесняйтесь обращаться, если у вас есть любые вопросы или комментарии.

Спасибо за чтение, всего наилучшего и удачного кодирования!

Хотите стать лучшим Frontend-разработчиком?

Не беспокойтесь о том, с чего начать. Я пришлю вам библиотеку статей, которые фронтенд-разработчики сочли полезными!

• 60+ статей CSS
• 90+ статей JavaScript

Я также буду присылать вам одну статью каждую неделю, чтобы помочь вам невероятно быстро улучшить свои навыки FED!

Имя

Адрес электронной почты

Как легко создать адаптивный вертикальный ритм с помощью CSS

Поделиться

• Поделиться
• Твитнуть
• Поделиться
• Приколи

Кодирование Паула Боровска • 06 мая 2020 г. • 6 минут ПРОЧИТАТЬ

Поддержка систем сетки на веб-сайте может быть сложной задачей. Внедрение сетки CSS стало стандартной практикой, тогда как внедрение горизонтальных сеток, также известных как вертикальный ритм, тоже может быть таким. Тем не менее, есть дополнительная сложность благодаря адаптивному дизайну и адаптивной типографике. Хотя на самом деле довольно легко создать отзывчивый вертикальный ритм, гибкий для адаптивного дизайна и отзывчивой типографики.

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

Что делает отзывчивый вертикальный ритм важной реализацией?

Основы вертикального ритма

Что делает вертикальный ритм чувствительным?

1. Настройка базового шаблона CSS

2. Добавление интервала

3. Различия в размерах шрифтов

4. Генерация множителей расстояния

5. Создание отзывчивого вертикального ритма

А размеры планшета?

Настройка вертикального ритма рабочего стола с помощью медиазапросов

Заключение

Что делает чувствительный вертикальный ритм важной реализацией?

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

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

Кодировать вертикальный ритм не так уж сложно, если вы никогда этого не делали. Процесс можно разбить на несколько шагов — ровно 5 шагов, как описано в этом уроке.

• Создание интерактивных высокооптимизированных электронных писем AMP
• Создайте красивый и отзывчивый HTML-шаблон электронной почты с помощью открыток
• Создание страницы продукта с интерактивными цветами в HTML, CSS3 и jQuery
• Создание минималистского дизайна веб-сайта с помощью Slides Framework

Основы вертикального ритма

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

Какие свойства CSS используют вертикальные ритмы?

• Высота строки
• Верхнее и нижнее смещение
• Высота, минимальная высота, максимальная высота
• Отступ сверху, отступ снизу, отступ сверху, отступ снизу.

Что делает вертикальный ритм чувствительным?

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

1. Настройка базового шаблона CSS

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

Если вы имеете дело с адаптивной типографикой, какой размер шрифта вы хотите выбрать в качестве основы по умолчанию? Я рекомендую создавать все отзывчивые вертикальные ритмы с помощью прогрессивного улучшения. И это то, что мы будем делать в этом уроке. Итак, начните с типографики с самых маленьких экранов.

тело {
 /* Установить размер шрифта по умолчанию только для мобильных устройств */
    размер шрифта: 12px;
    /* Установить базовую высоту строки только для мобильных устройств */
    высота строки: 1,5; /* 18 пикселей */
}
 

С помощью этих двух объявлений вы создали интервал вертикального ритма в 18 пикселей: 12 x 1,5 = 18.

2. Добавление интервала

При установленном вертикальном ритме по умолчанию интервал следующий. Если поля над и под абзацами одинаковы, математика проста.

По умолчанию веб-браузеры вставляют в абзацы верхнее и нижнее поле шириной 1em. Нам просто нужно переопределить его, чтобы он соответствовал нашему вертикальному ритму.

п {
 поле сверху: 1.5em; /* 18 пикселей */
 нижняя граница: 1.5em; /* 18 пикселей */

 /* !Размер шрифта и высота строки только для справки! */
 /* размер шрифта: 1em; */ /* 14 пикселей */
 /* высота строки: 1em; */ /* 18 пикселей */
}
 

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

3. Различия в размерах шрифта

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

Ниже мы настраиваем высоту строки и поля для h2 с размером шрифта 20 пикселей по сравнению с базовым вертикальным ритмом 18 пикселей.

ч2 {
 размер шрифта: 1.6667em; /* 20 пикселей; */
 высота строки: 1.8000em; /* 36 пикселей */
 маржа сверху: 0,9Эм; /* 18 пикселей */
 нижняя граница: 0,9em; /* 18 пикселей */
}
 

• Краткая история создания веб-сайтов
• Инструменты Дору Чобану Лучшие инструменты для совместной работы над кодом
• 18 CSS3 и jQuery для загрузки анимаций

Как мы получили эти цифры?

• Чтобы вычислить размер шрифта заголовка, разделите желаемый размер шрифта в пикселях (20 пикселей) на размер шрифта по умолчанию (12 пикселей): 20/12 = 1,6667
• Чтобы вычислить новую высоту строки, сначала удвойте высоту строки (из-за большего размера шрифта), затем разделите новую высоту строки (36 пикселей) на размер шрифта заголовка (20 пикселей): (18*2) = 36 , 36/20 = 1,8
• Чтобы рассчитать поля, разделите высоту строки по умолчанию (18 пикселей) на размер шрифта заголовка (20 пикселей): 18/20: 0,9

Может ли новая высота строки быть другой? Да, конечно. Дизайн определяет высоту строк. Например, это может быть 2,5. В этом примере для простоты предполагается, что высота строки h2 удвоена.

Что делать, если вы хотите, чтобы поля были больше, чем высота строки по умолчанию 18 пикселей? Вот где множители приходят!

4. Генерация множителей расстояния

В приведенном примере интервал между h2 и абзацем будет точно таким же, как интервал между несколькими абзацами. Вот тут-то и появляются множители. Мы можем создать их в простом CSS, но использование переменных с LESS или SASS также сделает математику более точной и простой в обращении.

Добавление множителей в вашу систему CSS — отличный способ иметь дополнительные классы для различных количеств единиц вертикального ритма, таких как x1, x2 и т. д. Затем вы можете использовать эти классы в качестве дополнительных отступов и интервалов вокруг элементов.

Вы сможете повторно использовать интервалы по мере необходимости вместо жесткого кодирования их в определенный элемент. Таким образом, код можно легко настроить, если вы хотите добавить 3-кратный интервал ниже h2 и абзаца или 2-кратный интервал между h2 и h3. Этот метод также облегчает отзывчивый вертикальный ритм. Это потому, что все, что вам нужно сделать, это обновить повторно используемые множители вместо множества зависимостей CSS. Да, вы можете использовать этот отступ и для других элементов, таких как изображения или разделы.

.vertical-spacing-bottom-1x {
 обивка снизу: 1,5 см; /* 18 пикселей */
}

.vertical-spacing-bottom-2x {
 заполнение снизу: 3em; /* 36 пикселей */
}

.vertical-spacing-bottom-3x {
 обивка снизу: 4,5 см; /* 54px */
}
 

В математике нет ничего сложного (18*X)/12 = #em. Естественно, для создания вы следуете тому же процессу и для множителей padding-top.

.vertical-spacing-top-1x {
 обивка снизу: 1,5 см; /* 18 пикселей */
}

.vertical-spacing-top-2x {
 заполнение снизу: 3em; /* 36 пикселей */
}

.vertical-spacing-top-3x {
 обивка снизу: 4,5 см; /* 54px */
}
 

5.

Создание отзывчивого вертикального ритма

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

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

• Адаптивный веб-дизайн: 50 примеров и рекомендаций
• Retina Ready изображения и адаптивный веб-дизайн
• Как управлять пустым пространством в адаптивных макетах для мобильных устройств

Как насчет размеров планшетов?

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

Настройка вертикального ритма рабочего стола с помощью медиа-запросов

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

Это действительно так просто. Хотя это может быть утомительно и избыточно. Вот почему рекомендуется использовать LESS или SASS, поскольку они позволяют использовать переменные.

Только экран @media и (минимальная ширина: 600 пикселей) {
Только экран @media и (минимальная ширина: 600 пикселей) {
тело {
 /* Установить размер шрифта по умолчанию только для рабочего стола */
 размер шрифта: 16px;
 /* Установить базовую высоту строки только для рабочего стола */
 высота строки: 1,375; /* 22 пикселя */
}
 

Далее нам нужно установить поля по умолчанию для тега p и настроить все числа, окружающие h2.

п {
поле сверху: 1.375em; /* 22 пикселя */
нижняя граница: 1.375em; /* 22 пикселя */

/* !Размер шрифта и высота строки только для справки! */
/* размер шрифта: 1em; */ /* 16 пикселей */
/* высота строки: 1em; */ /* 22 пикселя */
}
ч2 {
размер шрифта: 1,75 em; /* 28 пикселей; */
высота строки: 1,5714 em; /* 33 пикселя (1,5*22 пикселя) */
верхнее поле: 0,7857em; /* 18 пикселей */
нижняя граница: 0,7857em; /* 18 пикселей */
}
 

Наконец, нам нужно настроить классы множителей.

.vertical-spacing-bottom-1x {
обивка-дно: 1,375; /* 22 пикселя */
}

.vertical-spacing-bottom-2x {
обивка снизу: 2,75 см; /* 44 пикселя */
}

.vertical-spacing-bottom-3x {
обивка снизу: 4.125em; /* 66 пикселей */
}
.vertical-spacing-top-1x {
обивка-дно: 1,375; /* 22 пикселя */
}

.vertical-spacing-top-2x {
обивка снизу: 2,75 см; /* 44 пикселя */
}

.vertical-spacing-top-3x {
 обивка снизу: 4.125em; /* 66 пикселей */
}
}/* End @media only screen and (min-width: 600px) */
 

Заключение

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