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
Do you like what you are reading? Subscribe to receive updates.
Unsubscribe anytime