website magnification

[neil]

Browsing the new site in Safari, I'm getting a slight issue with the size. I'm finding a lot of the text is too small to read without putting my face right up to the screen. When I come across a site like this I usually hit [option+], which increases the size of the text. However, on the forest site it magnifies the whole page, meaning I have to scroll left & right in order to see the full width. This is very strange! I can't remember the last time I had to scroll left & right to view a web page.

Two questions:

Can the text be a bit bigger, as it is particularly small at the moment?

Can it be set so the text size increases or decreases with the plus & minus shortcuts, instead of everything?

[swithun]

1998 phoned. They want their horizontal scroll bar back.

According to Firebug, the CSS rule at line 12 in default.css says font-size: 12px. If this is removed, then the font size returns to normal (larger for me). I can zoom in 4 times before I get a horizontal scroll bar.

Choosing between zooming the text or everything sounds like a browser thing - on FF you can choose.

[milk]

i've popped the font-size up to 14px

@swithun; hmm, what res are you running? i'm using firefox on 1024*768 and i get a horizontal bar with only one ctrl++ whether the 'font-size: 12px/14px' line is disabled or not.

@neil; yeah, the way an html render zooming function works is browser dependant, but i'd assume there'd be a way to do what you're looking for with js/cookies/zoom icons in the header maybe? possibly there's a module for this already..

[swithun]

My monitor at work is 1280x1024.

You could just remove the font-size rule, and let the users' browsers pick the size. Either it will be pretty much the same, or it will be different because the user likes their fonts on the large side.

[neil]

I think the solution might be to specify line height in ems, if possible. Have a look here:
http://www.alistapart.com/articles/howtosizetextincss/

[Martin]

Don't specify font sizes on the web in pixels. A pixel doesn't correspond to anything useful, how big it is depends on the monitor and resolution, and some browsers (IE6 and IE7 particularly I think) will refuse to resize text with an explicit pixel size.

Specifying in points is theoretically better, because a point is a real size - 1/72nd of an inch - but for this to work the user's machine must be set up correctly to know how many pixels the screen has per inch. Most aren't.

Best to leave the size unspecified, and then it will come out as whatever the user has chosen in the browser. And again, most don't bother, but at least lots of sites will look too big or too small for them, so they'll hopefully realise it's something about their system rather than the forest site.

Where text in different sizes is needed for headings etc, use percentages. Then these will always be the same multiple of the default size used for the bulk of the text.

Neil - line height will set the spacing between lines of text, not the size of the font itself. But you're right to suggest using ems. One em is equal to the height of the font, whatever that may be, so it's a good unit to use when sizing other bits of the layout relative to the text.

[milk]

oh yah, this was changed to remove the font size specification around a month or so ago, forgot to mention.