Typography

What is Typography?

Every designer needs to understand typography. We explain the fundamental concepts and terminology in words that you can understand.
In this article we introduce the fundamental concepts of typography, followed by a detailed glossary of its main terms.

Typography is, quite simply, 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.
Your choice of typeface and how you make it work with your layout, grid, colour scheme, design theme and so on will make the difference between a good, bad and great design.
Good typography is partly down to creative intuition, but it's impossible to become skilled in typography without understanding the basic rules of the craft – even if you mean to break them.

Once you're comfortable with the basics, why not try out some typography tutorials, visit some typography resources to investigate font families – and even follow some typography Twitter accounts to keep up-to-date with the latest trends.
Choosing a font

There are an astonishing array of professional fonts to choose from. But with great power comes great responsibility. Just because you can choose from a vast library doesn't mean you have to; there's something to be said for painting with a limited palette, and tried and tested fonts like Helvetica continue to serve us well.

Despite sites such as ours providing links to the best free fonts available, but that doesn't mean it's not worth investing in paid ones. A typeface, like any form of design, is created by craftsmen over a substantial period of time, using the talent and experience they've been honing for many years. And the benefits of a professionally designed font – various weights and styles to form a complete family, carefully considered kerning pairs, multi-language support with international characters, expressive alternate glyphs to add character and variety to type-setting – are not always found in a font available for free.
Basic concepts


Here are some of the most important typographic considerations the professional designers needs to take into account.

01. Size
All typefaces are not created equally. 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 letter 'x'). When pairing typefaces - such as when using a different face to denote an area of attention - it's generally wise to use those that share a similar x-height. The width of each character is known as the 'set width' - which spans the body of the letter plus a space that acts as a buffer with other letter.

The most common method used to measure type is the point system, which dates back to the eighteenth 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, millimeters, or pixels.

02. Leading

Leading describes the vertical space between each line of type. It's called this because strips of lead were originally used to separate lines of type in the days of metal typesetting.

For legible body text that's comfortable to read, a general rule is that your leading value should be greater than the font size; anywhere from 1.25 to 1.5 times.

03. Tracking and kerning

Kerning describes the act 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 similar to, but not the same as, 'tracking'; this relates to the spacing of all characters and is applied evenly.

04. 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.

05. Hierarchy and scale

If all type was the same size, then it would be difficult to know which was the most important information on the page. In order to guide the reader, then, 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.
The glossary

A visual guide to some common typography terms - see key below

Key to image: 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
Aesc (phonetic: ash)

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.

Apex
The point at the top of a character where the left and right strokes meet. The example shown here is 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 lower case 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.



The ascender projects above the x-height of the font


Baseline
The baseline is where the feet of your capital letters sit. Below this line are descenders and loops.
Bowl
The shapely, enclosed parts of letters such as 'p' and 'b'.
Beak
The beak-shaped terminal at the top of letters such as 'a', 'c', 'f' and 'r'.
Bicameral (as opposed to Unicameral)
Bicameral refers to alphabets that have upper and lower case letterforms, such as Roman and Cyrillic - as opposed to the likes of Hebrew and Arabic.
Bracket
A wedge-like shape that joins a serif to the stem of a font in some typefaces.
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'; easy to get mixed up with the bowl.
Crossbar
The crossbar connects two strokes, as in 'H'. Not to be confused with the crossstroke that cuts through the stem of letterforms such as 't'.
Cursive
These are typefaces that imitate handwriting. Ever popular with Joe Public, the design community is often less than thrilled by these sometimes flowery fonts.
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 by 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 that can vary from simple bullets to delicate fauna and flora often formed into themed collections.





Dingbat are decorative elements such as bullets


Display fonts
Any typeface intended to be used in short bursts can be defined as a display font. They're often created just for use at large point sizes, as with headlines and titles.
Drop cap
An oversized capital letter often used at the start of a paragraph that 'drops' into two or more lines of text, but can also climb upwards.
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
Often referred to as 'Mutton' to distinguish it from the very similar-sounding En, Em is a horizontal space equal to the current point size of text.
En
'Nut' to its friends, the En is a horizontal measure one half the size of an Em. That being the case, 'lamb' might have been more appropriate.
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.
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.





Glyphs are the singular parts that make up a font


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. Still with us in our guide to what is typography? Great! Because we've got more terms coming your way!
Gutter
The spaces between facing pages of, and very often columns of text.
Justified
In a paragraph of justified text, the contents are arranged so that there is no white space at the end of a line: each begins flush left and finishes flush right.
Kerning
The art of adjusting the proximity of adjacent letters to optimise their visual appeal and readability.
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.





Leading describes the vertical space between each line of type

Legibility
The ease with which one letterform can be distinguished from the next. It feeds into but is not the same as readability.
Loop
The lower part of the letter 'g' is known as its loop or lobe. Sometimes called the tail - a term that also takes in the lower portion of letter 'y'.

The lower part of the letters 'g' and 'y' are known as the loop or lobe


Logotype
The lettered part of any marque or identity. The logotype can be taken separately from its graphic companion.
Ligature
The conjoined but non-identical twins of the typographic universe. Ligatures pull two forms together to produce a new glyph.
Manicule
Also known as the bishop's fist (stop sniggering at the back), the pointing hand symbol is a popular dingbat.
Monospace
Fonts in which every letterform occupies the same horizontal space.
OpenType
Designed by Microsoft and Adobe, OpenType 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 considered to be as bad as the name suggests.
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 with the Roman tendency to paint letters onto marble before chiselling them out.
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.





Squoosh is the process of squashing or expanding a typeface digitally


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'.





Tittle is the name for the dot above the i or j


Terminal
A type of curve at the end of a stroke. 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.

The Creative CV

How to design your own typeface

01. Start with a brief

Type specs and drawings from Reading University: 'a' by Lisa Timpe, 'k' by Louisa-Helen Fröhlich and Bengali character by Tim Holloway

Designing a typeface can be a long journey so it's prudent to have a clear vision of its purpose. You might begin with something purely self-expressive. However, the usual practice is to create a typeface in response to a brief.

Developing your own brief will inevitably require research and reflection. How will it be used: is it for a specific project or personal use only? Is there a problem you might solve? How might your typeface fit into a landscape alongside similar designs? What makes it unique?

The options are vast. Typefaces have been created, for example, specifically for academic texts, to provide better number systems for engineering documents or as a one-off for public lettering. Only when you know what your typeface will actually be used for can you really get started on the design.

02. Fundamental choices

There are a number of early choices you need to consider. Will it be a serif or sans serif typeface? Will it be based on a writing implement or be more geometric? Will your design be a text face, comfortable at small sizes and suitable for long documents, or will it be a display face with an imaginative style, that works better a larger size?

Tip: It was suggested on the course that designing a sans serif typeface can be more challenging for beginners, because the features that provide these typefaces with their identity are much more subtle.

03. Early pitfalls

A couple of early pitfalls to avoid:
You might decide to start by digitizing your own handwriting, which can be a useful practice exercise. However, because handwriting is so individual, without much refinement your typeface could be restricted to personal use.
Don't base your design on an existing typeface's outlines. 'Helvetica with wings' is not going to produce a better typeface or help you develop your skills as a type designer. This should go without saying, but I'm told that typefaces like these are regularly submitted to foundries (unsuccessfully).

04. Use your hands

Much is written on how to draw letterforms, but even if you are a Bezier curve master, I'd advocate defining your letterforms by hand in the first instance. Articulating certain shapes via computer when establishing your design can be awkward and time consuming.

Try to create graceful shapes on paper for the first few characters before refining them digitally. Further characters can then be constructed on screen by matching key features, such as terminal endings and stroke widths. See over 100 type designer's drawings in Typography Sketchbooks.

Tip: The hand naturally draws smoother, more accurate curves in a concave arc pivoted by the arm and wrist. To take advantage of this, keep turning your paper rather than adjusting your position or drawing against this pivot point.

05. Which characters to start with

It can help to design certain characters first
Designing certain characters first can help set the style of your typeface and may be used to bring the other characters into harmony. Often called 'control characters', in a lowercase Latin typeface these would be the n and o, and in the uppercase, H and O are often used. On the Reading University course, we steadily added to these, building the word 'adhesion', which is used for testing the type's basic proportions (though initially, it was 'adhecion' leaving the tricky s for later).

06. Moving to your computer
There are a variety of ways to get your drawings onto the computer. Some advocate tracing programs, however I prefer manually tracing my drawings because I want full control over where the points on my curves go.
Most software requires a well-defined drawing to work with effectively, so when you're happy with a sketched character, try outlining it with a fine tipped pen (to get a shape edge) and then fill in the shape with a marker.

Tip: You can then take a snap with your phone's camera (these days most are of high enough quality), and send it to your computer.

07. Choosing your software

Type specs from graduate of the MA programme: clockwise from top left, Prakashan by Alessia Mazzarella, Téras by Sebastian Losch, and Aronde by Stéphane Passerat

Like myself, many designers from a graphic design background will naturally opt straight for Adobe Illustrator to start drawing their type. For drawing individual letterforms and experimenting, this is fine. However, it soon becomes obvious that this is simply not the right tool for creating a typeface. From the outset you will benefit from working in an environment that gets you thinking about letter spacing and word creation.

The software choice has opened up in the last few years on the Mac. The current industry standard seems to be FontLab Studio(Mac and Windows), but new software like Glyphs andRobofont are gaining more traction with type designers. The programs aren't cheap, but Glyphs does have a 'Mini' version on the Mac App Store, with some functionality removed that beginners are unlikely to miss. Both also offer a 30-day free trail. The other obvious advantage of these packages is that you can export your work in progress as a font.

08. Using the software

I was using Glyphs, as recommended on the course. The interface is good and there are handy videos online, but like any software, it takes a little time to become familiar with.

Once you've imported your image, the drawing interface is pretty close to Illustrator, however I found the control of Bezier curve points and handles much more accurate in Glyphs.

Tip: where possible, place your points on the extremities of the letterform curves (top, bottom, left, right) for greater control. See more digitization tips here on TypeCooker.

09. Text view mode
Once you have drawn a few letters, you can start typing words using the text view mode. Here again is one of the major advantages of this software: you can edit your shapes in the same text view to start harmonizing the characters together in words.
You can then begin making adjustments to the letter spacing, looking at the rhythm of the counters and refining the overall proportions, like the x-height, weight and width of your typeface etc.

10. Looking at words

Glyphs: Modifying your shapes within a text view
As Matthew Carter is oft quoted: "Type is a beautiful group of letters, not a group of beautiful letters". With this in mind, aim to start looking at your design from a line and paragraph level as early as possible.

Once you've created a few characters, you can enter them intoAdhesion Text, an online tool that uses a simple dictionary look-up to provide you with the words you can make so far.

Create a simple InDesign document with some text frames and paste these words into them. I set each text frame to a different font size for comparison (the sizes will depend on what your typeface is to be used for). Finally, export your typeface and select it within your document to see it in action.

Tip: Font management programs such as Font Book, FontExplorer can help activate your fonts for use with InDesign. On a Mac, exporting your typeface straight into /Library/Application Support/Adobe/Fonts/ means that you can hit the export button and flick between the programs to instantly see the effect on a paragraph and line level (the only works inside Adobe products).

Tip: While you're still in the early stages of your design, before you've settled on any spacing, you can use InDesign's built-in kerning tool to optically space your letters, maybe with some extra tracking, for a quick and dirty impression. However, this is total sacrilege when using a well-spaced, well-kerned typeface since you always want to use the in-built spacing.

11. Study other typefaces
To create a credible typeface, you need to study other good examples.

Looking at them in a critical way, from a contextual or historical perspective, will help you understand why certain design choices in these and your own typeface have a particular effect. Look at how the system of shapes work together consistently while forging an identity.

This is the subject of an entirely different article and again, there are plenty of good books to help you on the right path with this, however, the advice I was given, is to look at both typefaces that are in a similar style to your own, and those text typefaces that are generally accepted to be good examples.

12. Scale it down
It's important to review your typeface at different sizes in your test document. Depending on your brief, readability might be critical at smaller sizes, or you might be concerned with how your display text reads at a distance.

A change of scale can be troublesome. Looking at how your shapes behave at a variety of sizes, and learning what design decisions affect them takes practice.

13. Get it on paper

Seeing your typeface in print gives a different perspective
Printing your progress and seeing it away from the confines of pixels and backlighting will help you view it from a different perspective. To me, it seems much easier to spot issues with misshaped characters, the rhythm of counters, and the modulation of strokes etc, when pinned to a wall.
It's also easier to make notes and sketches for adjustment. Another benefit of printing is that when making thousands of micro adjustments over a long development period, a printout can help you track your progress so you can see how far you've come.

14. It's not just a-z

Your typeface might comprise of a limited set of characters because it's for a particular project, personal use or if it's a very decorative design.

However if your aim is for it to be used by other designers, for a variety of projects, then it needs to be flexible and have a broad character set. This would generally include small capitals, diacritic signs (accents), and a choice of numerals, ligatures and more.

15. Styles, weights and widths
A good breadth of weights can often negate that small detail you spent days labouring over. When a designer is choosing a particular typeface, she is likely going to need a palette of options to design with.

Does your typeface have a true italic, not just a slanted roman? Would your typeface suit a condensed version? This goes back to your brief and use cases for your typeface. See Lucas de Groot's TheSans for an example of an font family.

16. Consider global usage

So you've created something that you're quite proud of. Did you start with a Latin typeface? What about the 250 million readers of Cyrillic in Eastern Europe and central Asia? Or the 220 million Devanagari readers in India and Nepal?

There is a growing market for non-Latin typefaces and some scripts are woefully underserviced. A common question that I also asked myself is: "Can a non-speaker design a good script for a language they do not read?" The answer is emphatically yes. It takes a lot of research, learning about the script's history and culture, meeting native speakers and exploring historical examples, but a large number of excellent typefaces have been designed this way throughout history.

17. Put it to the test

Well-used Gujarati metal type

One you've crafted something you're happy with, you'll want to start seeing how it performs at a range of tasks suited to the original brief. Try using your font on some previous design projects, replacing the original typeface. Create some specific artwork that will put it under pressure or perhaps ask a designer friend to test it out and give you some feedback.