Grids and typography

Hello there, I wanted to share some ideas about grids and typography, and maybe learn something

Since I began design, I tried several grids like the 960gs or Blueprint. Now I’m trying a vertical grid and I find it very useful but I’d like to ask how you use them. I mean, if you have a 12px font, do you set guidelines every 18px ? And try to keep the same proportion for all headings, titles, subtitles (12, 18, 24px) ?

Second thing : typo. I read some really interesting articles like Compose a vertical rythm or Five simple steps to better typography, do you know other ressources to learn more ?

http://www.alistapart.com/articles/howtosizetextincss/

http://www.alistapart.com/articles/settingtypeontheweb/

Are both relevant, and I’ve found them useful recently. I believe the baseline grid article at ALA references your vertical rhythm article.

as motionreactor suggested:

http://www.alistapart.com/articles/settingtypeontheweb

Best article ever, go for it and mix it with 960.gs for instance. This way you will get both vertical and horizontal grid.

Here is also a thread that could interest you:

http://themeforest.net/forums/thread/do-you-use-the-golden-ratio-when-designing-a-website/23623

Here are some cool highly recommended books:

http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestaltung/dp/3721201450/

http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881792063/

Wow thanks a lot !

I found http://goldenratiocalculator.com/

Keep in mind that, in relation to the golden ratio:

It is only a principle, not a rule. Empirical testing as well as thousands of years of art, architecture etc… does indeed suggest that humans have an aesthetic preference for the ratio. The risk of approaching design with the golden ratio as some kind of magic solution should be avoided though. It is useful, and relevant, but contrary to the meaning of ‘golden’ it isn’t the highest principle and shouldn’t mean ignoring broader design considerations.

You probably already know this, but some beginners can be led astray by what appears to be ‘trade secret’. So yeh, just felt like pointing that out.

Yes I understand, if there was a magical rule for perfect design, everybody would use it… But it’s good to have some strong principles to start with.

Some time ago, I founs an interesting article about mixing fonts (some match, some other don’t) but I cannot find it I just remember that there shouldn’t be more than 2-3 different fonts but this is also a principle, not a rule.

@keliah

See section C of this: http://webfontspecimen.com/ That C section is a nice tool for comparing fonts in web browser. quote: “Useful for deciding whether type is suitable for use online and helpful for finding a comparable understudy.” download it and play.

This is a perfect example of well executed horizontal grid (18px line-height in this case)

http://sushiandrobots.com/

(but I still think fonts in footer are a bit unreadable and small if I take under consideration the amount of free space there… )

Hi there, Keliah, here are some of my precious bookmarks related to typography:

• The Encyclopedia of Typographic Contrast
• The Elements of Typographic Style Applied to the Web
• On Web Typography

This also might be good for you to test different fonts: Typetester .
And this is one of my favourites: Typechart .