Quick Start
Spacing is key to balanced visual hierarchy in UI design. First, define a base unit (e.g., 4px or 8px), then use HeronTool's Spacing Scale tool to generate a proportional sequence like 4, 8, 12, 16, 24, 32, 48px. These values will guide your padding and margin choices.
Adjusting Padding and Whitespace
In Spacing Scale, you can select multipliers (e.g., 1x, 2x, 3x) to quickly generate spacing values. For a card component: use 16px padding to let content breathe, and 8px gaps between buttons to keep them compact. For larger whitespace (like paragraph spacing), use bigger ratios (24px+) to avoid crowding.
Step-by-Step Workflow
- Open Spacing Scale, set base unit and multipliers.
- Copy the generated values into CSS variables for centralized management.
- Apply in layouts: medium ratios for margins, small for padding, large for section whitespace.
- Use browser dev tools to live-preview and fine-tune until visually balanced.
FAQ
- Q: Should spacing be uniform? Use a consistent scale, but tweak per component if needed.
- Q: How to avoid spacing getting out of hand? Always stick to predefined scales; avoid arbitrary values.
- Q: What about responsive design? Use CSS clamp() with scale values for dynamic scaling.
Etiketler
