1036 posts
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+9 more
Pixelworkshop says

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 ?

1173 posts
  • Has been part of the Envato Community for over 5 years
  • Located in Australia
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+3 more
Motionreactor says

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.

1872 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says

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/

1036 posts
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+9 more
Pixelworkshop says

Wow thanks a lot !

1036 posts
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+9 more
Pixelworkshop says
1173 posts
  • Has been part of the Envato Community for over 5 years
  • Located in Australia
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+3 more
Motionreactor says

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. :)

1036 posts
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+9 more
Pixelworkshop says

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.

1872 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says

@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.

1872 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says

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… :) )

1734 posts
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VisualSharing says

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

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

by
by
by
by
by
by