*Tris, our Creative Head explains the design craft of baseline grids.*
**Grid systems are a fundamental part of any designers repertoire. It’s not something you learn in a few days, it’s something that has to be mastered over a number of years/projects. There are many types of grid systems, but there is one I’m obsessed with; the baseline grid.**
Now, if you’re reading this, you’re probably a designer wanting to know a bit more about the subject of baseline grids and work out which rules you should be following. Well, I don’t particularity like rules. Rules are too restrictive and don’t allow you to develop, grow and nourish your design skills, where as guidelines are a helpful way of putting you on the right path allowing you to interpret them in a way that works for you.
**Take this on-board**—grids are a personal thing, there isn’t one correct way of doing it. Every article you will ever read on baseline grids are to be treated as a guide. It will save you hours of frustration and probably ensure you keep your luscious locks for a bit longer. Find what works for you and develop that. This blog is my interpretation of the baseline and how I use it to help me create beautiful layouts.
What is a baseline grid?
A baseline grid is the foundation for any copy heavy document, in fact, it’s the foundation of nearly everything I do when working with layout. It’s the horizontal structure that can enhance your layout or completely destroy it. It’s the line where the baseline (the bottom of your x-height) of your copy ‘sits’ and where your descenders, well, descend below.
A baseline grid is created using the typeface’s x-height and your desired leading—usually taken from your body copy (the most prevalent style in your project). If you don’t know much about the subject, here are some good references to do some further reading:
(link: http://elliotjaystocks.com/blog/the-relevance-of-the-baseline-grid text: Elliot Jay Stocks)
(link: http://teehanlax.com/blog/designing-faster-with-a-baseline-grid text: Teehan+lax)
(link: http://nickcassway.com/designblog/?p=720 text: Nick Cassway)
Me and the baseline
I’m a bit anal when it comes to grids, especially my baseline grid. I think where possible your text should sit on your baseline. Some people are happy going rogue and working without a grid, and for some this may be comfortable, but when you’re creating text heavy reports with 200 pages+ you will start to understand how clean and structured a baseline can make everything look.
Sometimes things need to move off the baseline, but it should return to it as soon as possible. There are two tools that help me immensely when designing to my baseline; baseline shift and incremental leading.
### Baseline shift
This is something that does exactly what it says on the tin; it shifts copy off the baseline. This is especially useful when creating paragraph headers and making them more connected to the paragraph it is introducing.
(image: https://www.superdream.co.uk/wp-content/uploads/2016/05/Screen-Shot-2016-05-04-at-10.16.50-1024×610.png alt: Baseline shift)
### Incremental leading
The idea of incremental leading is born out of vertical rhythm (a whole other subject). It’s basically your leading in increments— which means at some point your text will return to the baseline. So if you have a baseline set to 11pt and your leading is set to 16.5pt, your text will return to the baseline every two lines.
You need to be careful if using incremental leading in your main body of copy as odd and even lines within a header can create uneven paragraph spacing (shown below).
(image: https://www.superdream.co.uk/wp-content/uploads/2016/05/incremental-leading-646×1024.png alt: incremental leading)
Using incremental leading to create smaller bits of copy like footnotes that sit outside the main body of your copy ensures your paragraphs don’t look too loose. This can also work for titles in the same way:
(image: https://www.superdream.co.uk/wp-content/uploads/2016/05/incremental-leading-2-1024×293.png alt: incremental leading 2)
(image: https://www.superdream.co.uk/wp-content/uploads/2016/05/incremental-leading-3-1024×746.png alt: incremental leading 3)
Putting it into practice
When I create my baseline grid, I start by setting my body copy. This is because it is the most used style within any document I (and you) will produce. There will be instances where you will be forced to use a typeface bigger than you want (when producing documents for the partially sighted where a minimum text size of 14pt is recommended) but for the most part, I would suggest selecting something between 8/10pt with a leading to suit. I prefer my leading slightly looser than most so I would go for an 8pt text with 11pt leading or 13pt leading if I’m feeling particularity spacious.
Now, these are GUIDELINES. I have produced documents where I have used an 8pt text with a 16pt leading. This would usually be considered too ‘loose’, but for the style of the literature, it was perfect.
When you have decided what size you want your body copy to be, this is where the fun starts. I like to give myself as much versatility with my typography right at the beginning of a project so I tend to work with around six ‘H’ tags—plus my body copy. (I like to use the web way of showing text hierarchy—I think it makes sense. See—my way of doing things).
Below is an example of how my typographic hierarchy might look at the beginning of a project. This is based around one font, but you might have two or even three fonts in your project. I wouldn’t recommend using more than three as your document will start to look a bit confused.
(image: https://www.superdream.co.uk/wp-content/uploads/2016/05/Screen-Shot-2016-05-12-at-17.33.11-572×1024.png alt: Typography hierarchy)
Notice for my ‘**H5 (Paragraph Header)**’ tag I have shifted it off the baseline. This creates ownership of the paragraph it is introducing and is achieved by using baseline shift.
Here is a list of the text sizes I have used in my example so you can get an understanding of how the different sizes work with an 11pt grid. All of these sizes are fixed to the baseline grid. Some people don’t like to lock their text to the baseline but you will forever be nudging your text up and down to ensure it aligns—your decision though.
The font I have used in my example is **Helvetica Neue LT Std**:
**H1 (Section Titles):**
Text size: 36pt BOLD
Leading: 44pt
Space Before: 11pt
Space After: 11pt
**H2 (Page Headers):**
Text size: 24pt MEDIUM
Leading: 33pt
Space Before: 11pt
Space After: 11pt
**H3 (Page Header Subheader):**
Text size: 18pt ROMAN
Leading: 22pt
Space Before: 11pt
Space After: 11pt
**H4 (Intro Paragraph):**
Text size: 9pt MEDIUM
Leading: 11pt
Space Before: 11pt
Space After: 11pt
**H5 (Paragraph Headers):**
Text size: 9pt BOLD
Leading: 11pt
Space Before: 0pt
Space After: 11pt
-5.5 Baseline Shift
**H6 (BOLD):**
Text size: 9pt BOLD
Leading: 11pt
Space Before: 0pt
Space After: 11pt
**BODY:**
Text size: 8pt LIGHT
Leading: 11pt
Space Before: 0pt
Space After: 11pt
For the example above the screen-shot below is what my paragraph and character styles might look like:
(image: https://www.superdream.co.uk/wp-content/uploads/2016/05/Screen-Shot-2016-05-12-at-16.34.20-523×1024.png alt: paragraph and styles)
As a project progresses more gets added to these styles but these form a good base.
The typographic scale
For the more vigilant of you out there, you will have noticed that my text sizes are kept within the typographic scale. If you don’t know what the typographic scale is and want to know more, have a look at these websites:
(link: http://spencermortensen.com/articles/typographic-scale text: Spencer Mortensen)
(link: http://retinart.net/typography/typographicscale text: Retinart)
There is a lot to learn about the typographic scale, but you know those default text sizes you get in any program offering a text input (6,7,8,9,10,11,12,14,18,24 etc., well, that isn’t a random set of sizes, it’s based on the typographic scale. Again, this is to be used as a guide and basically gives you the foundations to create beautiful typography if you stick to this scale. When you become a master of typography you won’t even think about this scale and you will be able to manipulate any size you want and create truly stunning creative.
A final word
Every project is different so you will need to devise a hierarchy based around that project or client. How the spacing, font sizes and leading all work together will also be affected by the font(s) you decide to use in your project.
Use your design eye. After all, this is what you have been doing for years and in some cases, decades. Try not to get too hung up on numbers and just ensure it looks right for the project, and you are comfortable working with the system you have adopted—but adopt one, and master it. Knowing a system is like having a secret weapon in your back pocket when someone slaps a 100 page document on your desk.
Now, go and read, create and develop a system that works for you! Good luck!