24 Must-Know Typography Terms For Beginners

Kirjoitettu - Viimeisin muokkaus

Typography comes with numerous technical terms. These terms can be complex, especially for beginners. Through understanding some of the elements listed below, your designs can feature well-thought out text. Incorporating them is an art that enhances the appearance and readability of a project. Typography and its success depends on how skilled a designer is. The typeface (font) a designer chooses in relation to the grid, color scheme, design theme, and layout determines the quality of a website’s appearance.

When it comes to typography and web design, it’s important to understand the various terms involved. So let's take a look at these 24 features in more detail, all of which can be considered at some point in your designing career.

1. Readability

Readability is the simple manner by which readers understand written text. Readability of text depends on how complex the syntax, vocabulary, line length, height, and font size is. Readability can be measured using various factors which include; visibility, contrast, fatigue while reading, and perceptibility from a distance. High readability eases speed and reading effort of the reader. It involves arranging words in a manner that lets a reader's eye connect to the content sensibly, and with ease. Understanding that there is a multi-factorial nature to reading means the designer has the highest chance of producing script that is appropriate for various projects.

What are the characteristics of readable type?

  • It should create a notable difference from the background to allow readers to see it with minimal struggle.

  • The spacing between words and letters should be adequate to enable readers to understand at a glance.

  • Related to these first two points is there should be enough white space around the text to set off the letters.

  • The word size is an important feature. It takes into consideration how much text is being used with respect to the final medium, and should be adjusted to allow easy reading, with no strain.

  • While it might seem obvious, it still needs pointing out that the language used should be free from grammatical and spelling errors, and be easy to understand. We can all relate to seeing an error in any number of situations which detracts from the final presentation. Somehow, that one mistake can stand out like a sore thumb!

A good example of how these characteristics of type are seen in everyday situations is the use of varying fonts and sizes in e-book readers. This digital and convenient form of reading can be found in Amazon's range and other tablets on the market. Individuals get to choose their preferred styles, and customize their books.

2. X-Height

X-height is also referred to as the corpus size of a type, using the lower-case x of any chosen font as a point of reference. It defines the style and tone of the entire type design, including the size of descenders and ascenders (see point 6 for more on this). The cap height refers to the height, and determines the point size of the capital letters which are identical height in one typeface.

3. Point Size

The point size describes a font's size. The default point size in many word processed documents is 12. Choosing the correct point size is easy, and it improves a document or web page's readability.

4. Baseline

The baseline is an invisible line where characters or letters sit. It provides a frame of reference to discuss other terms of typography, such as x-height and descenders. Designers often use the baseline to decide on spacing. It can also be used to measure vertical length.

5. Set Width

Set width is the horizontal spacing between characters. The set width between letters can be different in a typeface. However, they should be in proportional harmony to improve readability.

6. Ascender and Descender

An ascender is the stroke of letter that stretches above the x-height. Examples of ascenders are the letters b, h, and d. A descender is the stroke of a letter that stretches below the baseline. Examples of descenders include j, y, and q.

7. Kerning and Tracking

Kerning is the spacing between a pair of characters in a font. Tracking is the spacing between each letter. These might seem to be identical at first, but when you take pairs of letters such as AW you can see how they are different features. There needs to be enough space between each letter according to its individual form. Kerning determines the perception of a text. When kerning is not activated, some letters may appear to be far apart or, conversely, squeezed too close.

8. Leading or Line Spacing

Print designers often use the term leading, while line spacing is used by web designers. It means the vertical space in between lines of text, measured from baseline to baseline, with the correct amount improving overall readability (see the first point). The commonly used line spacing is 1.5 times the font - or point - size.

9. Character

Character defines an individual letter, symbol, or number in a font. Character sets can vary from including various alternative characters - such as symbols or glyphs - or being limited to either capital or lowercase numbers. A good example of a font which uses capitals only is COPPERPLATE.

10. Stroke

A stroke is any curved or straight line that forms a letter. The appearance at the end of a stroke determines its font. Strokes can either be thick or thin, which determines their classification as light, regular, or bold font.

11. Serif and Sans Serif

A serif defines a small line that appears at the stroke of a letter. Sans serif means letters which do not have serifs. Sans serif fonts are often used for headings to capture a reader's attention. Ideally, many designers use the serif and sans serif fonts together in a project. Microsoft Word is often found with the default settings of Cambria and Calibri fonts to demonstrate this nicely.

Are your looking for a web designer? Go to freelancer.com for the best quality and affordable web design services.

12. Bowl or Counter

The bowl describes the curved area of a letter such as in the letters c, g and p, and can either be oval or round in shape. The counter is the space inside letters such as in the letter o, which demonstrates closed counter. The letter G shows, by contrast, a letter with open counter. Understanding the counter measurement also enables designers to adjust tracking, kerning and line spacing.

13. Swash or Tail

A swash is a line added to a letter for the purpose of decoration - a decorative serif, if you will. Swashes, and the descending tails which appear in letters like Q and y, enhance the appearance of text and are used to great effect in fonts like Apple Chancery or Curlz.

14. Ligature

A ligature defines the instance when two letters are joined into one. Designers who want to display ligatures on websites sites should select a typeface that can support them.

15. Terminal

A terminal is a stroke that does not have a serif at the end. It often comes in a tapered or ball shape.

16. Fill (Color)

The fill defines any color, shading, and texture within the stroke of letters, which can be seen very well in fonts used to represent Gothic and other medieval scripts.

17. Line Length

The line length is a number of elements on an individual line of text, on a single column. The default line length in many websites ranges from 45 to 75. Line length plays an important role in enhancing readability.

18. Widows and Orphans

As the words might suggest, a widow is a short line, often one word at the end of a column or paragraph. Usually, a widow presents poor typography and decreases readability because it leaves lots of space at the end of a page, and in between paragraphs. Similarly, an orphan is a single word or short line that appears at the beginning of a page or a column.

19. Alignment

Alignment defines the positioning of a text. This can either be right, left, or center. The default alignment position is left.

20. Type Family

A type family is a series of typeface designs that are alternatives of an individual style of alphabet. There are numerous types. Choosing different font type families helps bring contrast within a text.

21. Cap Line

The cap line is an invisible line for capital letters in a typeface, and is a reference point when considering the height of ascenders. It's the line at which the majority of the capitals used will reach.

22. Glyph

A glyph is a small graphical element in a font. A glyph can be found in a numeral, letter, punctuation, or any other element.

23. Font

A font is also referred to as a typeface, and defines the weight, style, and size of a text. Some popular fonts include those with serifs such as Times New Roman and Georgia, and sans-serif fonts like Arial, Calibri and Gill Sans.

24. Weight

Weight is used to define the thickness of text. A thick font can also be said to be bold, while a thin font is referred to as light. Choosing the right font weight improves readability, as was pointed out at the beginning of this article.


Designing a good website involves being able to understand and use these features of typography effectively. They enable designers to enhance readability, and make an impact on readers by capturing their attention to the important points of the content. What aspects of typography do you incorporate? How do you utilize them in your designs to enhance readability?

Are you looking for a web designer? These professional and quality designers will provide you with the best services. And why not leave us your views in the comment section below, and remember to share this article on your social media platforms.


Tilaa nyt ja saa viikottaiset päivitykset

Pysy ajantasalla parhaista artikkeleista Freelancer Yhteisössä. Tilaa nyt jokaisen viikon parhaat suunnittelu-, kehitys ja freelancer-sisällöt.

Ilmoitettu 12 syyskuuta, 2017

TomCoulter Henkilökunta

Designer // Writer // Creative

Tom is a Design Correspondent for Freelancer.com. He is currently based in Melbourne and spends most of his non-work moments trying to find the best coffee.

Seuraava artikkeli

Design Trends: The Importance Of Using Authentic Imagery And Photos