Saturday, October 27, 2012

A Rant on Typography and Spacing

Typography and Spacing

Listen up, internet ? and I?m speaking to a lot of you people, yo!

There comes a time when 12px font size and 10px of padding around your content is simply a no-no. In other words, styling your website this way is now becoming a faux pas.

It?s your responsibility to serve up a good experience for your visitors. Now before I go on, I?ll show some examples of what I?m talking about ? so that it?s crystal clear.

M?kay?

Here?s an example of bad typography ? the kind that kills little puppies late at night:

Bad Typography

Here?s an example of good typography ? the kind that makes little angels gets their wings:

Good Typography

To illustrate the differences, here are the font stacks for each respective example:

Sorry, little puppies?

.bad-typography p {     font-family: Arial, Tahoma, sans-serif;     font-size: 12px;     margin: 0 0 10px;     padding: 10px; }

Woohoo, angels?

.good-typography p {     font-family: 'Lato', sans-serif;     font-size: 16px;     margin: 0 0 25px;     padding: 30px; }

Can you see the difference between the two? Yeah, that?s what I?m thinking. Me too.

Customizing CSS to make this kind of change on your website is a really an easy thing to do. It shouldn?t take more than a few minutes, if that ? so go do it NOW!

If you want to save the world, one squinting eye at a time, stand up and make a difference. Go out and get yourself something from Typekit or hook yourself up with something (and they are free, might I add) from Google Web Fonts.

Not sure which combination of fonts to use? Well I got ya covered.

Now repeat after me? ?I will care about typography and spacing on my website.?

Say it again. And again. And again.

Follow that up by saying? ?16px font is the new 12. 30px (at least) padding is the new 10.?

After you?ve spruced up your typography and spacing, please take a few minutes to read about another something important ? responsive web design.

Trust me, your visitors will love you for it.

Source: http://www.briangardner.com/typography-and-spacing/

beyonce troy polamalu james harrison james harrison falcons giants game norman borlaug

No comments:

Post a Comment