Definitions >

Baseline

What is a Baseline?

Put simply, baselines are the invisible line your words sit on.

baseline cover

It’s a pretty basic concept with a significant impact. I mean, after all, have you ever tried writing in a straight line on an unlined sheet of paper? It’s hard, amirite? However, when you delve deeper into the concept, you will see how they play a key role in defining different elements of glyphs and characters.

Let’s take an in-depth look into baselines and how they affect your modern design.

How Everything Relates to the Baseline

So, we kept it pretty simple in the definition, but there’s a bit more to the story. See, baselines aren’t just a seat for your words to chill on. They’re also the benchmark measurement for the constituent parts of letters.

baseline colored lines
source

And that makes sense because when you think of the word baseline, your mind likely prepares to see a comparison.

Take a look at these three Dictionary.com definitions:

  • a basic standard or level; guideline:
  • a specific value or values that can serve as a comparison or control.
  • Typography. the imaginary line on which the bottoms of primary letters align.

It makes sense, then, that everything relates to the baseline.

But what exactly is the everything we’re talking about?

Let’s explore some phrases you will need to know -- and, ultimately, how they relate to baselines. Getting a grip on these terms is a vital step in becoming a master of design.

1. Descender

The descenders are downwards strokes on letters that dip below the baseline. Normally, you see these on lowercase letters g, p, q, and y.

However, you may also see it in the letter f, depending on the typeface you are using:

cursive fs
source

Descenders help us recognize letters. A clean baseline is an important part of making text legible.

2. Lining Figures

Numerals with a uniform height and width. That’s a lining figure. In other words, they’re numbers that sit on the baseline and finish at the same height. This is in contrast to the old-style, in which numerals vary their height and width:

lining figures
source

Designers tend to prefer old style when it comes to laying out text because it fits in better with the ups-and-downs of lettering. If you take a look at old-style numerals, you’ll see many of the numbers dip below the baseline.

3. Capital and Lowercase Letters

Ok, we don’t think you don’t understand the concept of capital and lowercase letters. However, if you study letters closely, you’ll see there are subtle variations between different characters.

For example, most lowercase letters sit perfectly on the line. However, c and o tend to extend slightly below. This has been done to create the illusion that they actually do sit on the line.

Similarly, most capital letters rest on the baseline, but you’ll likely see those with curved bottoms (such as J and Q) dip below.

4. Glyphs

The simplest definition of glyph I found, as it relates to typography, came from a Stack Exchange user in a thread titled, “What is the Difference Between a Glyph and a Font?” The answer read:

diff btwn glyph and font

Pretty simple, huh? We can use these design variations to convey a lot about our message, culture, or even intent.

However, we’ve got to keep it to the specific context of baselines. Basically, a section of a glyph could fall below the baseline in one typeface and not the other. It’s kinda interesting, but not groundbreaking information.

Let’s dive a bit deeper into why baselines matter in your designs.

The Relevance of Baselines in Software Design

Baselines are a dream for a modern designer because the technology does so much of the work for you! In this section, we’re going to look at three specific tricks you can use to enhance your design using this newfound knowledge of baselines.

A. Baseline Grids Create Consistency

Baseline grids are parallel, horizontal lines on your page. You’ll use them to keep everything is in a row. Plus, they’re useful when it comes to placing negative space in your design.

Web designers, specifically, can use this grid pattern to create visual consistency.

frames in figma
source

It’s a simple, quick way to check whether the elements of your design are aligned.

2. Use a 4px Baseline Grid

If you’re looking for an easy way to scale your font sizes (while keeping the negative space between lines consistent), use a 4px baseline grid. The trick is simple. Just take your font size, then add 4px.

60px font + 4px = 64px line-height

32px font + 4px = 36px line-height

It’s an incredibly simple way to keep consistency in your work.

3. Create a Visual Hierarchy

When you’re designing a web page, consider the visual hierarchy. Don’t worry, it’s simpler than it sounds. The rules are simple:

  1. Make sure the headings take precedence over the sub-headings
  2. And they, in turn, stand out measurably from the body text.

This visual hierarchy is about learning the art of sizing and whitespace. Your baseline grids will increase the white space around your text and place greater focus on your most important elements. But only if you create a proper visual hierarchy.

We enjoyed exploring this topic with you. Want to keep going? Pick one of these related terms to read next:

A. Ascender [uh-sen-der], noun:

Descenders go down and ascenders go up. We’re talking about the same concept from a different perspective… Read the full definition »

B. X-height [eks-hahyt], noun:

The x-height refers to the height of the lowercase x in a specific font, often referring to the distance between the baseline and the mean. But that’s not all you need to know… Read the full definition »

C. Negative Space [neg-uh-tiv speys], noun:

We all need a bit of space sometimes. And it’s not as negative as you’d think… Read the full definition »