34 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
ChordsofLife says

I’m simply not good with typography. Kind of bums me out. I have no problem designing everything else, but I just simply don’t know anything about how fonts work together and what not, and it doesn’t come naturally.

Can anyone point me towards a solid resource or – better yet – a book that can help me out in that area?

156 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
+3 more
SachaG says

A few interesting sites:

http://www.inspirationbit.com/ http://jontangerine.com/ http://www.webtypography.net/ http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

There’s a ton of stuff on typography and web typography, but the best way is often to learn by example. Just copy people’s styles or layouts. I don’t think anybody will accuse you of stealing their idea just because you used the same three column layout or 18pt header.

38 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
Westernkings says

pt in web-design ?

Make your typography in percentages. ie H1: 180%, H2: 155% H6: 50%.

Never set in pixels really, always have them in percentages.

156 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
+3 more
SachaG says

Why not set it in pixels ? Most new browsers can resize text set in pixel, and it’s much easier to work with. As a matter of fact, the text you are reading right now is set in pixels ;)

2023 posts Review Manager
  • Has referred 10+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Member of the Envato Team
+12 more
jremick Envato team says

I actually prefer to set my fonts in ems. Ems are just as easy to use as % and use fewer characters. I usually set the base font style at 75 or 85% which is of 16px by default, then the rest of the css is ems.

34 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
ChordsofLife says

Hm. Well thanks, Koroshiya.

80 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in Denmark
+1 more
mads says

I usually set my font sizes in ems, but you can use percentages too. In modern browsers you can’t really see the consequences of setting font sizes in pixels, but try resizing text in older browsers and you’ll see what I mean when I say that it’s best to use ems or percentages.

For a really great introduction to typography in general and typography on the web in particular have a look at the Typography section in Mark Boulton’s book “A Practical Guide to Designing for the Web”. It just came out a couple of days ago, and I would really recommend it to everybody.

http://www.fivesimplesteps.co.uk/

1 post
  • Has been part of the Envato Community for over 5 years
bradblackman says

The Elements of Typographic Style by Robert Bringhurst

It’s not directed at web typography, but this is agreed upon as the typographer’s “Bible.” Also see The Triumvirate on typophile.com

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