Typography Design

Working with type can be intimidating, with tons of choices, potential use cases, and terminology rooted in the print industry.

If you are coming to design from anywhere but a printing studio it can be hard to catch up quickly. This is an introduction to the typefaces, color contrast, alignment, readability, text hierarchy, and more, that you can use to start laying out type successfully.

Typography design can evoke emotion and convey an intention or message in itself. Often, a goal of a typeface is to communicate “non-verbally,” providing visual information about the tone of the brand, project, company, or the information contained within before the text is read. For example, Cold Type is a term that refers to a typeface that appears unwelcoming, administrative, or uninviting.

Typography is about clear, quality communication with readability being a critical factor when setting type. Good type can create aesthetically beautiful products and designs that are also usable.

There is a lot to learn and understand about type. And there are entire books dedicated to typographic styles and using type on the web. Let's dive into the two most common questions we hear from new designers are:

• How do I pick a typeface?
• How do I customize that type?

Picking a typeface

Typefaces are often chosen for what they say before the words set in them are ever read.

Companies usually select typefaces for their brand to match their style or desired customer perceptions, often with the goal of seeming approachable and trustworthy. The right typeface will be a response to the project brief itself, aesthetically and functionally. Some typefaces work better for headers than menu text or have large enough font families to incorporate international scripts, glyphs, and other special characters.

Since you may have started a project by writing or gathering content, it’ll be easier to determine the voice and tone of your type as well. If you know what you want a product or brand to say and sound like, you can echo that with the visual cues of a font.

If a brand's tone is intended to be professional — and not light-hearted — then a serious typeface that has a limited amount of decoration or extra flourish may be a good choice to imply that tone before a viewer even begins to read.

Which of these two examples seems more professional?

Roboto, on the left, looks cleaner and provides a sense of sterility, perhaps more identifiable with corporations. Almendra, on the right, is based on calligraphy, and doesn't represent the Figma brand appropriately.

A typeface that is too sterile may leave your viewers uninterested in reading long-form text. And one that is too playful may be distracting from your message.

It is definitely a balance, and one of the reasons there are so many different typefaces.

A lot of typeface preference is subjective, but you can help pick your typeface for its destination: Where is it going? (Print design, digital, or both) And who is it going to? (Identify your audience). It’s also worth considering your comparative research and mood board if you’ve started there.

A mood board might show you that you’ve already begun to consider a visual tone, and looking at comparable solutions during the research phase may demonstrate how others approach similar problems as well as identify patterns or norms expected for the intended destination.

When exploring typeface options, you can start with the fonts on your computer, or hit the internet and head to one of the many font finding sites, like Google Fonts.

As you browse a font collection, flag any fonts that seem to you to be on-brand or appropriate for your project but also grab your attention and stand out visually.

You're looking for the overall construction of the letters (x-height, cap height, counters, apertures, etc. More on type anatomy below), ability to scale, legibility, personality, and decoration are all elements that help influence the overall look-and-feel of a typeface.

Once you have some fonts picked, try applying them in different situations — especially those similar to what you intend to use them for in your project.

Here is a Figma file with a few type options to try out a font in. Once you open the file, change the text to the left to see it reflected across the page and app screen.

The Figma file above is a great start for exploring new typefaces. Once you start working on a project, testing new typefaces with real content is the best way to choose an appropriate typeface for that text.

If you aren't currently working on a project, then this is an excellent opportunity to identify a website or app that you love and use their content to try out new typefaces.

Once you have some content written, or have found another product to copy, start with the name of the product or brand and change it to a typeface you tested in the exploration above. Make sure to try it in a few different sizes, seeing how it looks small and large.

If it doesn’t look right — with the meaning of the word or name set in that typeface — it’s probably not the correct fit. If it does seem right, then continue testing by applying some other colors.

Set the text to black with a white background and white on a black background. If you’ve already selected or have been assigned a primary brand color, adjust the text to be that color and again examine with a white background and a black background, then white text and black text on a background of your primary brand color.

Accessibility

We’ll talk much more about color in the Color lesson, but there are some specific ideas to focus on when it comes to your text. As highlighted in the Inclusion lesson, it is crucial to make your design's accessible. With type, a common issue is that there is not enough contrast between the type and its background, usually a solid color, a gradient, or an image.

Having subtle, light text on a similar background is, unfortunately, a popular style. But this lack of contrast can make text hard to read for not just individuals with low vision, but for everyone.

The Web Content Accessibility Guidelines has set a grading standard for testing contrast on the web. This includes a score and a ratio.

There are many tools available for checking the contrast ratio of two colors, some are listed in the Inclusion lesson; for macOS, there is a great menu bar plugin called Contrast. The scoring set in the Web Content Accessibility Guidelines for contrast ratio is:

• Fail, a ratio of less than 3.0; the text doesn’t have enough contrast with its background, rendering it illegible or hard to read. A 0 on the scale is white text on a white background, which is no contrast at all.
• AA Large, a ratio of at least 3.0 is the smallest amount of contrast for type that is 18px or larger that is acceptable for usability.
• AA, a ratio of at least 4.5 is a goal for any text below 18px, the same ratio as AAA Large.
• AAA Large, a ratio of at least 4.5 for any text larger than 24px, or 18px when bold.
• AAA, a contrast ratio of at least 7.0 is ideal for long-form reading or other large amounts of text and is achievable if your customers can set the foreground and background colors themselves. The scale goes to 21.0, which is achievable with black text on a white background.

For readability, aim for the highest score possible, with AAA being the best.

This is important to understand because if you are going to spend the time finding the right typefaces for your project, that work with the colors in your designs, it’s best if people can see them.

All customizations for the purpose of accessibility can also make your text more aesthetically pleasing and increase the effectiveness of your messaging.

You can also increase readability by changing the size, weight, and spacing of your text, or the change the typeface entirely. This increase of white space can also help to reinforce hierarchy.

Combining typefaces can also increase hierarchy, visual interest, and give you access to more use cases the way that a large font family might.

Just like working with color, it’s best not to involve too many typefaces, 1–3 is ideal, for any design — especially an app or webpage. Think about the consistency of spacing and alignment: keeping designs consistent with font choices can also help a design — and story — read clearly.

Customizing Type

There are many elements of type that you can adjust as you design. Changing these parameters can help you fine-tune the look, legibility, and mood of a character, word, line of text, or product.

We just covered a bit about color above, which is one of the most commonly altered elements of text. The upcoming lesson on color will go into much further detail about how to choose colors, but always keep in mind increased contrast for greatest readability and accessibility.

Similar to color, the opacity of text can be altered. This can be helpful in creating similar colors without diving into the color palette at all. Setting a background to blue, and then a black type with 40% opacity would make the text appear light blue in a similar hue to the background color.

Kerning and Leading:

The spacing around letters and lines of text are commonly edited by a designer to increase legibility, add more white space, and to alter the aesthetics of a page or screen. There are many ways to change these typographic spaces.

Fonts are constructed so that any two or more characters can be placed next to each other. Sometimes the space around a character is set in a way that it looks further apart or closer together to its neighboring characters.

Kerning is the process of adjusting that spacing between letters to make the distribution of letters and the space between them appear even. Increasing or decreasing letter-spacing so that the characters in a word, wordmark, or line of text look evenly distributed optically. In many creative tools, including Figma, you can adjust the letter-spacing. Here is an example of editing the kerning of a word:

The goal is to make them seem evenly spaced when looking at them, and often a designer will move letters closer and further apart to give that appearance. It takes a little time, but as you design more and more you’ll develop a better sense for proper kerning.

Leading is the adjustment of space between two lines of text vertically. Increasing or decreasing line height can help to improve or reduce readability. Leading is measured from the text's baselines. Generally, setting the line height between 1.125 and 1.200 times the font size (112.5%–120.0%) results in readable text, but every typeface has nuances — including line-spacing.

Long lines of text, bold set type, type set at small sizes, and sans serif typefaces may require more leading.

Weight and Style:

In a typeface, for example, Montserrat by Julieta Ulanovsky and studio, there are multiple styles and weights — such as regular, bold, italic, thin, black, etc. — and each has a font. A font is a file for installing and using a set of type in a particular font weight and text style. A typeface with multiple weights has a font for each weight, together they are known as a font family.

The typeface Montserrat has a font family of 18 fonts: Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, Black, and Black Italic.

Weight refers to the thickness of a letter’s stroke. A typeface can range in weights from hairline to ultra-black and have many fonts in between, while some typefaces may come in only one weight. These weights also have a number association, which is helpful to understand when programming or collaborating with a developer. Weights generally coordinate to a number on a scale of 100 to 900, with intervals of 100: Regular 400, Medium 500, Semi-Bold 600, Bold 700, etc.

Font style is the adjustment of the characters or case, such as italics and all caps respectively. Some typefaces have no style option, and sometimes only offer a Regular weight.

Letter case also referred to simply as “case,” is the distinction between smaller letters like lowercase and larger letters like uppercase or capital letters. Most typeface sets have letters in both, while fonts like Bangers are set in uppercase only. Typefaces set in only uppercase or only lowercase letters are far less common.

In English, the various case styles are used differently, depending on the circumstances:

• Title Case, is a Mixed-case Style Where All Words in a Sentence Are Capitalized With The Exception of Articles, Short Prepositions, and Conjunctions. These Exceptions Are Somewhat Subjective.
• Sentence case is what we’re used to seeing text written in, including this sentence.
• ALL CAPS is when all text is uppercase and is commonly used for headings, wordmarks, button text, or other types of labels. Use it for emphasis, rather than long-form text where the lack of ascenders and descenders can make it hard to read in large quantities. All Caps is also used online to imply yelling, so avoid using it in chat- and conversation-based interfaces.
• Small caps are similar in form to capital letters but are as tall as the x-height of the typeface. Small caps are used to distinguish from body text and heading text, however, they are not offered in many typefaces.
• all lowercase text is a stylistic choice used in some products and wordmarks for aesthetic purposes.

Size:

Setting and changing the type size of type can be a difficult decision. It will depend greatly on the medium that the text will appear, like paper or mobile phone or billboard, and can change depending on the viewer’s device, or responsiveness of the design.

It’s important to determine hierarchy with your type choices, using size as one of the elements of emphasis.

In web development, some key sizes need to be defined, such as the heading, subheading, body text, menu and footer text, etc. A lot of designers start with the heading size, also known as the H1, but it may be helpful to begin with the body text size, as that is how front-end developers might implement it. When a developer works in ems, a unit of measure based on scaling, the body text size is 1em and every other text size is a multiple or fraction of it.

For example, a common body text size for the web is 16px. The H1 may be set at 3em, or three times the body text size, in this case 48px. As the web page is going to be designed for multiple screen sizes, the designs you create may call for different font sizes depending on the customer's device. The developer can have the body text size change with the browser dimensions of your customer, and all other text will scale accordingly.

Details:

A lot of typography is the little details and nuance.

For example, when laying out text one of the aspects to examine is the rag. The rag is the uneven edge of left- and right-aligned text. It can be manipulated by increasing and decreasing the width of a text box or changing the lettering-spacing of the whole body of text.

When one or two words end up at the end of a paragraph it’s typically called a “Widow.” Or at the beginning of the next column, an "Orphan."

However, as May-Li Khoe points out:

Refer to them as "danglies" instead.

As text boxes are adjusted to prevent danglies, the line length is being adjusted. For body text in English, limiting line length to approximately 40 to 60 characters, including spaces and punctuation, is ideal for accessibility and readability. If line lengths need to be longer than 60 characters, increase the line height for better readability.

One of the easiest ways to make a document or interface look and feel well designed is consistency in where objects sit in space.

Say your app screen has a title and it is 100px from the top of the frame or screen. You want all the other app screens with similar titles to have those titles in the same place.

Guides and measurements are your friends here  —  just click and drag from a ruler in Figma to create a guide, and hold the Alt key when an object is selected to see the distance to the objects around it.

Consider the left side, or left vertical margin, of a website, poster, app screen, infographic, etc., containing a logo, an image, a header, and some body text. Aligning these elements to each other will make it easier for the eye to move down the page, but also makes the layout of this content seem considered and intentional.

Justification is a concept of alignment specific to blocks or line of text.

• Left justified is when the beginning of each line of text starts at the same x value along a left margin. This is also known as left-aligned and it creates a rag on the right.
• Right justified is when the end of each line of text is flush against a right margin. This is also known as right-aligned and it creates a rag on the left.
• Full justified is when both the left and right ends of lines of text are flush to both sides of the text box. Letter-spacing and word-spacing are adjusted to set each line of text to a consistent width. There is no rag with full justification.
• Centered text is the absence of justification.

Customer customization

Consider that the readers of your text can often customize these parameters themselves. And that’s a good thing, don’t resist it. Creating a pixel-perfect type specimen doesn’t matter if it’s not accessible. As overviewed in the Inclusion lesson, your designs might be experienced through a screen reader or magnifier, or by someone that can’t perceive colors in the same way you do. Text should never be rendered as images. If an article of text was a picture, it would be inaccessible to screen readers and unadaptable to different size screens.

Customers can also edit text on the web, intentionally or not, with the font and zoom settings of browsers and mobile OSes, with the fonts not loading on poor internet connections or older browsers, or with inspecting a page in a developer view and altering type settings directly in CSS.

That’s why designers need to understand accessibility features like Alt Text, it’s all part of the customer experience. Alt Text — short for alternative text, and also known as alt tag, alt description, and alt attributes — is code within a webpage or app used to provide a meaningful description of what an image communicates. Alt text is exposed by screen readers and may be crucial for individuals navigating your page or product with reduced vision.

In programming, it should be applied to every image within the HTML code by including an alt tag. It should be added even if the image is decorative, in which case the tag should be empty.

Type and letters have additional parameters that are generally not customizable for the designer. For example, Set Width is the width of the body of a letter plus a buffer of space between surrounding letters. You can also manually scale type vertically or horizontally by outlining your text (see Outline Stroke) and then adjusting manually. Ellen Lupton calls this altering of the shape of a letter in a typeface a “Type Crime.”

From here you can try what you just learned about typography in another section: Design Your CV Exercise. Dive into more details about the typography system, or save it to come back to later.