1️⃣How to compose type
Last updated
Last updated
Let's begin with a single paragraph of text. We can do a lot to make it easy to scan, read and use. Use Basics as a quick checklist for any paragraph of text or content. Always get this right.
The size of the type used is the single most important factor in ensuring the readability of text. By picking the right font size, we can make sure that the words are clear and easy to read, and that makes reading a lot more enjoyable!
Paragraph text of 16pts works well on mobile and desktop devices. Unless really necessary, try not to go smaller than 16pts for paragraph text.
If the product you're working on has a design system or a type scale, stick to it. Do not break away from it.
It’s the width of a paragraph of text, measured as the number of characters or words in a line of text. A good line length allows for comfortable reading by providing enough words on each line without overwhelming the reader or creating excessive line breaks. It's about finding that sweet spot where the reader can smoothly and effortlessly read through the text.
If lines are too short, the eye has to jump to the next line too often. If lines are too long, it is hard to find the beginning of the next line. A good length is 50-70 characters long. (The easiest way to do this is to search google for a free character counting tool.)
By using different font weights and styles, we can guide the reader's eyes to the most important or significant parts of the text. It helps convey meaning and makes the text more engaging to read.
Heavier weights are one way to create emphasis. If you emphasise too many words, readers can lose focus. If you emphasise too few words, readers can feel like the message is incomplete.
The regular weight is designed to be used for body text. Try not to use lighter or heavier weights for paragraph content.
For punctuation around the emphasised words, use the style from the paragraph, not the style from the emphasised text. This is because the punctuation is related more closely to the paragraph than to the emphasised content.
Use italics for emphasis only in serif typefaces. In sans serif typefaces, the contrast between regular and italics isn’t sufficient to create good emphasis.
Using colour to differentiate between links and regular text makes hyperlinks more recognisable and encourages interaction.
The alignment of the text helps to manage the user's attention and makes the text more readable. In 80% of cases, we use left alignment on the site because it is more readable. How we use text alignment:
Left aligned – in most cases
On the right – for balance and compositional solution
In the centre – very rarely, mostly for headlines
Align mixed font sizes by their baseline, which is the imaginary line that letters rest on. Take advantage of an alignment reference that your eyes already perceive.
There's more you can do with a paragraph to make it feel cared for and polished. Here we learn to let type breathe with whitespace and not let abbreviations, numbers and fractions stick out like a sore thumb.
Poorly spaced lines either due to excessive or insufficient leading can break the flow of the text. An optimal line height will allow readers to absorb the content more effortlessly. There are things you can keep in mind to achieve this:
For paragraphs, set line height to avoid clashes between the letter’s descenders and ascenders. A line height of 110%-150% usually works well, depending on the font size and x-height. This range provides enough space between lines to ensure comfortable reading and visual separation.
Applying the same line height used for body text to headlines can result in excessive spacing.
Small caps are capital letters but short. They could be used as subtler means of emphasis within running text compared to full uppercase letters. Use it with discretion and add letter spacing if necessary.
Use small caps to distinguish abbreviations because they don’t change the visual weight.
Small caps can be good alternatives to bold or italics as well.
Numbers are a frequently occurring element in text and design. They are used to specify quantities, dates, prices, measurements, phone numbers, and a myriad of statistics and other data.
The correct way to represent fractions is as symbols like "3⁄4," as opposed to being written out using regular numerals such as "3/4."
If you have a series of items, you may use ordinals to indicate their placement or order, such as "First," "Second," "Third," and so forth. Follow the style guidelines of the brand or organisation on using ordinals.
Lining figures are most often the height of the capital letters, aligning with the baseline and the cap height. It’s a way to approximate capital letters so that they are uniform in height. Lining figures are commonly offered in two spacing formats, proportional and tabular.
Proportional and tabular lining
Proportional lining has different widths depending on the shape of the figure whereas tabular lining has all symbols spaced at regular intervals like monospaced fonts.
Proportional lining figures are recommended for headlines or titles as they are widely acknowledged as the standard practice. Tabular lining figures are preferred for columns of numbers, like tables, price lists, financial data, and listings.
Letter spacing is the adjustment of the horizontal white space between the letter in any text block. Lowercase letters don’t ordinarily need letter spacing; for uppercase letters, 5–12% extra letter spacing works best.
Tracking—When capital letters are used together, the spacing between them can appear too tight. Adding 5-10% additional spacing, especially when working with smaller font sizes, will ensure readability.
Kerning—Kerning is the spacing between two characters. The built-in kerning is usually fine but it becomes more critical at small font sizes compared to large font sizes due to the limitations of our visual perception.
Hyphens and dashes might look similar, but they’re not interchangeable. A quick note to make is that dashes should not have spaces before and after them.
Hyphens link words or indicate breaks. The en dash indicates a range of values(1880–1912, pages 330–39, Exhibits A–E) or a connection between two things. The em dash marks an abrupt change of thought or a transition within a sentence.
Ligatures tie two or more letters into a single character to help with kerning. You can enable them for specific character combinations like “fi” or “st” or “ff” into a new form.
Some common examples are when ligature combines characters into a single glyph.
Fonts Knowledge - Google Fonts
Butterick’s Practical Typography
