Typography rules and terms every designer must know

[Rss Bot 1]

1. Bowl; 2. Stem; 3. Counter; 4. Arm; 5. Ligature; 6. Terminal; 7. Spine; 8. Ascender; 9. Apex; 10. Serif; 11. Ear; 12. Descender; 13. Crossbar; 14. Finial; 15. Ascender height; 16. Cap height; 17. X-height; 18. Baseline; 19. Descender line

Typography is, in essence, the art and technique of arranging type. It's central to the skills of a designer and is about much more than making the words legible. Your choice of typeface and how you it works with your layout, grid, colour scheme and so on will make the difference between a good, bad and great design.

There's a lot of jargon in the discipline of typography – covering everything from the correct names for the different parts of your letterforms to the terms relating to how you arrange them within a design. In this article, we present a comprehensive glossary of typography terms. Jump to page 2 to take a look. On this page, we'll cover the basics you need to know to get started working with type.

Can't find what you're looking for? Explore our roundup of great typography tutorials.

01. Font selection

There is a vast selection of typefaces for you to choose from

Font design is a long and involved process. Typefaces are created by craftspeople over a substantial period of time, using talent honed over many years. The best, professionally designed fonts come with various weights and styles to form a complete family, plus carefully considered kerning pairs, multi-language support with international characters and expressive alternate glyphs to add character and variety to typesetting. 

So while there's an astonishing array of free fonts to choose from online, you'll need to check the one you choose includes all the options you need to create a great design. 

Even within the paid-for options, so much choice can be overwhelming. It can be tempting to stick to the classics. If you want to branch out and are in need of some inspiration, take a look at these inspired alternatives to Helvetica, or explore these perfect font pairings.

02. Size

All typefaces are not created equal. Some are fat and wide; some are thin and narrow. So words set in different typefaces can take up a very different amount of space on the page.

The height of each character is known as its 'x-height' (quite simply because it's based on the 'x' character). When pairing different typefaces, it's generally wise to use those that share a similar x-height. 

The width of each character is known as the 'set width'. This spans the body of the letter, plus the space that acts as a buffer between one letterform and the next.

The most common method used to measure type is the point system, which dates back to the 18th century. One point is 1/72 inch. 12 points make one pica, a unit used to measure column widths. Type sizes can also be measured in inches, millimetres, or pixels.

03. Leading

Leading describes the vertical space between each line of type. It's so named because, in the days of metal typesetting, strips of lead were used to separate lines of type. For legible body text that's comfortable to read, a general rule is that your leading value should be anything between 1.25 and 1.5 times greater than the font size.

04. Tracking and kerning

Kerning is the process of adjusting the space between characters to create a harmonious pairing. For example, where an uppercase 'A' meets an uppercase 'V', their diagonal strokes are usually kerned so that the top left of the 'V' sits above the bottom right of the 'A'.

Kerning is similar to tracking, but they are not the same thing. Tracking is the process of adjusting the spacing of all characters in a word, and is applied evenly.

05. Measure

The term 'measure' describes the width of a text block. If you're seeking to achieve the optimum reading experience, it's clearly an important consideration. If your lines are too long, your reader can easily get lost, while a too-short measure breaks up the reading experience unnecessarily. 

There are a number of theories to help you define the ideal measure for your typography. One rule of thumb is that your lines should be 2-3 alphabets in length (so 52-78 characters, including spaces). 

06. Hierarchy and scale

If all the type within a layout looks the same, it's difficult to know which is the most important information. Size is one key way in which typographers create hierarchy and guide their readers. Headings are usually large, sub-headings are smaller, and body type is smaller still.

Size is not the only way to define hierarchy – it can also be achieved with colour, spacing and weight.

Next page: Glossary of typographic terms

Aesc

Pronouced 'ash', this is a ligature of two letters – 'a' and 'e'. The aesc derives from Old English, where it represented a diphthong vowel, and has successfully migrated to other alphabets including Danish and Icelandic.

Aperture

The constricted opening of a glyph, as seen in the letter 'e'. Varying the size of the aperture has a direct effect on the legibility of a letterform and, ultimately, readability. Apertures can be 'closed' (shown in orange here) or 'open' (green). 

Apex

The point at the top of a character where the left and right strokes meet. The example might be the top point of an uppercase 'A'.

Arm

A horizontal stroke that does not connect to a stroke or stem at one or both ends – such as the top of the capital T.

Ascender

The part of a lowercase letterform that projects above the x-height of the font. Ascenders are important for ease of prolonged reading, though the combination of too much ascender-height and not enough x-height can cause problems.

Baseline

The baseline is where the feet of your capital letters sit. Below this line are descenders and loops.

Bowl

A bowl refers to the shapely, enclosed parts of letterforms. They appear in both lowercase (b) and uppercase (B) characters.

Beak

The curved terminal at the top of letters such as 'a', 'c', 'f' and 'r'. So named because they look a bit like a bird's beak. 

Bicameral

Bicameral refers to alphabets that have upper- and lowercase letterforms. For example, Roman and Cyrillic alphabets are bicameral. Hebrew and Arabic do not have lowercase and uppercase letters, so they are referred to as unicameral.

Bracket

A wedge-like shape that joins a serif to the stem of a font in some typefaces. Shown in orange in the image above.

Cap height

The height of a capital letter above the baseline.

Copyfitting

The job of adjusting point size and letter spacing in a bid to make text occupy its allotted space in a harmonious fashion.

Counter

The enclosed – or partially enclosed – portion of letterforms such as 'c', the lower part of 'e' and 'g'. Shown in orange above. Be careful not to mix up counters and bowls.

Crossbar

The crossbar connects two strokes, as in 'H'. Not to be confused with the cross-stroke, which cuts through the stem of letterforms such as 't'.

Cursive

These are typefaces that imitate handwriting. Take a look at our roundup of the best free cursive fonts for some examples.

Descender

The part of the letterform that falls below the baseline. In lowercase terms, this means 'p', 'y' and 'q', and sometimes applies to uppercase 'J' and 'Q'.

Diacritical

Is it so critical that you might die? No. Diacriticals refer to accents applied to letterforms in languages including French, Czech and German in a bid to enhance the function of the glyph.

Dingbat

Once known as printer's flowers, dingbats are decorative elements. They can vary from simple bullets to delicate fauna and flora, and are often collected into themed sets.

Display font

Any typeface intended to be used in short bursts – rather than for blocks of text – can be defined as a display font. Display fonts are often created just for use at large point sizes, as with headlines and titles.

Drop cap

An oversized letter, typically used at the start of a paragraph. It 'drops' into two or more lines of text, but can also climb upwards. The above example is taken from Jessica Hische's Daily Drop Cap series.

Ear

A small stroke extending from the upper-right side of the bowl of lowercase g, as shown in the example. It can also appear in a lowercase 'r'.

Ethel

A ligature of the letters 'o' and 'e'.

Em dash

Em is a long horizontal dash (—), equal to the current point size of text. Sometimes referred to as 'Mutton' to distinguish it from the very similar-sounding En. It's the width of a letter 'm'.

En dash

'Nut' to its friends, the En (–) is a horizontal dash one half the size of an Em (—). It's the width of a letter 'n'.

Eye

The eye is similar to a counter, but instead refers specifically to the enclosed part of the letter 'e'.

Finial

A tapered or curved end, which appears on letters such as 'e' and 'c'.

Fleuron

A subcategory of, or the precursor to, the dingbat. Fleurons are floral marks dreamed up by printers of the past to help decorate text.

<font-face>

The HTML5 tag that brings typography to the internet with typefaces directly embedded in web pages. For more information, take a look at our guide to web typography.

Glyph

Any singular mark that makes part of a font, whether a letter, number, punctuation mark or even a dingbat. Glyphs are the building blocks of typography.

Grapheme

Very similar to glyph, but possibly a bit broader. A grapheme is a fundamental unit of language, such as a Chinese pictogram, an exclamation mark or a letterform.

Gutter

The spaces between facing pages of a book or magazine, or the vertical gap between two columns of text.

Justified

In a paragraph of justified text, the words are spaced so there is no white space at the end of a line – each begins flush left and finishes flush right. This means the spacing between words will vary depending on how many are in that line. 

Kerning

The art of adjusting the proximity of adjacent letters to optimise the overall visual appeal and readability. Kerning will depend on the shapes of the letterforms within each pair. In the example above, the top pairs of letters have not been kerned. In the lower pairs, the spacing between the letters has been narrowed to suit the shapes of the characters. For more info, take a look at our 10 top tips for kerning type.

Leading

Leading describes the vertical space between each line of type. In olden times actual strips of lead were used to separate lines of text vertically; the naming convention persists.

Legibility

The ease with which one letterform can be distinguished from the next. It feeds into, but is not the same as, readability.

Loop / lobe

The lower part of the letter 'g' is known as its loop or lobe. It can be open (above right) or closed (left). It's also sometimes called the tail – a term that also takes in the lower portion of letter 'y'.

Logotype

The lettered part of any marque or identity. The logotype can be taken separately from its graphic companion.

Ligature

Ligatures pull two forms together to produce a new glyph.

Manicule

A pointing hand symbol ☞. Also known as the bishop's fist (stop sniggering at the back), or an early emoji.

Monospace

Monospaced type is distributed evenly 

Fonts in which every letterform occupies the same horizontal space.

OpenType

Designed by Microsoft and Adobe, OpenType is a font format. It supplanted and improved upon TrueType and PostScript fonts.

Oblique or sloped roman

To be distinguished from italics, in which the letterforms are purposefully drawn to be different to their upright cousins. Oblique letters are merely slanted versions of the standard roman form, often arrived at by mechanical means.

Orphan

The first line of a new paragraph stranded at the bottom of a page. This is presumably considered to be as bad as abandoning a child.

Pica

One sixth of an inch in length, the pica is associated with line-length and column width. There are 12 points or 16 pixels in one pica.

Pilcrow

The paragraph symbol (¶). It now marks the presence of a carriage return but at one time is thought to have denoted a change of theme in flowing text.

Point

A standard typographical measurement equal to 1/12 of a pica or 1/72 of an inch.

Readability

Readability refers to the ease with which a block of text can be scanned by eye.

Serif

A flare or terminating flourish at the end of a letterform's strokes, believed to originate from the Roman tendency to paint letters onto marble before chiselling them out. The serifs are circled in the left hand text in the image above. On the right you can see a sans-serif font. Serif fonts are typically used for printed matter, while sans serifs are more suited for screen-based type.

Sidebearing

The horizontal space to either side of a letterform, separating it from other letters.

Spine

The main curved stroke of a lowercase or capital 'S'.

Squoosh

This is the inadvisable process of squashing or expanding a typeface digitally either to fit a space or for visual effect. If you do it, make sure you keep it to yourself.

Spur

A small projection from the curve of a letterform, sometimes known as a beak or a beard. G provides a good example.

Stem

A vertical, full-length stroke in upright characters.

TDC

The Type Directors Club is a typography organisation based in New York.

Tittle

The brilliantly suggestive name for the dot above letters 'i' and 'j'.

Terminal

A type of curve at the end of a stroke that isn't a serif. Examples include the teardrop shapes in: 'finial', 'ball', 'beak' and 'lachrymal'.

x-height

The height of the lowercase x in any given typeface. This delimits the size of the glyph's detail and therefore also of its ascenders and descenders.

Read more:

• The best free web fonts
• Great places to download fonts for free
• 20 typography terms you might not know

View the full article