Frame Notes

Observations on the web

Small details.
Clearer pages.

Practical notes on making web pages easier to read, easier to use, and a little more considered.

Read the collection

Three things to get right

Small changes you can try today.

Let the words breathe.

Typography

A comfortable line length and generous line spacing make a paragraph easier to follow. Pick one readable typeface, then let size and weight establish the hierarchy.

TRY THIS
Set body text to 16–18 pixels, keep lines around 60 characters, and check the result on a small screen.

Give related things a home.

Spacing

Space is a quiet way to explain what belongs together. Keep a label near its content and leave more room between separate ideas. A small, repeatable spacing scale makes those relationships consistent.

TRY THIS
Use 8, 16, 24, and 32 pixels as a starting scale. Group first; add borders only where they help.

Make the next step visible.

Contrast & clarity

Readable text, descriptive links, and visible keyboard focus help people find their way. Color can support a message, but the words should still make sense without it.

TRY THIS
Tab through your page, enlarge the text, and check it in bright light. Make sure each link says where it leads.

A place for the useful details.

Frame Notes is a compact collection of ideas about web design. Each note starts with something ordinary—a line of text, a gap, a link—and asks how it could work a little better.