Выравнивание по вертикали

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

На картинке видно, как проходят оси через строки текста и как имеет смысл выравнивать текст относительно других элементов:

Допустим, мы набираем текст обычным образом: первая буква прописная, все остальные строчные. Тогда верхняя линия, по которой этот текст имеет смысл выравнивать с чем‑то другим по верху, проходит по верху строчных. Ещё раз: не по верху прописных, а по верху строчных. Поэтому здесь красная линия проходит через все строки по верху и выравнивается со стрелочкой, у которой тоже есть маленький выносной верхний элемент.

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

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