Typography

Very wide columns can make that return difficult; very narrow columns can interrupt the rhythm with frequent line breaks. The right width depends on the typeface, language, size and kind of content.

Start with a readable body size, constrain the column, then adjust the spacing between lines. Test a real passage rather than a short placeholder. On the web, a max-width in ch can help, but ch measures the width of the zero character, not an exact count of letters. Recheck when the font, viewport or text size changes.

A typeface gives text a particular character, but readers also need to recognise what each piece of text does. Headings introduce a section. Paragraphs explain it. Captions describe an image. A consistent set of styles makes those roles easier to recognise as someone moves through a page.

Start with a family that works for your body text. Try it in a real paragraph at the size people will read, then use its weights and sizes to build headings and supporting labels. One family may provide everything you need. If the headings need a different character, introduce a second family and give it a specific role, such as titles and pull quotes.

When pairing families, compare them in the actual layout. A serif heading with sans-serif body text is one possible approach, but category alone does not make a pairing work. Check the proportions, spacing and emphasis together. Readers should be able to tell a heading from a caption because the styles are consistent, rather than having to interpret a new treatment in every section.

Treat two families as a useful starting constraint, not a universal limit. Additional scripts, an established identity or a distinct editorial purpose may call for more. Before adding another family, identify the need it meets and check whether an existing weight or style could meet it. Record the final roles with examples so the system is easy for others to use.

A circle beside a square, or a play icon inside a button, may look misaligned despite matching measurements. Begin with a consistent grid, then inspect the visible shapes within it.

Make small adjustments at the size the work will be used. Letter spacing that suits a large title may not suit a caption, and the right value depends on the face. Use optical sizes when the family provides them, and compare the result before applying a correction across the system. Avoid turning one local adjustment into a universal rule.

Size can establish that order, but it works alongside weight, position and spacing. Choose a treatment for each role and repeat it consistently.

Keep a heading visibly connected to the content it introduces. Give secondary information less emphasis while keeping it readable. If several elements compete, decide which needs attention first before adding more contrast. A small interface may need only a few levels; a long document may need more.