Typography

Typography is the art and practice of styling and organizing letters and words on a page.  One can often tell at a glance when a font or design “feels right” and when it doesn’t, but it might be difficult to express what makes it work. To understand why your eye seems to flow over some pages and get stuck on others, we need to dig into the concepts of typeface, size, color, and spacing. Let’s go a little farther in our grasp of typography, beginning with a few fundamental definitions.

Typeface

The general design, style, and form of all letters, numerals, and punctuation are referred to as the typeface. It is what we commonly refer to when discussing a certain style, such as “Helvetica”, “Times New Roman” or “Arial.” 

A typeface can be broken into four categories: 

• Serif
• Sans-Serif
• Script 
• Decorative 

Serif

Serif fonts contain ornamental strokes, known as “serif,” on the tops and bottoms of the letters or numbers. They almost look like little feet at the edges of each character. These typefaces are more decorative and might seem more formal or official, similar to the classic Times New Roman font.

Sans-serif

Sans-serif fonts are those that do not have tiny feet. They are more evenly weighted throughout all strokes, implying that the strokes are all of the same density/width. They are perceived as cleaner or more contemporary. 

Fun fact: Sans means “without” in french. So you are essentially saying “without a serif.”

Script

Script typefaces seem handwritten or calligraphic.

Decorative

Decorative, (sometimes called display fonts) are a catch-all term for a typeface that is more creative or eclectic. Most movie titles, like the Star Wars font, for instance, are decorative fonts. 

Fonts

There are typically several fonts within a single typeface since it relates to the name of the typeface, along with the size and weight. “Helvetica, bold, size 14” is an example of a font. 

Font family

Font family is the collection of typefaces. This is generally only used in reference to CSS. You can learn more about CSS here. 

---

Font Anatomy

Below are a few common terms you might run into when working with fonts and typefaces online.

• Cap: The height of a typeface from the baseline.
• Ascender: The upward strokes that reach over the top of the cap
• Descender:  Strokes are downward strokes that extend beyond the baseline.
• Stem: A character’s straight vertical stroke
• Weight: Thickness of a font
• Baseline: Invisible line upon which the text rests
• Kerning: The spacing between two letters (in CSS this si the letter spacing)
• Tracking: The uniform spacing of letters across the whole of the word/text
• Leading: Adjusting the vertical space between lines of text
• Letter spacing: This is the spacing between each letter

Using font pairs

One of the more difficult ways to create a visual hierarchy is by using different fonts on the same screen or design. Consider using a serif font for the body, and a Sans serif font for the headline elements. Below are three examples of font pairings.

It takes some skill to figure out which fonts work with each other, especially if you’re also playing with weight, size, spacing, and so on at the same time. 

With so many choices, it’s important to remember to limit one font for each heading size, and ideally no more than two different fonts per page

There is a lot more to learn about typography than what I’ve talked about here, Check out these resources for more information.

---

How to use fonts effectively

Use visual hierarchy 

Hierarchy is very important because it helps your users see what you want them to interpret as most important. You can change the size, weight, orientation, color, space, and different types of fonts to create a hierarchy

To use size, make a difference between what you want to emphasize and the rest of the page. The example below shows how you can use font size to Define sections on a page.

Pay attention to how your typeface looks when you make the font size bigger, as well as how it looks next to other types of text on a page. 

Here are two images that illustrate the importance of understanding visual hierarchy:

I’m confident that you read that image exactly the way it said you would. That’s because our eyes naturally gravitate towards the largest text. And then we go down and to the right. Understanding little things like this can really help us communicate our messages more effectively. 

Use font-weight

Increasing the thickness of the font-weight (bolding text) is a great way to show its importance. However, remember that If everything is important, nothing is important, so use font-weight sparingly. Only use it when you truly want to differentiate something. 

A page’s orientation refers to where text is on the page in relation to other text. Changing the orientation of text (tilting it, putting it vertically, and so on) Can be a powerful form of communication, however, it should only be done by someone experienced. This can quickly look ridiculous if you don’t know what you’re doing. So if you’re considering changing the orientation of your texts, use caution. 

Use color

Using color effectively is one of the best ways to communicate to your readers. You can use colors to draw the user’s attention to where you want it to go.

Red, yellow, and orange are all warm colors, and they’ll help your text stand out on the screen. Cool colors, on the other hand, will fade away and make your text look more muted.

However, you will likely notice that the yellow text from the example above is very difficult to read. This is an example of bad contrast.

Use contrast

Contrast is the difference between light and dark. However, it also applies in colors. The image below illustrates this concept wow. You will notice that some of the text is easier to read while others are more difficult. The key takeaway is to pay attention to the background color.

Use white space

Using white space -the space between design elements -can help you make your text more legible. The way you use space is very important not only for how things are arranged but also for how easy it is to read. 

Conclusion

Now that you understand the fundamentals of typography, you were prepared to create beautiful designs, whether it be web-based or print-based.

Introduction

Lesson One: Create a Blogs@Baruch site

Lesson Two: Introduction to HTML

Lesson Three: Introduction of CSS

Lesson Four: Introduction to UX/UI

Lesson Five: Wire-framing

Lesson Six: Typography