Details that make interfaces feel better
Great interfaces rarely come from a single thing. It's usually a collection of small things that compound into a great experience. Below are a few small details I use to make my interfaces feel better.
Text wrapping
A quick way to improve how text behaves in your app is to use text-wrap: balance. It distributes text evenly across each line, avoiding orphaned words.
Designing interfaces that feel natural and intuitive
Great design is invisible. It guides users without them ever noticing.
Designing interfaces that feel natural and intuitive
Great design is invisible. It guides users without them ever noticing.
text-wrap: balance distributes text evenly across lines, preventing orphaned words.
Concentric border radius
When nesting rounded elements, the inner radius should equal outerRadius - padding. This keeps the curves concentric rather than parallel, which looks far more intentional.
Inner radius = outer radius − padding. This keeps curves concentric and visually consistent.
Make text crispy
On macOS, the default font smoothing uses subpixel rendering which can make light text on dark backgrounds appear heavy and blurry. Use -webkit-font-smoothing: antialiased to switch to grayscale antialiasing for thinner, sharper text.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Antialiased rendering produces thinner, crisper text on dark backgrounds by using grayscale smoothing.
Use tabular numbers
Proportional numbers look great in prose, but in tables, dashboards, or anywhere values change dynamically, use font-variant-numeric: tabular-nums. It gives every digit the same width so columns stay aligned and values don't jitter when they update.
Tabular numbers give each digit equal width, preventing layout shift in dynamic values.
Split and stagger entering elements
When multiple elements enter at once, animating them all simultaneously feels flat. Adding a small stagger of animation-delay per element creates a cascading reveal that feels organic and guided.
Staggering entry animations by 50ms per element creates a natural, cascading reveal.
Align optically, not geometrically
A play icon centered mathematically inside a circle will look slightly left-heavy because triangles have more visual mass on their flat edge. Nudging it 1-2px to the right makes it appear centered to the human eye.
Asymmetric shapes like play icons need a small offset to appear centered to the human eye.
Use shadows instead of borders
Borders add to an element's layout size and can't be combined with depth shadows in a single property. Using box-shadow: 0 0 0 1pxinstead gives you a visual border that doesn't affect layout and layers naturally with other shadows.
Box-shadow borders don't add to layout size and can layer with depth shadows in a single property.