[Pro] Font Styling

Freeway
1

I have checked one of my websites in Internet Explorer and my fonts are much bigger and bleeding into images etc. It was on my mate’s PC and I’m not sure which version of IE it was.

But my question is, how should I be setting up my fonts? Currently, I normally have headings around +1, paragraph text at -1 etc. Should I be setting them to exact pixel sizes?

How come I don;t see problems in well-built sites, but my text enlarges and bleeds into images etc?

Cheers,
Colm.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Currently, I normally have headings around +1, paragraph text at -1
etc. Should I be setting them to exact pixel sizes?

There are various ways to tackle this, but one of the simplest is to
do exactly as you guessed: set your type using pixel sizes. Your
current sizing choice is much more flexible, and it will enlarge a
fair bit in Windows-based browsers.

It can also help to allow a bit of ‘wiggle room’ when you design;
creating tightly-cropped content areas is not something that works
quite as well on the web as it does in print.

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

For some reason, I just thought setting exact pixel sizes would be frowned upon somewhat? And that it would be better to have everything elastic?

Would pixel size fonts be common in huge budget sites like?

I don’t mean to annoy you, but could you outline some other ways this problem can be addrsssed?

Thanks for the help,
Colm.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I just thought setting exact pixel sizes would be frowned upon somewhat?

Well, it used to be rather more of an issue than it is now, at least
for accessibility-related reasons. A while back, many browsers
couldn’t zoom pixel-defined text. Now, however, I don’t think any
browser is limited that way. (I’m not sure about IE6, but I struggle
to admit that’s a browser at all these days. And IE6 usage figures
are becoming very small in most sectors, too. :slight_smile:

And that it would be better to have everything elastic?

To make that work well you have to produce structures that are also
more elastic and a page setup that makes all this work together.

Would pixel size fonts be common in huge budget sites like?

The following snippet of CSS code:

body
{
font: 12px/18px “Lucida Grande”, “Lucida Sans Unicode”, Arial,
Verdana, sans-serif;
background-color: #fff;
color: #333;
}

is from Apple’s ‘base.css’ file, used on www.apple.com. See
http://images.apple.com/global/styles/base.css for the full file.

But do note that it isn’t really quite as simple as I may be making
it appear. Sometimes this is a great way to work, sometimes it is
better to work differently. My take, however, is that the pixel-size
approach is definitely the quickest and simplest way to go while
you’re getting up to speed.

I don’t mean to annoy you, but could you outline some other ways
this problem can be addrsssed?

Heh. I’m not annoyed at all. :slight_smile: But I’m afraid I’ll have to leave it
to others to do this. First, I generally go the pixel-size route
myself, as I find it generally much simpler. Second, I’m facing a few
simultaneous deadlines. Gulp…

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

I don’t mean to annoy you, but could you outline some other ways
this problem can be addrsssed?

Keith covered it nicely but I’ll just add that I tend to use a base
font size of “small” then use % when creating styles, eg, 120% or 90%
etc.

I started doing this to cater to IE for reasons which Keith has
already mentioned. While you give up some pixel-precision using
relative sizes the benefits of increased accessibility outweighed
other considerations. But as browsers improve (IE) this consideration
is less relevant today than it was a year or two ago which means it
might be time (for me) to consider using pixels again. I’ve gotten
quite used to using relative sizes and I know that no matter what
browser is used the visitor will always be able to scale it up/down.
It just requires a little more work to implement and a willingness to
give up some control. As things stand today I don’t think there’s a
right or wrong way to do it.

Todd

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

I guess I’ll stick to pixel sizes for a while then and see how it goes.

Thanks all for all the help guys, the apple coding was interesting to see…if only I could read it! :slight_smile:

Cheers,
Colm.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options