Grid system building methodology for web

Question

For a long time now, I have been using premade grid systems, like foundation grid for instance, which consists a grid of 12 70px columns, and 30 px gutters. But as my design passion seeks the best possible harmony and proportions, I'd like to build my grid more adequate to the specific project needs.

What base unit should i start my calculations with?

Should i use base line height, main typeface x-height, or maybe some other significant value? I've read more meaningful typography article on A List Apart by Tim Brown, but he suggests basing it on font size, but as Erik Spiekermann pointed out, real font size depends on it's family.

For myself, x-height makes sense, as it's affects the visual space and weight of layout a lot. But on the other side, line height sets the vertical rhythm.

When I've got the unit, how to decide on column and gutter width?

Giving that i can choose out column number constraint (depending on the content complexity, or maybe i should concider other factors as well?), I still need to decide on website max-width, gutter and column width.

Answer 1

The problem with basing it off of font sizes is that it's a mostly arbitrary unit on a web page.

By that I mean you may choose a 20pt typeface.

But what does that mean?

If it's the typeface you spec'ed, then you have some assumption as to how large the characters are, but if the user changes that on you, or they use a different font, or what have you, the actual character sizes could be something quite different.

On top of that, it's quite trivial to for the end-user to change the size of fonts on a web page, so there's no guarantee that it will even be what you specified.

But, bottom line, it doesn't really matter how you decide to build your grid. The point of a grid is that you have a grid. It brings some order and consistency to your layout. The actual measurements of the grid are entirely dependent on your desires and opinion as to what looks best for your needs.

Answer 2

If I understand this correctly, you want a grid based on your font size? I have personally never even bothered with this whole grid system, when designing sites, and I just do things by eye and go for what looks best.

I think that if I were to try and base a grid system off of my font size, the best way to go about it would be to use em values instead of absolute px values. That way, the values will reflect your change in font size.

In stead of having an object with attributes like this:

.myclass{
    width:70px;
    margin:15px;
}

You could possibly try something like:

.myclass{
    width:10em;
    margin:4em;
}

The 10 and 2 are just random numbers I threw out there and you'll obviously have to figure that out on your own.

I dunno...just a thought. As I previously stated, I don't abide by the whole grid thing.