Skip to main content
Himanshu Chandola
/blogs

Small Details That Make a Big Difference: Typography & Polish

|2 min read

The difference between a good interface and a great one often comes down to tiny details that most users won't consciously notice — but they'll feel. Here are the small polish items that elevate a web experience.

Typography That Feels Right

The Ellipsis

There are three periods (...) and there's an ellipsis (…). They're different.

Loading...  ❌
Loading…    ✅

The ellipsis is a single character designed to look balanced. Use it for loading states, truncation, and trailing thoughts.

Curly Quotes

Straight quotes are for code. Curly quotes are for prose.

"Hello World"   ❌ Straight quotes
"Hello World"   ✅ Curly quotes

Most word processors auto-correct this, but in code you need to be intentional.

Non-Breaking Spaces

Some things should never be separated across lines:

10 MB    → 10 MB (non-breaking space)
⌘ K      → ⌘ K
Dr. Smith → Dr. Smith

In HTML, use   or the actual non-breaking space character.

Transitions That Don't Jank

Never Use transition: all

/* ❌ Bad - animates everything, including layout properties */
.card {
  transition: all 0.3s ease;
}

/* ✅ Good - explicit properties, only animates what matters */
.card {
  transition: transform 0.3s ease, 
              opacity 0.3s ease,
              box-shadow 0.3s ease;
}

transition: all is a performance trap. It can animate properties you didn't intend, causing layout thrashing.

💡

Stick to transform and opacity for smooth 60fps animations — they're GPU-accelerated and don't trigger layout recalculations.

Transform Origin Matters

When scaling or rotating, the origin point changes everything:

/* Scales from center (default) */
.icon { transform-origin: center; }

/* Scales from top-left corner */
.dropdown { transform-origin: top left; }

/* Scales from bottom center */
.tooltip { transform-origin: bottom center; }

Focus States That Guide

Removing focus outlines is an accessibility sin, but the default blue ring isn't always pretty. The solution: focus-visible.

/* Only shows focus ring for keyboard navigation */
.button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Removes ugly default ring */
.button:focus:not(:focus-visible) {
  outline: none;
}

This gives keyboard users the visual feedback they need without showing rings on every mouse click.

Loading States

Loading indicators should feel alive but not distracting.

The Pulsing Cursor

For chat-style streaming text:

.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

The Content Placeholder

For loading skeletons, subtle animation matters:

.skeleton {
  background: linear-gradient(
    90deg,
    var(--muted) 25%,
    var(--muted-light) 50%,
    var(--muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Spacing That Breathes

Consistent Scale

Pick a spacing scale and stick to it:

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

Using a scale creates visual rhythm that feels intentional.

Vertical Rhythm

Headings and paragraphs should follow a consistent vertical pattern:

h2 { margin-top: 2em; margin-bottom: 0.5em; }
p { margin-bottom: 1em; }

Color Precision

Don't Use Pure Black

Pure black (#000) on pure white (#fff) creates harsh contrast that strains eyes. Soften it:

:root {
  --foreground: oklch(0.1 0 0);  /* Almost black */
  --background: oklch(0.98 0 0); /* Almost white */
}

Dark Mode Scrollbars

Browsers render scrollbars based on the page's color scheme. Tell them:

<html style={{ colorScheme: "dark" }}>

Without this, you get light scrollbars in a dark interface.

The Checklist

  • [ ] Use proper ellipsis (…) not three dots
  • [ ] Use curly quotes for prose
  • [ ] Non-breaking spaces for units and keyboard shortcuts
  • [ ] Explicit transition properties, never all
  • [ ] Correct transform-origin for animations
  • [ ] :focus-visible for keyboard-only focus rings
  • [ ] Consistent spacing scale
  • [ ] Soften pure black/white contrast
  • [ ] color-scheme for proper scrollbar theming

These details compound. A site with all of them feels premium. A site missing them feels... off.

Polish is the difference between "it works" and "it feels right."