08 Jun The basics of typography
Typography is a complex subject and it can be an intimidating part of design. Chances are, your designer has likely used some alien sounding words with you at some point referencing serifs or kerning or any of hundreds of other terms.
So today we’re going to break down the jargon so that you can make even the snootiest art director proud!
What is typography?
Typography, basically, is the art and technique of arranging type. It’s central to the work and skills of a designer and is about much more than making the words legible.
Typography works on many layers within the words used in a design. It involves how the words are arranged, the point size, line length, and spacing on individual lines as well as the page as a whole.
Typography is overwhelmingly ever-present in our lives to the point that you hardly notice it there. It’s absolutely everywhere — just look around you right now. You’ll notice it on your phone, magazines, billboards, shop windows, t-shirts, websites, street signs, adverts, packaging, the list is endless!
Serif, Sans-Serif or Script
There are a number of different ways to classify typefaces and type families but the most common categories are:
- Serif – Serif fonts are defined by their “feet” (this really is the technical term!). They’re the small lines that are attached to the edges of letters.
- Sans-serif – Sans-serif fonts are like Serif typefaces but with no feet (sans means without in French).
- Script – Script or cursive fonts are based on handwriting and offer very fluid letterforms connected together with swoops and curls.
There are of course many other classifications including display/decorative, symbols, proportional, monospaced, slab, and so on.
Anatomy of a Typeface
- Case: Refers mainly to the distinction between upper-case (capital letters such as A, B, C and so on) and lower-case (small letters such as a, b, c and so on). There are also fonts that utilise only one of these cases (either upper or lower only) and these are called uni-case fonts.
- Roman: Roman type is the regular or upright counterpart of an italic or oblique typeface, regardless of whether the type design is serifed or a sans serif.
- Italic: A sloping version of a typeface used especially for emphasis or distinction and in foreign words.
- Weights: The weight of a particular font is the thickness of the character outlines relative to their height. Bolding a word is a simplified version of changing it to a heavier weight.
- Line types: Line length refers to the distance between the left and right edges of a text block. A line of characters has at least five types of guide-lines that it can be aligned to:
- Baseline: The one you might be most familiar with is the baseline. This is the line that the text sits on.
- Cap height (or cap line): This marks the top of capital letters.
- Ascender height (or topline): This line shows where the top of letters such as kand h touch. Strangely, in a lot of cases, this line is slightly higher than the capital line. It took me a while to get this into my head because, intuitively, you would think that capital letters would be the tallest characters.
- X-height (or midline): This shows the height of lowercase letters (excluding ascenders and descenders) and can typically be measured using the height of the letter x.
- Descender height (or beardline): Descenders are the parts of characters that go below the baseline (such as the letters p and y). This line shows where the bottoms of the decenders are.
- Leading: Leading describes the amount of space between lines of text. You can measure leading by obtaining the distance between two baselines.
- Tracking (or letter-spacing): Tracking is where you adjust the space between groups of characters.
- Kerning: Kerning describes the amount of space between two individual characters.
- Alignment: Alignment can describe the setting of text flow relative to a page, column (measure), table cell or tab. There are four main kinds:
- Flush Left (or Ragged Right): Text is aligned to the left. This alignment complements the natural way we read text in western culture.
- Flush Right (or Ragged Left): Text is aligned to the right. This alignment complements the way certain eastern cultures read but can interfere with readability for cultures who read left to right.
- Justified: The start and end of text lines are both aligned to the left and right.
- Centred: Text is aligned to the center of the text area, rather than the edges.
- Hierarchy: The use of styles to create a hierarchy of headings to body copy to break up longer text into shorter, readable sections.
- Stem: The stem is the main upright of any letter, including the primary diagonal, and it’s essentially the structural anchor of any character.
- Bar: A bar refers to any horizontal part, these can also sometimes be called arms.
- Bowl: Bowls can be identified as the curved part of a character that creates an interior empty space.
- Counter: The inside of a bowl is a counter.
- Ascender: The ascender of a lowercase character is any part that rises above the x-height, such as the uprights on the letters “d”, “h”, and “b”.
- Descenders: Descenders are the parts of a lowercase character that drop below the baseline, such as in a “p”, “q” or “g”.
- Aperature: The aperture of a character refers to the opening at the bottom of some characters, such as the uppercase “A” or lowercase “m”.
- Ear: An ear is a decorative extension on a letter, as highlighted on the “g” above.
- Crossbars: Crossbars are horizontal strokes, as found on the uppercase “A” and “H”.
- Terminals: A terminal is only found on serif characters, and is the end of any line that doesn’t have a serif.
- Loops: Loops are found on some lowercase “g” characters, and can be fully closed or partially closed.
- Links: Links connect the top and bottom bowls of a double-stacked lowercase “g”.
- Spine: A spine refers to the curved stroke found on the letter “s”.
- Tails: Tails are sometimes-decorative descending strokes, as seen on an uppercase “R”.
- Finial: A finial is the tapered endings of some strokes.
- Shoulder: A shoulder is any curved stroke that originates from a stem.
- Ampersand: Ampersands is the correct term for the “and” symbol “&”.
- Hyphens & Dashes: There are three lengths of what are all more or less dashes: hyphen (-), en dash (–), and em dash (—).
- Hyphen: Hyphens are the shortest of the dashes and they’re used to join words in a compound construction. They can also separate syllables of a word, like during a line break, or (self-evidently) a hyphenated name.
- En-Dash: The en-dash is approximately the same width as an “n” glyph (thus the name). They’re usually used with a space on either side and are the most commonly used of the three types of dashes.
- Em-Dash: The em-dash is approximately the same width as an “m” glyph which makes it the longest of the dashes. It’s most commonly used in USA convention similarly to the way we use an en-dash in British convention.