Baseline grid что это
Существует два вида непечатаемых сеток: сетка из базовых линий для выравнивания колонок текста и сетка документа для выравнивания объектов. На экране сетка из базовых линий напоминает разлинованную страницу блокнота, а сетка документа – миллиметровую бумагу. Сетки обоих видов можно настраивать.
При отображении на экране видны следующие особенности сеток.
Сетка из базовых линий покрывает все развороты, а сетка документа – весь монтажный стол.
Сетки из базовых линий и сетки документа отображаются на каждом развороте; их нельзя связывать с шаблонами.
Сетка документа может отображаться поверх всех направляющих, слоев и объектов либо под ними, однако ее нельзя связывать со слоями.
Настройка сетки из базовых линий
Настройка сетки из базовых линий для всего документа производится в диалоговом окне «Установки сетки».
Базовые линии для фрейма можно настроить в диалоговом окне «Параметры текстового фрейма» (см. раздел Изменение свойств текстовых фреймов).
Выберите меню «Редактирование» > «Установки» > «Сетки» (Windows) или «InDesign» > «Установки» > «Сетки» (Mac OS).
Выберите цвет базовой сетки в меню «Цвет». В этом меню можно также выбрать «Заказной».
В параметре «Относительно» укажите положение начала сетки - верхний край страницы или верхнее поле.
В поле «Начало» введите значение, на которое следует сдвинуть сетку относительно верхнего края страницы или верхнего поля страницы (в зависимости от параметра, выбранного в меню «Относительно»). При возникновении проблем с выравниванием вертикальной линейки по этой сетке попробуйте начать с нулевого значения.
В поле «Линия через каждые» введите значение интервала между линиями сетки. В большинстве случаев это значение будет соответствовать интерлиньяжу основного текста, чтобы строки текста было легко выровнять по этой сетке.
A. Первая линия сетки B. Интервал между линиями сетки
В поле «Показывать в масштабе от» введите значение, соответствующее минимальному масштабу, для которого сетка будет отображаться. Во избежание отображения слишком густой сетки это значение должно быть достаточно большим.
Использование сеток
Существует два вида непечатаемых сеток: сетка из базовых линий для выравнивания колонок текста и сетка документа для выравнивания объектов. На экране сетка из базовых линий напоминает разлинованную страницу блокнота, а сетка документа – миллиметровую бумагу. Сетки обоих видов можно настраивать.
При отображении на экране видны следующие особенности сеток.
Сетка из базовых линий покрывает все развороты, а сетка документа – весь монтажный стол.
Сетки из базовых линий и сетки документа отображаются на каждом развороте; их нельзя связывать с шаблонами.
Сетка документа может отображаться поверх всех направляющих, слоев и объектов либо под ними, однако ее нельзя связывать со слоями.
Use grids
Two kinds of nonprinting grids are available: a baseline grid for aligning columns of text, and a document grid for aligning objects. On the screen, a baseline grid resembles ruled notebook paper, and a document grid resembles graph paper. You can customize both kinds of grids.
When a grid is visible, you can observe the following characteristics:
The baseline grid covers entire spreads, but the document grid covers the entire pasteboard.
Baseline grids and document grids appear on every spread and cannot be assigned to any master.
The document grid can appear in front of or behind all guides, layers, and objects, but cannot be assigned to any layer.
Set up a baseline grid
Use Grid Preferences to set up a baseline grid for the entire document.
You can set up a baseline grid for a frame by using the Text Frame Options. (See Change text frame properties.)
Choose Edit > Preferences > Grids (Windows) or InDesign > Preferences > Grids (Mac OS).
Specify a baseline grid color by choosing a color in the Color menu. You can also choose Custom in the Color menu.
For Relative To, specify whether you want the grid to start at the top of the page or the top margin.
For Start, type a value to offset the grid from either the top of the page or the top margin of the page, depending on the option you choose from the Relative To menu. If you have trouble aligning the vertical ruler to this grid, try starting with a value of zero.
For Increment Every, type a value for the spacing between grid lines. In most cases, type a value that equals your body text leading, so that lines of text align perfectly to this grid.
A. First grid line B. Increment between grid lines
For View Threshold, type a value to specify the magnification below which the grid does not appear. Increase the view threshold to prevent crowded grid lines at lower magnifications.
Настройка сетки из базовых линий
Настройка сетки из базовых линий для всего документа производится в диалоговом окне «Установки сетки».
Базовые линии для фрейма можно настроить в диалоговом окне «Параметры текстового фрейма» (см. раздел Изменение свойств текстовых фреймов).
Выберите меню «Редактирование» > «Установки» > «Сетки» (Windows) или «InDesign» > «Установки» > «Сетки» (Mac OS).
Выберите цвет базовой сетки в меню «Цвет». В этом меню можно также выбрать «Заказной».
В параметре «Относительно» укажите положение начала сетки - верхний край страницы или верхнее поле.
В поле «Начало» введите значение, на которое следует сдвинуть сетку относительно верхнего края страницы или верхнего поля страницы (в зависимости от параметра, выбранного в меню «Относительно»). При возникновении проблем с выравниванием вертикальной линейки по этой сетке попробуйте начать с нулевого значения.
В поле «Линия через каждые» введите значение интервала между линиями сетки. В большинстве случаев это значение будет соответствовать интерлиньяжу основного текста, чтобы строки текста было легко выровнять по этой сетке.
A. Первая линия сетки B. Интервал между линиями сетки
В поле «Показывать в масштабе от» введите значение, соответствующее минимальному масштабу, для которого сетка будет отображаться. Во избежание отображения слишком густой сетки это значение должно быть достаточно большим.
Вертикальный ритм
Сетка 8pt — это мощная система для создания последовательных и визуально привлекательных пользовательских интерфейсов. Этот пост о том, как установить вертикальный ритм и типографию в сетке 8pt. Чтобы лучше понимать материал, зацените статью "Введение в систему 8pt сеток" и "Сетка на основе 8pt: обводка и разметка".
Что же такое вертикальный ритм и почему он так важен
Ритм достигается тогда, когда элементы вашего дизайна состоят из повторяющихся шаблонов. Это позволяет вашему окончательному дизайну выглядеть преднамеренно, профессионально и последовательно.
HTML хоть и «древняя» технология, но именно она до сих пор задаёт ритм современному Интернету.
Разработка HTML сайтов — это своего рода искусство, постичь все нюансы которого доступно не только лишь всем. Веб-мастера из компании EDISON подтверждают.
Интернет-ресурсы должны быть удобны и понятны для всех. Поэтому важно чтобы была сделана интернационализация и локализация сайта.
Применение повторяющихся интервалов в наших проектах создает привычный и предсказуемый опыт. Статья Зелла Лью о том, почему вертикальный ритм важен, отлично это описывает:
«Повторение порождает осведомленность. Оно имеет способность создавать ощущение, будто вещи должны быть вместе. Начинает казаться, что кто-то все продумал, что это — часть плана». — Зелл Лью.
Что такое сетка базовых линий
Вы часто услышите термин «сетка базовых линий» в разговоре о достижении вертикального ритма. Сетка базовых линий позволяет нам отследить вертикальные расстояния между типом и другими объектами в дизайне, и я настоятельно рекомендую использовать её для достижения вертикального ритма. Однако, помните, что веб-браузеры немного по-разному измеряют типографскую разметку. Это может привести к своего рода неясности для дизайнеров и разработчиков, в зависимости от средств разработки и платформы.
Как можно измерять, используя базовые линии
Базовая линия — это линия, проходящая по нижнему краю прямых знаков. Это общий термин в полиграфическом дизайне, и многие классические программы для дизайна предназначены для него. Опыт использования собственных приложений, как правило, построен вне базовой линии.
Измерение пространства от базовой линии до базовой линии в тексте называется ведущим. Во многих дизайнерских программах оно будет автоматически установлено (Photoshop, Illustrator, InDesign).
Как измерить высоту строки
Высота строки — это ограничивающая рамка, созданная вокруг текста на сайтах или в программах дизайна, таких как Sketch или Figma. В CSS высоте строки можно придать размер пикселя, коэффициент или процент.
В примере выше, правый абзац имеет font-size 16px и значение line-height может быть записано как 24px, 1.5, или 150% в CSS.
Если типографию возможно измерить двумя разными способами, какой использовать
Мы установили, что веб-среда будет измерять типографию разными путями, и некоторые люди высказывают разное мнение о том, какой же путь правильный. Правильны оба по своим собственным причинам. Так возникли три подхода:
- Измерять все по базовой линии.
- Ваши встроенные приложения уже имеют эту возможность. Но вот с браузером все сложнее. Вы должны будете работать на основе базовой линии, а затем использовать весьма специфические интервалы, чтобы ваш контент выровнялся. Я бы не стал рекомендовать этот способ для систем с большой площадью поверхности. Если вас заинтересовал этот подход, и вы хотите узнать больше — в «Smashing Magazine» есть отличная статья.
- Измерять все по высоте строки.
- Это естественное состояние веб-браузера. Встроенные приложения также могут измерять по этому методу, хотя некоторые утверждают, что результат не так точен.
- Позвольте веб-среде решить все за вас.
- Осознайте, что разные платформы будут делать разные типы измерений. Ну и забейте. Лучше достигнуть устойчивой последовательности вместо тщательного изучения различий пикселей.
Выбор своего подхода
Вы должны будете принять это решение для Вашей компании и/или продукта на основе Ваших требований и целей. В этом решении должны быть учтены: ваш опыт в веб-среде, количество вкладчиков, и основные компетенции команды. Чем больше размер команды, тем труднее следовать правилам.
Как вы можете уменьшить количество решений, которые ваша команда должна принять?
Имейте в виду, что последовательная система — лучше, чем её отсутствие. Вы всегда можете выполнить итерацию по системе, но одноразовые решения будут дорогостоящими.
«Достижение последовательного вертикального ритма является самой важной частью дизайна» — Джоэль Бийкелман.
Создание вертикального ритма
Использование сетки 8pt для измерения высоты ваших элементов является отличным началом для создания вертикального ритма. Пост Энтони Коллурафичи о сетке 8pt хорошо рассказывает, как это работает в программе Sketch.
Общий вопрос, который я получаю, относящийся к сетке 8pt — как я настраиваю мои сетки в Sketch или Illustrator. По правде говоря, обычно я не использую эти функции, когда занимаюсь элементами пользовательского интерфейса. Я вообще фанат сеточных макетов и уважаю код как источник истины. Я буду использовать элементы интервала в своих файлах, чтобы сделать макет базовой сетки, но я, как правило, просто измеряю каждый элемент. Я использую сетку 8pt как относительную пространственную систему, а не строгую сетку.
Дополнительное чтение
Здесь несколько статей и ресурсов, которые помогли мне ответить на некоторые сложные вопросы.
Читайте также: