Hi everyone,
I wanted to show you my observation and results of a small home-made project. It's about combining well-known web grid-systems and some old typography grids systems into one. I have been using grid system for a few years while I was designing magazines based on typography.
But what is Typography? One word including all font sizes, types of fonts, kerning, spacing….and much more. Let's start with describing what grid is.
This is grid:
And this is a grid:
and this one also..
So, as you can see in all of these pictures are different grids. There are a lot of types of them, and there is no matter are we talking about architecture, drawings, web design, magazines, presentations, icons or logos. When you work as a UI Designer, everyone is talking about in-grid layouts, pixel perfect, and measuring spaces.
Thanks to the grid you can be sure everything has the same margins and the boxes with text - just fits. It's also easier for your eyes to go through a web and see harmony. You know there was no coincidence while designing. But there is one thing that many of us have forgotten. I'm talking about typography rules in web design and having fun with them.
History behind.
It all started hundreds of years ago. Before anyone thought about UI design and typography terms. One of the very first examples of a grid we can find in real middle ages and books form these times. Van de Graaf canon is one of the very well know one. It's still used because of elegance and harmony in it. Just take a look on these pictures down below:
Across all the year's designers developed a lot of grids, grid systems, and rules or canons. They are few of my favorites and most known one. Names like: Villard de Honnecourt, Guttenberg and Jan Tschichold are one of the most important for typography and grid system design. There are a lot of them, and I will try to write a different article for them.
Web grids:
Let's go back to web grid systems . There are few really popular. The most important to know as a UI Designer is: Bootstrap Grid and Material Responsive Grid. They are really simple to use and really intuitive . In bootstrap, all you have to do is to make sure that boxes are 1 to 12 columns width. It's magic. There are also grids like the Crow Grid Framework which are not really popular, but really effective one.
Anatomy of grid:
Basic grids are made form columns and alleys (named gutters which are space between columns). Some designers add rows to build modules which are a place where column and row meet. Each row has horizontal flowlines. Simple right? If it's not, don't worry and take a look below.
Let the fun begin. How to set a width of the column?
So if you know the starting basics lets jump to having fun.
There are basic grid types.
There are basic grid types.
The first one is the Manuscript grid. It's also called one column grid.
Column grid is the second one and has 2 or more columns in it.
There are two more. When you add rows to "Column Grid" it gives you Modular grid.
The last one is with baselines for text called Baseline.
In 1981, Swiss typography, teacher and designer Josef Müller-Brockman published a book named Grid systems in graphic design. It's one of the most important books about typography I have ever read. I the beginning of it Josef tells us that when we are looking at our books( or in our case mobile or computer screen), we are usually looking at the layout at the distance of 30–35 cm.
Next typography rule is about your eyes. It says that you can easily read only seven words per line. More than seven words in a line Putting more than seven in one line is harder for a reader. He needs to stay focused on reading a text, but it's more affordable for him to do this, so we shouldn't have more than 12 words in a line). Of course on many advertising posters for banks or products and terms of use this rule is ignored on purpose. \
I started to think what should be the right width of a column on my web to make it easy to read but also to make user focused on it. I decided that I want to have seven to ten words in a line. That means we can easily calculate the width of a column . We just have to know, what size of a type and space between words and letters we want to use. Oh… and how long words should be.
According to his book, i started to calculating the width of a column for the web. I started with basic 1280px of total web width, and Proxima Nova as a primary font in two sizes. 12 points for lead text and 42 points for big headlines. What is important I'm using Points not Pixels to calculate it! It has to difference in standard displays, but it might be necessary for proper displaying content on a retina screen.
Calculations
Here is some calculations how to change cm to points and px.
1 Cicero = 12points
1 cm = 10 mm
26 Cicero and 8 points = 12cm
30 cm = 786 typography points
12 points = 16px
1280px = 960 points
1 Cicero = 12points
1 cm = 10 mm
26 Cicero and 8 points = 12cm
30 cm = 786 typography points
12 points = 16px
1280px = 960 points
I wanted to make 4 columns grid for basic layout . Each column with 2 inside-margins (so it let me stretch the text-field or pictures-field). 12 points text with Proxima Nova is basically fitting 240px column. I'm using automatic measuring space between words. That gives me:
4x240=960px
1280–960=320px
320/(4*2)=40px
4x240=960px
1280–960=320px
320/(4*2)=40px
Next step I made was to add horizontal lines. They will give us rows and modules to place the text and photos, all in the same hight. I wanted to have maximum 16 rows of text in one box to make it easy to edit and read. My inter-high for better reading was set to 18.13 points. So in the end, I had 290 pixels high of a box with 2x40 pixel outside margins. And that's almost the end.
Now you have all the grid, and you can scale it however you want it. Down below there is a short example of how you can use it.
