Typesetting. It’s basically your job.

Typography for Front-End Developers

Type is the main tool devs use to convey content, and the more we know about it the better our work will be.

Front-end developers may not need to be experts in every aspect of typography, but it’s really important to know the basics. Devs need to be able to effectively talk type with designers and clients. Beyond that, when working on personal side projects it’s good to avoid making a mess of the typography when you’ve spent so many precious hours on the code.

A lot of dev teams rely on Google Fonts everyday. Although Google offers a lot of beautiful fonts, it can limit dev’s day to day work. In fact there are a plethora of beautiful fonts everywhere we look. Without further ado, I give you Type Safari with James Victore:

Now that we’re inspired, let’s get started.

First: Serif vs. Sans Serif

The have and the have nots.

Basically there are two major classes of type:

SERIF — characterized by a small line attached to the end of the stroke.

SANS SERIF — characterized by having no serifs.

What Makes up a Character?

Glyphs

Good typography prevents wrinkles by keeping people from frowning while reading.

Most commonly — and for our purposes — glyphs are a single character in a typeface. Roughly speaking, one glyph usually corresponds to one character in a typeface. The letter a is a glyph, the letter y is a glyph, and the word “glyph” contains 5 glyphs.

Baseline

The baseline is the white line below the letters.

The baseline is an invisible line on which all of the characters sit. It is usually consistent within an individual typeface, but can vary between different typefaces. This is something front-end developers need to look out for when using more than one typeface and when the design needs to be pixel-perfect on a grid.

Cap Height

The cap height is the while line above the letters.

The cap height is defined by the distance from the baseline to the top of the UPPERCASE letters. Pretty simple, right?

x-height

Not to be confused with x-wings.

The x-height is the height of the lowercase x character.

Why x, specifically? The lowercase x characterizes the height of the majority of lowercase letters. Some letters like p, h, i, or n might go above that line. In the case of the letter n above it ends ever so slightly above the x-height.

Ascenders

Ascenders are different than cap height — ascenders refer exclusively to lowercase letters.

Ascenders are lowercase letters that extend ABOVE the x-height. Rise up!

Descenders

If your descenders are touching the text on the line below you need more line-height.

Descenders are lowercase letters that extend BELOW the x-height. Get low.

Type Tips

Consider: Size

Depending on the font, Apple recommends 17–22px minimum, and Google says 18–22px minimum

There will always be new trends for how large or small text should be to maximize readability. I included some deep dive links at the bottom if you want to learn more about font sizing for inclusivity, and sizing appropriately for various devices. Currently the standard minimum size for most fonts is around 16px.

Consider: Contrast

Don’t forget to also watch out for text contrast on top of background images!

Contrast affects readability. Make sure the contrast between the text and the background is strong enough to be noticeable. The WCAG (Web Content Accessibility Guidelines) requires a particular contrast ratio to achieve AAA status.

Display fonts are called display for a reason.

Also be careful with the font choices you make. Many fonts that have very thin weights might not display well at certain sizes, and may be more useful for larger fonts or display headlines.

Consider: Space

Don’t be afraid of leaving space around your content!

Your content needs space to be able to speak for itself. Negative space is the space or gaps that are left around elements of a design, such as letter, lines of text, divs, and images. Negative space is your friend.

Consider: Hierarchy

Keep your hierarchy in tact for better legibility.

Good typographic hierarchy helps our users have a good journey navigating our sites. Users find the content they want easily. Use font size, font weight, accent colour, and spacing to establish a hierarchy that you adhere to throughout your website.

Now you know the basics. Take a look at some resources below to dive deeper into type and up your dev game.

Resources:

Interactive Resource on Type Terms

Typographic Readability & Legibility

Other Tips for Type in Web Design

DEEP DIVE: Ideal Standard Font Size for Web

Debate: Do I Really Need to Use Sans Serif Fonts?

Web Design Best Practices: Minimalism & Typography

Majority of images used above found on tutsplus.com

Ascenders