Blog

Writing about design

Eight write-ups on why the values are what they are: what HSL lets you do that HEX does not, where the 4.5:1 contrast ratio comes from, when rem beats px, how an aspect ratio survives a resize. For anyone who has been copying numbers without knowing what they control.

Design

What Contrast Ratio Do You Need for Readable Text?

Four numbers cover every case, and the one most people get wrong is what counts as "large text".

Read
Design

px vs rem vs em: Which CSS Unit to Use When

They all resolve to the same kind of length. The difference is who controls the number they get multiplied by.

Read
Design

How to Choose a Colour Palette That Actually Works

A colour wheel hands you five hexes in ten seconds. The other 90% of a palette is neutrals, states and contrast.

Read
Design

HEX, RGB and HSL: Which Colour Format to Use

They describe the same colours. The difference is that one of them you can edit by hand and the other two you cannot.

Read
Design

Why Your CSS Gradient Goes Grey in the Middle

Blue to yellow passes through dead grey because of arithmetic, not because your browser is broken. Here is the arithmetic, and the two fixes.

Read
Design

How CSS box-shadow Works (and Why Yours Looks Fake)

Four lengths and a colour, and almost everyone misreads the third one. What blur, spread and inset really do.

Read
Design

How CSS border-radius Works, Corner by Corner

Every corner is a quarter ellipse with two radii. Once you know that, the shorthand and its odd clamping rule stop being mysterious.

Read
Design

What Is Aspect Ratio? 16:9, 4:3 and the Rest

A ratio is one division: width over height. Here is how to read the notation, work out a missing dimension, and see why the answer keeps coming out as a fraction of a pixel.

Read

All categories

Images 6Text 10Security 5Calculators 9Developer 12Everyday 3Time 4