Tom MacWright

tom@macwright.com

What little I know about design

Use as few different fonts, font sizes, font weights, and decorations as possible. Beware of additional fonts sneaking into pages as the result of default styles, or elements that don’t inherit fonts, like <input>s. Beware of fake font weights and styles entering the page via misconfigured webfonts.

Headings should usually have more margin above them than under. Since headings are a way of organizing content into groups, it’s essential that you make it obvious which content goes with which heading. The most effective way of associating things is to put them close to each other. Headings should be closer to the thing they relate to than the thing above them.

Body text should never be very wide. There’s no strict limit, though Bringhurst claims 45-75 characters is appropriate. Just make sure that you never have a purely percentage-based width of a container that contains text: text boxes should always have some maximum width.

Body text is rarely black. Even the New York Times, a paragon of mainstream brutalist design in my opinion, tints their text up to #333. On top of improving readability, this lets you use #000 to accentuate headlines or text that should be punchy.

The vividness of a color is usually the inverse of the size of the shape. Large fills typically less saturated and lighter than the colors of borders, text, or other small details.

When varying color (hue), always vary color (luminosity or brightness). Equidistant colors look cruddy and often fail for colorblind people. So when you use different colors, try to use different shades, too.

Fulfill boring expectations. If something on a webpage looks like an input box or a radio button, it should behave like one. If you need a new kind of control, it should look appropriately unusual. Usability is built on boring assumptions: don’t subvert them.

The only thing better than a really well-designed element is the lack of that element. Always ask if you can eliminate something before including it in a design. It’s much better to make simple things than to try to coax simplicity out of a mess.