20 Basic Typographic Terms for UI Designers

Microtypography

Synonyms: finetype, micro-typography, microtype

Microtypography is a range of methods of controlling the fine details in type for improving the readability and appearance of text.

Controversial

Not every designer has enough experience to work with type correctly. Many designers overlook this, considering fine-tuning optional and invisible. But it is exactly at the sense level that users first have rejection, and then even disgust, which negatively affects the whole project:

1. Unreadable text
2. Violation of meaning
3. “Beautiful” fonts become ugly
4. Poor readability
5. Confusion
6. Users frustration
7. Terrible accessibility
8. Decreased understanding
9. Lost users

Ligature

Synonyms: underscore, low line, low dash

Ligature takes place when two or more graphemes or letters make a combination as one symbol, as in the English character “æ” that merges letters “a” and “e”.

Typography is an astonishing art with lots of useful features that can also help to build a great interface design and make it advanced usability-wise. Compared to printed typography, web typefaces are a lot less detailed, but the ligatures are here to bring in some diversity to your text. 

Historical Tips

It is believed that ligatures were created by merchants who needed a way to speed up the written communication process. They realized that conjoined letters and abbreviations make the working process with long forms more convenient.

Ligatures were used widely until the start of Apple II production in 1977. Early digital software wasn’t able to support the ligatures in typefaces so they were excluded.

The popularity of ligatures increased again in the last 20 years because of the interest for creative typesetting systems.

Ligatures Today

Modern ligatures are divided into three groups which are:

1. Standard ligatures that are necessary to make the font to display correctly.
2. Contextual ligatures that are used to create a certain image.
3. Historical ligatures that are being implemented to give the text a vintage print look.

One of the most common ligature examples is ampersand (&) that was developed from the combination of handwritten latin letters “e” and “t” (“et” means “and” in Latin). German letter ß (Eszett) is an official letter in German and Austrian alphabets, but was basically created after the connection of "long s and z" (ſʒ). Armenian, scandinavian, cyrillic, chinese and japanese languages also have some ligature examples.

Digital fonts cannot have physical collisions, but some visual overlaps are still possible. In this case there are some hacks on how to put the ligatures into your text manually:

• You may try to insert the ligatures from a character palette in your editor.
• If using HTML, you may enter the escape codes for the ligature glyphs.
• If your operating system or browser supports Unicode, you can use certain code to insert the ligatures within installed Unicode fonts.
• You can also try to use the kerning to adjust the distance between letters and create the ligatures where needed.

Emphasis

Synonyms: strength, weight, accent

Highlighting is a way to visually highlight words so that they stand out from the rest of the text. This is done by slanting, underlining, condensing or increasing the size of the letters.

The most common methods are: italic, bold, UPPERCASE, underline and strikethrough.

Tip's & Tricks

1. Choose one method of emphasis.
2. Everything emphasized = nothing emphasized.
3. Italic for gentle emphasis, bold for heavier emphasis (only for serif fonts).
4. Bold only for sans serif font emphasis.

Underline

Synonyms: underscore, low line, low dash

Underlining is a common tool for emphasizing the text or marking a link. Basically, it is just a line that is situated under some text segment.

Tips & Tricks

If speaking about the usage of underscores, one cannot forget about the underlined hyperlink in blue color, that is the most common and identifiable feature in the user’s online experience.

It is not always justified to use the underlining in combination with a color as a hyperlink emphasizing tool, but this design is the most recognizable one. It allows the user to easily navigate through the text and indicates the links you have already visited by changing the color of a typeface.

However, there could be cases when designers would want to make the hyperlink decoration more creative. Here are some alternatives for underlining links:

1. Use the link color.
   Consider the contrast and be careful with the color blinded users.
2. Try the option when the link appears on hover over the text.
   Try the option when the link appears on hover over the text. This is useful when you want to provide the users with some extra information if they are interested. One disadvantage here: users cannot see the link in the first place and need to look for it in the text.

Underlining is a nice tool to indicate the key text or mark a link. One last hint here is once you decide where to implement it, do not use it for the other words in the text block.

Strikethrough

Strikethrough is one of the font decoration elements that provide the crossed-out appearance of the text.

In some medieval manuscripts "strikethrough" of text with red ink often functioned as a highlight, which is similar to modern underline. In modern usage, strikethrough can be helpful to mark up the deleted information or some old version search results for instance. Designers can also use the strikethrough to indicate the text that is no longer valid in a document or on a web page.

Sometimes strikethrough can be applied to show deactivated items in a list.

Double strikethrough is not commonly used but can be applied to indicate the changes in wording in legal documents.

Overshoot

Overshoot is an optical adjustment of one element in comparison to another with the purpose to achieve a visual balance between shapes or letters.

In relation to typefaces, it is common to make round characters (C, O) practically taller than the flat ones (T, H) because of the human’s eye biological tendency to perceive circles as smaller shapes than squares of the same dimensions.

Triangle shapes also appear smaller than they are in reality, so the solution here is the same: applying slight overshoot for the pointed letters (A, V, W, N, M) will make them look the same size as the flat ones.

Tips & Tricks

While working with overshoots, remember that capital letters with a necessity for this feature are usually extended below the baseline or above the cap height, whilst lowercase letters are normally enlarged below the baseline and/or above the x-height. You may also use these rules for circle and triangle shapes in your design by applying the guidelines.

Tracking

Synonyms: letter-spacing

Tracking is the letter spacing over a range of characters. Tracking (or letter-spacing) ​refers to loosening or shrinking a selected block of text, while kerning is the process of adding or subtracting white space between specific pairs of characters.

The spacing will be the same throughout the block of text, and this spacing method to affect visual density in a line or block. Tight tracking, especially in small text sizes, can diminish legibility, while adding too much space reduces readability.

Descender

Descender is a part of the letter which extends below the baseline, in the opposite way from ascender. Most of the descenders belong to lower-case characters, such as g, j, p, q and y. However, depending on the font, capital letters can also have descenders: usually we are speaking about Q and J. Some descenders are also called “tails” because of their curve: this works for letters j, y and Q, unlike the p and q where descenders are vertical. Letter g’s descender is often called “loop”. In some typefaces you can also notice the letter f with a descender. Many letters can slightly extend below the baseline but this is commonly known as overshoot, not to be mistaken for descender.

Descenders as elements have some varieties to be considered as well.

1. Crashing descenders. It happens when the descender of one letter touches the ascender of the letter on the line below. You may prevent it by providing more space between letters and lines with the adjustment of kerning, leading or tracking.
2. Numeral descenders. They are used in old style fonts for figures that have different positions and height. Try to avoid implementing these in tables as this kind of numerals can look messy. You may use it in big body text blocks for diversity.
3. Capital letters’ descenders. Usually this is about letter Q with its tail underneath the baseline and sometimes the letter J that outlines the baseline as well. You should check on potential crashing descenders when using these capital letters.

Ascender

Ascenders are the vertical strokes directed upwards above the x-height line and sometimes even above the cap-height of capital letters. These small elements make the text much more readable and each word more recognisable as the eye has something to catch while reading through the text block. Ascenders are common only for lowercase letters.

According to...

British studies, held before the construction of the UK motorway network, showed that ascenders and descenders improve the recognizability of the information on the road signs. This is why it is so important to steer clear of using capital letters and all-caps styles sometimes. You may also look out for crashing ascenders, which can overlap the descenders from the line above. Kerning, leading and tracking should help you out to prevent the “crashing” situation.

Cap Line

Synonyms: cap height

Cap height or cap line is simply the distance between the baseline (bottom line, on which the letters are “sitting”) and the top of capital letters for a particular font. Standard cap line counts for flat letters such as H or I. Round letters like S and pointed letters like A usually have a higher cap line and slightly extend the standard cap line thanks to overshoot, as it allows to achieve the same size effect and bring visual balance to the text.

Some letter elements like ascenders normally do not extend the cap line. However, there are some script style typefaces that have overshoot ascenders and in some typefaces ascenders can appear below the cap line.

Baseline

Baseline is an imaginary line that supports all the letters in your text. Thanks to that important definition we can measure the vertical spacing between the text lines, text blocks and other elements on the page.

Text is always about typography, whether it is printed or digital. Some typography rules can be implemented to your interface design and make your life easier. One of the most important concepts in this field is the baseline.

Several typography elements appear based on this concept. First of all, descenders, which are letter elements that are extended below the baseline. Lining figures, that unlike old style figures are aligned by height without any additional elements such as descenders and ascenders. Capital and lowercase letters are built depending on the baseline: some of them are strictly aligned, some of them like “O” and “S” are slightly extended below the line to get the visual harmony. 

There is another helpful tool that was built on the idea of the baseline: it’s the baseline grid, especially the 4px grid that is used most commonly.

Baseline grid is normally applied to create the vertical rhythm between text blocks and other elements of the interface. The principle is simple: instead of aligning the content according to the text boxes, you can build your composition in accordance with the distance between baselines and cap lines (the height of capital letters). It definitely makes the designer’s life easier, as you can achieve the visual balance in details without measuring it pixel by pixel. 

You may use the baseline grid to specify the distance between UI elements and simply traspher the UI specs into padding code for development.

X-height

Synonyms: face, case, fount

X-height is basically the height of the lowercase letter «x» in any font. Working with x-height is one of a few ways to increase legibility and make the text easier to read.

As you can see in the image below, the larger x-height you make the more readable font appears. But this can work on both sides.

Although large x-height makes a type more visible even while using smaller font sizes, making x-height too large can reduce legibility within text blocks. This happens because the user’s eye cannot distinguish the difference between the lowercase letters and capitalised ones quickly and easily read through the text. Hence, using large x-height in paragraphs can mess up the perception and make it harder for us to recognise different letter shapes. On the other hand, smaller x-height can increase the space between lines and size of the ascenders and descenders, which will provide better understanding. 

Headline

The term comes from printing and defines words line in huge size, reflecting the news's immediate sense. It keeps its meaning in UX, but the technical aspect matters here: headlines are the largest words in the layout, while other text parts are always smaller.

Subtitles

It is middle-sized text, in comparison with the heading and the body. While the headline contains the main idea of the text, the subtitles expand and clarify it. After reading the subtitles, the user is aware of what the entire text is about. Here serif or sans serif typeface work well.

Leading (Line spacing)

Synonyms: line-height, line leading, type spacing, baseline spacing, interline spacing

Leading is the space (vertical distance) between each line of text in a paragraph and commonly measured as a percentage of font size.

Controversial

Often wrong leading can make a block of text less readable. Thereby, 'beautiful' fonts can become ugly when they're unreadable simply because frustration always trumps aesthetics. Your users will immediately notice that there’s something bad with your text, even if they can’t put their finger on what it is.

1. Unreadable text
2. “Beautiful” fonts become ugly
3. Users frustration
4. Atrocious accessibility
5. Poor readability
6. Confusion.

Body

Referring to user interfaces, the body is called the main part of the text content of the container. It has the minimal type size, comparing to the headline or the subtitles. Due to the body usually means a long-form writing, it is recommended to use serif or sans serif typeface for better legibility.

Kerning

The process of tuning the space between letters of the font. A well-balanced kerning gives the font the pleasant look and good legibility, providing visually similar blank space between each pair of letter signs.

‍

Visual planning & estimation tool for website gurus

Simple and powerful AI-driven tool that helps thousands of web agencies plan, prototype, visualize, prepare proposals, and manage web projects. The only solution you need before opening Figma, Webflow, WordPress, or any other tools.