Harmonious Typography and Grids
What size should your fonts be? Do you need to use a grid? And what about vertical rhythm?
I’m going to outline a process for answering all of those questions, speeding up the time it takes to arrive at consistent typography that matches your grid system, and minimizes thrashing.
A harmonious grid and typographic system is one which is internally consistent. Systems like this help you ensure that all layouts and components will fit together — like the way any one Lego brick is compatible with any other Lego brick.
Why it’s important
When designing a new product or UI from scratch, there are a lot of interdependent decisions you have to make. Every design decision affects every previous design decision, and some are more disruptive than others.
An analogy: imagine you’re building a house, and you interrupt the painting process to move some walls around. What would’ve been a relatively easy thing to do during the initial planning phase becomes prohibitively expensive. Following a sequence will help you eliminate this type of thrashing.
Disclaimer:
This post is written for people relatively new to visual design, who might be mystified about how to implement vertical rhythm and what type of grid system to use. This is just one sequence that I have found that works for me, and I’ve honed this process over years of practice as a visual, UX, and product designer, and in the past 2 years teaching design at Tradecraft in collaboration with my colleague Jake Fleming. This is by no means the only way of establishing an internally consistent typographic and grid system, and if you have tips to improve the process please leave them in the comments below. Screenshots are from Sketch app, but the principles are general enough that you can follow along in any design app.
The sequence
Here is a cheatsheet, which outlines the entire 9-step sequence to give you a good typographic + grid-based foundation. I’ll go into more depth for each of the steps below.
1. Define Your Goals
While it might seem obvious, it’s crucial to begin by establishing your goals and design principles. Design principles are abstract concepts that describe the look and feel of the final product. Because it’s difficult to talk about design, a handful of adjectives can be helpful to envision what the brand could look like.
For instance, typography that is “clean and modern” should look significantly different than typography that is “young and fresh” or “stable and trustworthy.” A good rule of thumb is to narrow your principles down to 3–5 adjectives, or adjective statements. Adjective statements help define brand boundaries, e.g. “minimalist, but not modern.”
Armed with your list of design principles, you can gather design and typographic inspiration that you believe exemplify your design principles. Seeing actual design work can help build a shared vision on your design team, or in your own head if you’re designing solo. Search sites like pinterest, dribbble, and behance with your brand adjectives to find suitable inspiration.
When looking for inspiration, bear in mind that you’re not looking for design work to copy. Aside from being ethically uncouth, it’s also bad for your brand to be derivative. Inspiration is meant to inspire you to create something unique and better than what you’ve found.
To demonstrate the harmonious typographic process, I’m going to use the text of Alice in Wonderland, and the visual inspiration I pick will follow that theme.
2. Content hierarchy
Once you’ve defined your goals, the next step is to understand the content you’re designing for (or write, if that’s your job too). Primarily, this step is reserved for understanding the priority and hierarchy of the content, and for making that content as readable as possible. Readability extends beyond legibility, and speaks to whether or not a piece of content is desirable to look at and read.
You can think of designing for content the way architects think about designing for people. In theory, a building should be designed around its inhabitants—and all of their daily habits and activities. You have to understand those inhabitants and their activities in order to create a good solution for them.
Avoid Lorem Ipsum, if you can help it
In the same way, you have to actually read the content to understand how it should be laid out and prioritized. Avoid designing around lorem ipsum and filler text, which is like trying to architect a dwelling for mannequins.
If you have to design and don’t know what the real content is yet, then at least use text in the right language that is adjacent to the brand you’re designing for. The example text I’ve picked, Alice in Wonderland, is a sufficient choice for a brand for kids, but would likely lead me astray if I was setting type for a law office.
Lay out all content types
During this stage, go through the copy and make sure you have at least one instance of every unique type of content. Create it if it’s not represented in the copy you have. Also, add subtitles, pull quotes, and other things that enhance readability.
While not totally comprehensive, this list will cover the majority of use cases:
- Title (H1)
- Subtitles (H2 — H6, though in practice H2 and H3 are probably all you need to worry about)
- Main paragraph copy
- Blockquotes and pull quotes
- Lists (ordered and unordered)
- Links (default state, hover state, active / pressed state)
- Form input labels
- Captions, small text, and muted text
Once you’ve laid out all the content you’ll need to design for, it’s time to pick your typefaces.
3. Pick typefaces
There is an art to picking typefaces that takes a long time to master. These are simple instructions to get you started. If you know a lot about typography already, this oversimplification will probably annoy you, so skip to step 4.
When picking typography, there are a few initial questions to answer:
What is your budget?
With typography like with most things in the world, you get what you pay for. There are some exceptions to this rule, but start by thinking about how much you’re able to spend. If you have a budget, then start by looking at professional type foundries like House Industries and Hoefler & Co., or catalogues of professional type like Typekit (a good option if you already pay for Adobe CC) and MyFonts.
If you don’t have a budget — don’t worry! You can find many great typefaces on Google fonts, both for download and use on the web. Avoid using giant free font repositories, unless you find a particular typeface designed by a professional type designer. Amateur typefaces might look interesting on the surface, but are missing many features and finesse of a professional face.
Where will this be used?
Are you setting type for the web, a native app, or for print, or all of the above? Make sure that any typeface(s) you’re looking at have a license that works for your intended output medium. It can be frustrating to pick a typeface, only to find out that you can only use that face on the web, but not your computer, or vice versa.
Choose a style for your headings
Remember those design principles you established in step 1? They come in really handy for this stage. Looking at both your principles and design inspiration, look for patterns that you can adopt.
For instance, in your inspiration library, do you notice that headings frequently use dramatic serifs? Maybe they all use bold, condensed sans-serif? Develop a feel for how certain types of brands use typography to communicate their values. If the words “condensed” and “serif” don’t mean anything to you, read a quick primer on the anatomy of type.
Use these patterns to guide you, but not restrict you. It’s not always the right decision to follow what similar brands do — sometimes it makes more sense to do the exact opposite in order to stand out. The important part is that you make an intentional decision.
Go through your chosen type catalogue, and write down typefaces that jump out at you. Keep your brand adjectives in mind, and remember that typography for headings can be a little more stylized than you might want for body copy.
Narrow your list down to 3–5 choices, and set your title in each of those faces before moving to the next step. You’re going to save these, and pair them with the body typefaces you’ll choose in the next step.
Pick a pairing for your body copy
Once you’ve picked 3–5 typefaces for your headings, it’s time to pick a good typeface to pair with for your body copy.
While typography for headings should be interesting, typography for body copy should be legible and readable (i.e. fairly boring).
Contrast should guide your decision making here. If you’ve picked a dramatic serif for your heading, try a geometric sans-serif for your body. If you picked a thin, modern sans-serif, try pairing it with a classic serif. The site fontpair.co can help you make a decision with enough contrast. You can also use a single typeface for your headings and body copy, and achieve contrast by varying your font weights, such as bold for headings and regular for body copy.
I also like to google “font pairing” + the name of my chosen service (e.g. “font pairing google fonts”). There are many great inspiration sites out there that show you what a few type pairings look like. These are a couple favorites.
I like to narrow down body typefaces to no more than 2-3 total choices (not 2–3 per heading typeface).
Test it out with an artboard matrix
Once you have 3–5 choices for both your heading, and 2–3 choices for your body copy, it’s time to test them out. Create an artboard matrix that will show you what each possible combination looks like when paired. Until you have lots and lots of practice, it’s next to impossible to make good decisions about typefaces without seeing them set with actual text. This artboard matrix will show you how the character of each typeface meshes together.
Decide
Remember: picking typography is hard. You won’t always be confident you’re making the right decision, and that’s okay. Make the best decision you have available to you at the time, and circle back around later.
Look at your brand principles, and start eliminating options until you’ve narrowed it down to a single option. Ask yourself if what you’re looking at is closer or farther away from your brand principles than its neighbors. Relative decisions (meaning, comparing one thing to its neighbor) will always be easier than trying to figure out if a piece of typography represents your brand adjectives on its own.
This process may lead to further inspiration, which you should pursue. You may also find that nothing feels quite right. Don’t get discouraged — this is still progress. In both cases, back up a step and try to find better choices for both your heading and body typefaces, matrix them out, and see if you’ve gotten closer.
For our Alice in Wonderland example, I ended up picking a slight variation:
4. Base font size and line height (ratio)
This is where the process starts to get easier. Your base font size and base line height are 2 numbers that you can use to base all other sizing and spacing measurements on. Not only will this make your job easier and eliminate a lot of decisions later in the process, being strict about these numbers also helps ensure your final design will have good rhythm.
Rhythm in design, like in music, lends a sense of order (or disorder) to a composition. Rhythm can be achieved in either the horizontal or vertical axes, and when both directions are consistent with each other, you’ll create layouts that feel extremely well-ordered. This is the secret sauce to developing a harmonious typographic and grid system.
Picking a base font size
It’s a good idea to start with the defaults for the device you’re designing for, and adjust from there. If you’re designing for the web, the default is 16px. iOS is 17pt, and Android 13sp.
Technical diversion: While all the units of measurement appear different — and they are different in subtle ways—the differences aren’t hugely important at this stage. Sketch measures fonts in point sizes (pt), and that will translate to the units used for the web and android. When you need help falling asleep sometime, google the differences between points, pixels and reference pixels on the web, and sp/dp on android.
Once you know the default size, adjust that up or down according to your needs. It’s a good idea to use an extension like font face ninja to learn what sizes other sites use. The NY Times for instance, uses 13px body copy, whereas Medium uses 21px. Those measurements serve very well as lower and upper boundaries.
Think about the amount of content the interface will need to contain, the readers of the content, and the context it’ll likely be viewed in. For instance, if I’m designing a blog for readers over 50 (our eyesight blurs and dims over time), and my assumption is they’ll be reading during moments of boredom on their mobile devices, I would pick a larger body font size—possibly closer to Medium’s 21px.
Conversely, if I was designing an interface for professional social media coordinators, who will likely be using the product at work on larger devices, then I can make the default font size smaller.
Ultimately this is no substitute for good user research that helps you more deeply understand your users, but those 3 factors will help ensure you’re making a decent decision. When in doubt, it’s safer to err on the side of making your type too large than too small. At least, that’s the current trend.
At this stage, you only need to worry about the base size for your main body copy — we’ll worry about sizes for the rest of your typography in step 5.
Before you land on a final size, create a few options on artboards the size of your mobile device and test them out. You can use Sketch Mirror for this, or export those test artboards as PNGs and view them on your device.
Picking a base line height
Once you’ve landed on your base font size, the next step is to think about your line height. It’s easiest to think of your line height as a proportion of your base font size.
Rule of thumb: pick a line height that is somewhere between 120% — 150% of your body font size. It’s okay to break this rule if you have a good reason to.
The looser the leading (corresponding to larger ratios closer to 1.5), the more whitespace you’ll have between lines. That can make it easier for the eye to find the next line of text. Stylistically, larger line height ratios also feel more luxurious, stable, and peaceful.
Tighter leading (corresponding to ratios closer to 1.2 and sometimes even less) will smoosh lines of text closer together. The density this creates may be a good thing, depending on the design principles you established early on. Tight leading has the ability to increase reading speed, but you must be cautious that your line lengths aren’t too long or it will negatively impact reading speed. We’ll discuss line length in step 6.
If you need help deciding, tools like type scale give you an easy way to visualize what different font size / line height combinations look like. The ratios correspond to musical chords, which is an arbitrary but interesting way to decide on a ratio.
Whatever ratio you pick, you’ll use those same numbers in subsequent steps to determine your type scale and layout grid in order to achieve horizontal and vertical rhythm. But don’t worry about setting your line heights for headings yet — stay focused on your body copy for now and we’ll worry about those in the next step.
Use whole numbers
One final note on picking your line height. It’s a good idea to stick with whole, even numbers. You will eventually use your line height to determine your spacing, and the easier it is to divide by, the cleaner your layout will be. This will make more sense once you start laying things out.
Here are a few font size / line height combos that I frequently use.
- 16 / 24 (ratio: 1.5, or a perfect fifth chord)
- 18 / 26 (ratio: 1.44, or close to an augmented fourth chord)
- 20 / 30 (ratio: 1.5)
For our example, I’ve decided to go with a default body copy size of 18px, which is large but not too large, and a leading ratio of 1.333 (or, equivalent to a perfect fourth). This yields a line height of 23.994, which I’m going to round up to an even 24px. It’s a good idea at this point to make modify the original artboard to show the typefaces, sizes, and leading you’ve chosen. Don’t worry about spacing just yet.
5. Typographic scale
A typographic scale will help us make good decisions about how much bigger headings, subheadings, and titles should be.
A typographic scale is nothing but a series of font sizes that share the same internal logic, similar to a musical scale. The classic scale progresses from 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, etc. We’re going to create our own typographic scale based on the ratio we picked in step 4.
The site type scale will come in handy for this step. Enter your base font size, select the ratio you used, and type scale will show you what that progression of sizes looks like. Type scale shows the sizes in ems, and the easiest way to think about an em if you’re new to them, is that 1em is equal to your base font size. So, if my base size is 18px, then 2em = 36px (18 * 2). To translate that to Sketch, just take the em value listed on type scale, and multiply that by your base font size.
Pro tip: Sketch also lets you do math directly in the app, a feature you should take advantage of. Let’s say your base size and line height are 16px / 24px (ratio: 1.5). To get the next step up in your type scale, you can type “16*1.5”. To go 2 steps up, type “16*1.5*1.5”. And so on…
Map your type scale to your content hierarchy
Once you’ve determined the “steps” in your type scale, it’s time to map those steps to your content hierarchy you established in step 2. Your paragraph text should be equal to your base font size, or 1em. Your H2 / subtitles should be a step above that, and your H1 / title should be a step above that. On the other hand, your captions and small text should be a step below your default font size.
Especially when dealing with larger ratios or when you need more than 2 levels of subtitles, you may need half steps to keep your sizes reasonable. Half-steps can achieved by splitting the distance between 1.0 and your ratio. If your base size is 16px, and your ratio is 1.5, one full step would be 24px. One half step (with a ratio of 1.25) would be 20px.
6. Horizontal spacing (typographic measure)
Once you’ve set the correct sizes for all the elements you’re designing for, the next step is make sure your line length (or measure) is the right size. A proper line length will enhance readability and reduce tracking errors.
Rule of thumb: Maintain a line length of 65–85 characters for your body copy, or about 2 1/2 alphabets long. The easiest way to do this is to search google for a free character counting tool.
In sketch, reduce the width of your text box until it fits the right number of characters. Don’t worry about making it too exact, since we’ll fit it to the grid in step 8.
You only need to worry about the proper measure for your body copy. Your larger titles and subtitles won’t fit the same number of characters in a single line, and that’s fine.
7. Vertical spacing (vertical rhythm)
Next, you need to make sure your line heights are all internally consistent. The first step is to make sure the line heights for all of your body copy paragraphs are set to your base line height.
For subsequent levels in your content hierarchy, your line height should be either a whole or half multiple of your base line height. By keeping your line heights based on the same number, you will ensure that multiple columns of text will always align with each other. This lends a sense of order and structure to the design.
When you’ve set your line height on every single text block, you will find that the bounding box of each text block aligns to the layout grid rows. This makes alignment much easier, since Sketch will snap your text to the grid. However, if you don’t define a line height, Sketch will define one for you (it will read as “auto” and probably won’t be what you want).
Here’s example. If your font size is 20px and your ratio is 1.5—giving you a base line height of 30px—then here’s what your typographic hierarchy might look like:
Base font size: 20px
Base line height: 30px (ratio = 1.5)
- Small text — font size: 15px, line height: 15px
- Body text — font size: 20px, line height: 30px
- H3 text — font size: 30px, line height: 45px
- H2 text — font size: 45px, line height: 60px
- H1 text — font size: 60px, line height: 75px
For the Alice in Wonderland example, we’re going to use multiples of 12 to determine our line heights, since our base line height is 24 (24 / 2 = 12). I’ve made sure my headings wrap to more than one line so I can clearly see the effect that my line height has on the text.
8. Horizontal grid system
If you start using your fancy new typographic system without a grid, you’ll quickly end up with a mess on your hands. The true power of this sequence of steps is when you create your layout grids using the same numbers that you used to establish your typographic system. When they work together in concert, your layouts will look cleaner and more organized with far less effort.
The first step is define your horizontal grid, called a layout grid in Sketch. Grid-based design is a huge topic I’m only going to briefly touch on, so if you want to learn more google “grid-based design.”
Sketch’s default layout grid for desktop is usually pretty close to perfect. For those of you with web development experience, it is based on the grid system used in bootstrap, which was based on the classic 960 grid system.
There are 2 primary considerations when thinking about the horizontal layout grid. Open the layout settings from the View > Canvas menu to follow along.
- Total layout width—Your total width depends on your goals. For the sake of simplicity, I’m going to assume a fluid-width design (or 100% as wide as the artboard). Make sure “Gutter on outside” is unchecked, and make the total layout width slightly less than the artboard width. I typically subtract my base line height, or 2x my base line height, from the total layout width then recenter the layout.
- Gutter width — Your gutter width should be the same number as your base line height for tablet and desktop artboards, or half of your line-height for mobile artboards. This will make it easier to achieve equal spacing between elements, both horizontally and vertically.
Here’s what my layout settings look like for the desktop artboard. I typically opt for fixed-width grids on screen sizes larger than 1024px wide, as its easier to control the horizontal measure.
Mobile layout grid
For the Mobile artboard, there is a slight variation. Since we’re dealing with smaller screens, your grid should be the full width of your artboard. However, you should select “Gutter on the outside” to give you a half-gutter margin on either side of your layout grid.
Don’t start laying out your content JUST yet. We need to first establish our vertical grid.
9. Vertical grid system
You’re almost done! The final step is to establish grid rows to help you measure the vertical space between elements.
Open your layout settings again, and check “Rows” on. Your gutter height should be half of your gutter width, and “Row height” should be set to 1. The settings should be the same for both desktop and mobile artboards.
Layout
Now that your grid system is done, the final step is to lay out your elements and typography. For your horizontal layout, make sure to begin and end elements on columns rather than gutters.
For various technical reasons that are too complex for the scope of this post, know that your design won’t always translate as neatly into code. Don’t stress about this; use the grid to make decisions easier and faster, but don’t let it restrict you creatively if you have a good reason to break the grid.
Law of Proximity
The primary consideration when deciding how to space elements is a concept from Gestalt Psychology called the law of proximity. This law states that objects which are near each other will be perceived as a single group. You can use this trick of perception to your advantage by moving some elements closer or farther apart to imply relationships.
For instance, in the example below, I’ve used 2 “blocks” to separate most elements. However, I’ve doubled that between elements that should be set apart; for instance, above my H2 headings, and above and below the blockquote. I also am only using a single block between the blockquote and caption text, since the text is small and I want to make it very clear the quote and caption are related to each other.
Use the bounding box of the text to align, rather than the baseline of the text. If you’re in illustrator rather than sketch, it may be easier to align your type baseline to the grid, but in sketch it’s far easier to use bounding boxes for alignment. Your method doesn’t matter too much as long as you’re consistent.
Wrapping up
The final version is below, with all guides hidden.
While it may seem like a lot of work for a small amount of text, remember that you now have a foundation to build upon. You can use your base font size and line height to craft a UI. Here’s a simple wireframe I put together using all of the same spacing and measurements. While overly simplistic, I didn’t have to think too hard about the layout.
Can you make this better?
Do you have any additional tips that might make this process better or faster? Bear in mind this is an oversimplification and isn’t meant to work in every situation. But if you have thoughts about how to adjust this process to make it smoother, please let me know.
Want more?
If you want more like this, I’m collaborating with Learn Python the Hard Way author Zed Shaw to develop a full course in visual design. Sign up to get notified about its release here: Learn Design the Hard Way
