Core Layout Properties

1. Typography (Text Appearance)

These define how text looks.

Font family (e.g., serif, sans-serif, monospace)

Font size (e.g., 12px, 1rem)

Font weight (light, normal, bold)

Font style (italic, normal)

Text color

Text transform (uppercase, lowercase)

Text decoration (underline, line-through)

2. Spacing & Rhythm

These control readability and visual flow.

Line height (leading)

Letter spacing (tracking)

Word spacing

Paragraph spacing (space before/after paragraphs)

Indentation (first-line indent, block indent)

3. Layout & Structure

How elements are arranged on the page.

Margins (space outside elements)

Padding (space inside elements)

Width / Height

Max-width / Min-width

Alignment (left, right, center, justify)

Display type (block, inline, inline-block, flex, grid)

Positioning (static, relative, absolute, fixed)

4. Inline Layout Properties

Specifically for content within a line.

Inline spacing

Baseline alignment

Vertical alignment (top, middle, bottom)

Line wrapping / breaking

White space handling (wrap, nowrap, pre)

5. Visual Hierarchy

Helps users scan and understand content.

Headings scale (H1–H6)

Contrast (size, weight, color)

Spacing between sections

Emphasis styles (bold, italics, highlights)

6. Containers & Grids

How content is grouped and structured.

Columns / grid systems

Flexbox alignment

Gap between elements

Responsive breakpoints

Content flow direction

7. Borders & Backgrounds

Define boundaries and surfaces.

Borders (width, style, color, radius)

Background color

Background images

Shadows (box-shadow, text-shadow)

8. Overflow & Clipping

What happens when content exceeds its container.

Overflow (hidden, scroll, auto)

Clipping

Text truncation (ellipsis)

9. Responsive Behavior

How layout adapts across devices.

Media queries / breakpoints

Fluid typography

Flexible containers

Scaling rules

10. Interaction-Aware Layout

How layout responds to user actions.

Hover / focus states

Transitions affecting layout

Dynamic resizing

Simple Mental Model

You can think of layout properties in 3 layers:

Text layer → font, size, spacing

Box layer → margin, padding, width

System layer → grid, flow, responsiveness