1. Grids From Typography

    Since we started 1910, we’ve developed somewhat of a standardized method around how we work with grids and typography for digital applications. Following is a brief summary of our process that is under constant development as we go along.


    1. Text Size

    The base premise is to let the content shape the grid rather than the other way around, so we usually start by deciding on a text size for the body copy. We approach this not as a visual or stylistic decision, but rather one based on functional requirements such as reading distance (between user and device) and type of application (webpage, desktop UI, console UI, etc.).

    The idea is that since text is meant to be read, our task is to make the process of reading it as comfortable as possible. This means that whoever reading should be able to do so without straining their eyes or having to move closer to (or further from) the screen. Just as if they were comfortably reading a book from their favorite armchair.

    To achieve this we need to make sure that the perceived text size (taking the viewing distance into account) rather than the metric text size makes sense. The further away from the screen, the bigger the text needs to be. Currently we find between 16 and 22 px to be reasonable for desktop webpages, 12 to 16 px for complex desktop UI’s, and 22 to 28 px for console UI’s.

    If in doubt, just grab a camera and take a picture of the text from the desired viewing distance and compare this to a picture of a page from a regular textbook taken from 30 to 40 cm away. Alternatively hold the book somewhere between yourself and the screen while keeping one of your eyes closed. If the digital text is smaller than the printed one you’ll want to go bigger.

    image


    2. Measure

    The second thing to do is deciding on a preliminary measure for the body. We’ll come back to set the exact value later (matching it to our columns), but before we can calculate the columns we’ll need to know roughly what kind of measure is desired. At least to the point of knowing if the text will span over one or more columns, or (in the case of certain user interfaces) if it won’t be running long at all, but rather consist of single words, buttons or labels.

    For reference, optimal measure for running text is usually considered to be between 55 to 75 characters for one column, or between 40 to 50 characters for multiple columns.

    image


    3. Leading

    When the text size and measure of the body is set we’ll go on to establish an appropriate leading and baseline height for the grid. Assuming we’re dealing with text longer than just a few words we’ll want the leading and baseline height to be somewhere between 1,25 to 1,5 times the size of the body copy.

    The basic rule is that longer measures need higher leading. At an ideal measure of 65 characters we like the leading to be around 1,5 but parameters such as the x-height of the typeface will also affect how the leading is perceived. When working digitally it might also be a good idea to go for even pixels that are more easily divided.

    image


    4. Base Units

    Following the baseline height we’ll reuse the same value to divide the grid into equal squares vertically. These base units will be hidden as soon as the grid is done and are merely helping us make sure that the columns and gutters are even multiples of the baseline height, and not some random value that would complicate things later.

    Doing this, building the horizontal rhythm from the same value as the vertical rhythm, has many advantages. Gutters will be the same in both directions, and square or circular content sized to the width of a full column will automatically end up on the baselines as well, rather than between them which would offset the rhythm from the grid.

    image


    5. Columns & Gutters

    The final step is to set the columns and gutters. Providing we know how many we’ll need (we usually aim for as few as possible without compromising the layout) we then use the base units as a guide to size them properly. Gutters are usually 1 or 2 base units wide and columns are sized to match our preliminary measure as close as possible.

    image


    Summary

    This method of building grids from typography, and typography from viewing distance, is how most of our projects are structured. The same basic principles, letting the content shape the grid rather that the other way around, is equally applicable even when text isn’t the primary content type. In the end, it’s all about the content, and about removing barriers to maximize impact.