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

1881 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/

1043 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 !

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

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

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

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

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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by