baselinealigned

Baseline aligned, or baseline-aligned, is a layout and typography concept describing the arrangement of text and inline elements so their typographic baselines share a common reference line. It is a key technique for achieving visual coherence in lines of text and in components that mix text with icons or other inline content.

In typography, the baseline is the invisible line on which most letters sit, while ascenders rise above and descenders fall below. Baseline alignment ensures vertical consistency when combining characters from different fonts, sizes, or styles, reducing visual jitter and improving legibility.

In digital interfaces, baseline alignment is implemented through styling and layout systems. CSS provides mechanisms such as vertical-align: baseline for inline elements, and layout models like Flexbox and Grid offer options to align items on their baselines (for example, align-items: baseline). When mixing fonts, weights, or iconography with text, aligning to the baseline preserves a harmonious typographic rhythm across components.

Applications of baseline alignment include labels beside input fields, button groups with icons and text, mixed-content table cells, and headings with captions. Designers may also employ a baseline grid—a set of horizontal lines to which all text leading and components are aligned—to maintain consistent vertical spacing throughout a layout.

Considerations include handling fonts with unusual metrics, differing x-heights, or multilingual content where baseline behavior varies. Accurate baseline alignment often requires attention to font metrics, line-height, and, in some cases, manual adjustment to maintain a stable visual baseline across the design.