: Grid system building methodology for web 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

@Shelley591

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.

Vote Up Vote Down

@Martha945

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.

Vote Up Vote Down