Posted by & filed under PatternFly, PatternFly Design.


One of the biggest challenges with web design is understanding typography. Font choice, weight, size, and spacing are all important things to consider when you are setting up type for your website or application.

If you aren’t familiar with the term vertical rhythm, simply put, it’s what keeps vertical spaces, between elements on a page, consistent with each other.

Having a hard time with type?

If you look at this article and you get warm fuzzy feelings from the type, but don’t understand why, vertical rhythm might be for you.

I am a core contributor to PatternFly, a design system for enterprise web applications. We are really excited about our next big CSS release and we’ve been working on a bunch of great new features for it.

One feature we are building out is vertical rhythm.

With PatternFly our goal is to offer a consistent design that is easy to implement. We want our users to feel confident that the overall style is well thought out and considers things they may not have an eye for.

Let’s talk about our PatternFly type

By default PatternFly makes the font choice of Overpass for you, we also consider things like line height, weight and size for paragraphs, lists, and a bunch of other type elements.

Often users will use heading tags based on the style they want, rather than the semantic meaning of the tag. In order to avoid this, we’ve stripped all the styles from the headings and offer classes to style them instead. So you can use that <h1> at the top of your page and apply the .h3 class to get the style you want.

This results in a scenario that is not ideal because our users have to apply classes to all headings for pages that are full of content.

That’s where vertical rhythm comes in.

Using our .pf-vertical-rhythm utility class you can apply it to a wrapper and any encompassing headings will get the weight, size and margin that we’ve defined.

Let’s take a look at some examples.

Below you will see and example of an pretty standard page full of content. I’m sure some of you look at this and don’t know where to start.

Now, let’s look at the same page with a class of .pf-vertical-rhythmapplied to its wrapper:

By adjusting a few styles, we now have a page that looks much better.

Vertical rhythm is not complicated, but it can easily be overlooked if you don’t have an eye for it. We wanted to offer something to our users who would rather rely on a set of predefined rules than come up with something on their own.

By implementing vertical rhythm through out the application you ensure a consistency that your users will be grateful for, wether they know it or not.

This is still a work in progress, we’d love to hear your feedback and suggestions.

Leave a Reply

(will not be published)