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)

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)

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)

Specifically for content within a line.

• Inline spacing

• Baseline alignment

• Vertical alignment (top, middle, bottom)

• Line wrapping / breaking

• White space handling (wrap, nowrap, pre)

Helps users scan and understand content.

• Headings scale (H1–H6)

• Contrast (size, weight, color)

• Spacing between sections

• Emphasis styles (bold, italics, highlights)

How content is grouped and structured.

• Columns / grid systems

• Flexbox alignment

• Gap between elements

• Responsive breakpoints

• Content flow direction

Define boundaries and surfaces.

• Borders (width, style, color, radius)

• Background color

• Background images

• Shadows (box-shadow, text-shadow)

What happens when content exceeds its container.

• Overflow (hidden, scroll, auto)

• Clipping

• Text truncation (ellipsis)

How layout adapts across devices.

• Media queries / breakpoints

• Fluid typography

• Flexible containers

• Scaling rules

How layout responds to user actions.

• Hover / focus states

• Transitions affecting layout

• Dynamic resizing