Source from repo

Details that make interfaces feel better

Design engineering principles for polished UI details: concentric border radius, interruptible animations, shadows, and font smoothing.

jakubkrehelGitHub jakubkrehelSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

32.1 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

typography.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown136 linesFree

typography.md

1# Typography
2 
3Typography rendering details that make interfaces feel better.
4 
5## Text Wrapping
6 
7### text-wrap: balance
8 
9Distributes text evenly across lines, preventing orphaned words on headings and short text blocks. **Only works on blocks of 6 lines or fewer** (Chromium) or 10 lines or fewer (Firefox) — the balancing algorithm is computationally expensive, so browsers limit it to short text.
10 
11```css
12/* Good — even line lengths on short text */
13h1, h2, h3 {
14  text-wrap: balance;
15}
16```
17 
18```css
19/* Bad — default wrapping leaves orphans */
20h1 {
21  /* no text-wrap rule → "Read our
22     blog" instead of balanced lines */
23}
24```
25 
26```css
27/* Bad — balance on long paragraphs (silently ignored, wastes intent) */
28.article-body p {
29  text-wrap: balance;
30}
31```
32 
33**Tailwind:** `text-balance`
34 
35### text-wrap: pretty
36 
37Prevents orphaned words (a single word dangling on the last line) by adjusting line breaks throughout the paragraph. Unlike `balance`, it doesn't try to equalize line lengths — it just ensures the last line isn't embarrassingly short. Works on text of any length with no line-count limit.
38 
39This should be your **default for short-to-medium text** — paragraphs, descriptions, captions, list items, card text. For very long text (10+ lines), skip both `pretty` and `balance` — the browser's default wrapping is fine and you avoid unnecessary layout cost.
40 
41```css
42/* Good — descriptions, captions, short paragraphs */
43p, li, figcaption, blockquote {
44  text-wrap: pretty;
45}
46```
47 
48```tsx
49// Tailwind
50<p className="text-pretty">
51  A short paragraph that won't leave an orphan on the last line.
52</p>
53```
54 
55**Tailwind:** `text-pretty`
56 
57### When to Use Which
58 
59| Scenario | Use |
60| --- | --- |
61| Headings, titles where even distribution matters | `text-wrap: balance` |
62| Short-to-medium text — paragraphs, descriptions, captions, UI text | `text-wrap: pretty` |
63| Long text (10+ lines), code blocks, pre-formatted text | Neither — leave default |
64 
65## Font Smoothing (macOS)
66 
67On macOS, text renders heavier than intended by default. Apply antialiased smoothing to the root layout so all text renders crisper and thinner.
68 
69```css
70/* CSS */
71html {
72  -webkit-font-smoothing: antialiased;
73  -moz-osx-font-smoothing: grayscale;
74}
75```
76 
77```tsx
78// Tailwind — apply to root layout
79<html className="antialiased">
80```
81 
82### Good vs. Bad
83 
84```css
85/* Good — applied once at the root */
86html {
87  -webkit-font-smoothing: antialiased;
88}
89 
90/* Bad — applied per-element, inconsistent */
91.heading {
92  -webkit-font-smoothing: antialiased;
93}
94.body {
95  /* no smoothing → heavier than heading */
96}
97```
98 
99**Note:** This only affects macOS rendering. Other platforms ignore these properties, so it's safe to apply universally.
100 
101## Tabular Numbers
102 
103When numbers update dynamically (counters, prices, timers, table columns), use tabular-nums to make all digits equal width. This prevents layout shift as values change.
104 
105```css
106/* CSS */
107.counter {
108  font-variant-numeric: tabular-nums;
109}
110```
111 
112```tsx
113// Tailwind
114<span className="tabular-nums">{count}</span>
115```
116 
117### When to Use
118 
119| Use tabular-nums | Don't use tabular-nums |
120| --- | --- |
121| Counters and timers | Static display numbers |
122| Prices that update | Decorative large numbers |
123| Table columns with numbers | Phone numbers, zip codes |
124| Animated number transitions | Version numbers (v2.1.0) |
125| Scoreboards, dashboards | |
126 
127### Caveat
128 
129Some fonts (like Inter) change the visual appearance of numerals with this property — specifically, the digit `1` becomes wider and centered. This is expected behavior and usually desirable for alignment, but verify it looks right in your specific font.
130 
131```css
132/* With Inter font:
133   Default:  1234  → proportional, "1" is narrow
134   Tabular:  1234  → all digits equal width, "1" centered */
135```
136

Preparing the source view

Details that make interfaces feel better

typography.md