Web Design 101: Fundamentals of Typography Design

Geri Mileva on Content Marketing

Typography DesignWhat is Typography?

Typography is one of the fundamental elements of design. It is the art and craft of making written language readable, comprehensible, evocative, and appealing.

Font vs. Typeface

Fonts and Typefaces are often used interchangeably. However, they refer to two different things. A typeface is a group of fonts that share the same style. A font, on the other hand, refers to how that style is delivered. Arial is one example of a typeface.

But when a particular size or weight is applied, Arial becomes a font. That means Arial Bold, Arial Regular, and Arial Italic are three different fonts that belong to the same typeface.

Common Types of Fonts

Typefaces can be divided into four broad categories: serif, sans serif, scripts, and display. Each category has its particular style, purpose, and character. Some can be used for different projects while others have specific functions.


The serif is defined by the small strokes attached to the body of the letter. The style looks traditional and serious. It is the go-to style for print, especially for materials with chunks of text. Serifs or those little strokes make it easier for the human eye to recognize letters.

Times New Roman and Courier New fonts are examples of serifs.

Sans Serif

Sans serif, which is French for without serif, doesn’t have that tiny line attached to the letter. Compared to serifs, this style appears modern and simple. Sans serif is frequently used for web materials as it is more legible even in lower resolution screens.

Aside from the Arial fonts mentioned above, the Helvetica fonts also belong to the sans serif family.


People often associate scripts with cursive writing. That’s because this particular font style does belong to this classification. However, it is not limited to that. Scripts are generally handwriting-inspired fonts. They are mostly elegant and classy. They are also associated with femininity.

French Script and Brush Script fonts fall under this category.


Display fonts, also called decorative fonts, are meant for grabbing people’s attention. They are mostly large in size and are quite stylized. They are great for short copy but are never the right choice for blocks of text. Moreover, they can give designs a specific look. Thus, you will not be able to use the same display font for different projects.

Blackmoor and Chiller fonts are examples of this style.

Why Does Typography Matter?

The typographic design or the way text is displayed can say so much about the business that your clients are operating, its purpose, and its consumers. Typography matters because it can help brands communicate the right message to target audiences. In doing so, they can convert potential consumers into actual clients. They can increase brand awareness and even brand loyalty.

How to Choose a Font

Designers need to consider a few important points to be able to choose the right font design for their project.

Does your font match your brand identity?

Fonts have their own personalities. Each and every single one of them has more to say beyond the words written on a page. They can come across as modern, elegant, fun, or playful. That’s why it’s important for you to consider brand identity or the message you are trying to relay before choosing a font.

If there’s a disconnect, the message wouldn’t be as effective, and consumers wouldn’t be able to fully grasp the brand. It could drive potential consumers away.

Is your font design appropriate for the type of audience you attract?

The font choice has to be appropriate to the project’s ideal consumer as well. For instance, luxury brands usually use modern and sophisticated font designs to attract their high-end buyers. Consider asking yourself the following questions before choosing the right font for a project:

  • What is the target age group?

  • Is there a preferred gender?

  • How large is their disposable income?

Is your font readable?

Readability is crucial to any design that involves text. To guarantee that the text is legible, consider where the design is going to appear. You should also consider the size of your design project, the spacing of the text, and the height of the lowercase letters.

Is your font versatile?

Web materials are typically viewed on different devices and various screen sizes. Hence, it is important that you choose a font that can be readable across all devices.

10 Rules for Combining Fonts

1. Choosing complementary fonts

As mentioned throughout this article, fonts can have distinct personalities. If your main text is going to be in a handwritten script, you shouldn’t pair it with another script font. With similar font styles, the design won’t draw attention. When it comes to combining fonts, the rule is: opposites attract. Find a more neutral font that can balance the look.

2. Establishing a visual hierarchy

When you open a newspaper or a magazine, you instantly know where to look first because the typography leads you where to look. Elements such as size, weight, and space help establish this visual hierarchy. Important information that should stick out at first glance should have the largest size and weight.

3. Considering context

If a certain aesthetic is needed in the project, then let the context dictate your font choices. Let’s say a client’s brand needs a retro design. You can look into fonts that were popularized in specific decades. Maybe you can look for decorative fonts that you can use for certain niche markets like young urban professionals or the culinary industry.

4. Mixing serifs and sans serifs

Serif and sans serif fonts look great together, especially when they have contrasting sizes. Perhaps you can use the serif font on the details you want consumers to look at first. Since it will definitely be larger in size, it will be readable in web browsing. You can use the sans serif for large passages of text since they are a better fit for the web.

5. Creating contrast

Contrast is key when it comes to combining fonts. That’s why fonts with opposite personalities work well together. That’s why serif and sans serifs complement each other. But there are several other ways you can approach contrast, including weight, color, spacing, and style.

6. Avoiding conflict

Fonts that are different from each other won’t necessarily look good combined. To avoid elements that will clash, you can use fonts that have certain similarities. They can either have similar proportions or similar lowercase letter height.

7. Avoiding similar designs

Too much similarity between fonts won’t let you establish visual hierarchy. When fonts are too alike, the design could end up looking bland or confusing. You can tell if the design needs more contrast by sitting back and squinting your eyes.

8. Choosing fonts from the same family

Fonts that belong to the same typeface will look great together since they were designed to work that way. Make sure you choose a family with different weights and cases so you have a variety of options to choose from.

9. Limiting the number of fonts

Adding too much variety to the design will make it look cluttered and confusing. For each project, you should only use at least two or three fonts.

10. Considering color and texture


Color and texture can help you establish visual hierarchy. Both elements can bring attention to the most important aspects of the design. Plus, choosing complementary colors and textures can help you improve user experience for any brand or product.



Comment Below