Web Design - Typography

BFCTom

BFCTom

BFCTom

Soldato
Joined
20 Nov 2002
Posts
11,141
Location
Barnsley
Hi,

Creativity when designing web site mock ups has never really been an issue, but what really stumps me sometimes is typography.

Now I'm not talking about logos, etc. but the content body text (paragraph, headers, etc).

I'm in a terrible habit of using Arial for almost everything as it's the only thing I think looks right (read: half decent).

I just wondered what fonts the other designers out there use for these purposes?

Is everyone using @fontface now or still sticking to "safer" fonts?

Cheers for any pointers, advice or discussion :)
 
Using @font-face is good, but there's still a problem with the way different browsers render the fonts (especially Opera) using that method.

Using web safe fonts is still the best option, then give people a better experience if they have other fonts installed. So instead of having Arial as your main headline font, you could use.

Code: 
font-family { "Helvetica Neue", Arial, sans-serif }

Or there's also Typekit which uses a combination of javascript and @font-face to display fonts if a user if using a browser that doesn't support @font-face. I've got a few invites left so if you want to try it out let me know.
 
I used that method on my own site so that people who had Rockwell installed got that for headers, otherwise it was Arial :)

I've seen Typekit before and sure I would love an invite. Is it going to be a paid service when it's live? My e-mail is: bfctom at gmail dot com

Cheers.
 
I tend to stick to web safe fonts when working on clients webpages and not get caught up in typekit and @fontface for support issues.

Fonts like Trebuchet MS and Georgia can look really good on headers when done right and anti-aliased fonts such as Lucida Grande can also look stunning if done correctly.

Also try these 2 articles on typography and web design:

http://www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/

http://www.smashingmagazine.com/200...gn-survey-best-practices-from-the-best-blogs/
 
BFCTom said:
I used that method on my own site so that people who had Rockwell installed got that for headers, otherwise it was Arial :)

I've seen Typekit before and sure I would love an invite. Is it going to be a paid service when it's live? My e-mail is: bfctom at gmail dot com

Cheers.
Click to expand...

I'll send an invite now.

Yeah there's a free option with a limited amount of fonts available and your page has to carry a small Typekit logo in the bottom right. For the full library and no logo it's $50 a year.
 
Cheers for the links dude, had a quick scan they look good reads. I'll have a better look later.

I've always liked Georgia too, but sometimes I think it looks a bit too much.
 
mr.sly said:
I'll send an invite now.

Yeah there's a free option with a limited amount of fonts available and your page has to carry a small Typekit logo in the bottom right. For the full library and no logo it's $50 a year.
Click to expand...

Cheers pal, that's not too bad then I'll have a play and see what I think :)
 
For font-size is it best to use ems? I noticed in one of those articles that 13px is the most common font-size. I thought it was best to use ems for font-size instead of px?
 
ringo747 said:
For font-size is it best to use ems? I noticed in one of those articles that 13px is the most common font-size. I thought it was best to use ems for font-size instead of px?
Click to expand...

If you use ems for your measurements, when a user changes the font-size it will scale properly across your site. But the em is still based off a pixel measurement, usually 16px in the browser. So 16px = 1em and 18 = 1.13em and so on.
 
What I usually do is globally set the font to 62.5% then for individual styling you can use 1.2em (12pt), 1.4em (14pt)... 2.8em (28pt), etc.

Just makes it that bit easier to imagine the size of the fonts while you're coding your CSS.
 
Spunkey said:
@slylittlefox - that's an image though :confused:
Click to expand...

Check the code - the image is generated on the fly from text via JavaScript. If the user's browser doesn't allow JavaScript, they just see the text. The benefits being the anti-aliasing and all the other effects that can be done. It also allows me to use any font I wish (as long as the license allows), and for the majority of viewers to see that 'intended' font. Obviously there's also the fact that I get these nice, clean images with my chosen font without having to open up Photoshop!

More info can be found here.
 
Last edited:
Spunkey said:
Lucida sans unicode > *.

Code: 
H1 {
	font: 1.6em "lucida sans unicode", arial, helvetica;
	letter-spacing: -1px;
	color: #333;
}

This is also a good link if you're looking for alternatives without having to go webkit/@fontface

@slylittlefox - that's an image though :confused:
Click to expand...

You should have Helvetica before Arial really, the amount of computers that have Helvetica but don't have Arial must be very, very small.
 
You must log in or register to reply here.
Back
Top Bottom