15 replies [Last post]
childofgaia
childofgaia's picture
Offline
Regular
Stockholm, Sweden
Last seen: 11 years 51 weeks ago
Stockholm, Sweden
Joined: 2007-07-25
Posts: 18
Points: 0

I just wanted to hear how you guys specify the most browser consistent global font size of a site (with relative sizes like em and %). I use percentage in body and ems everywhere else:

<?php

body {

font: normal 80%/1.5 Georgia, "Times New Roman", Times, serif;

}

?>

Known hickups? Best practices?

Only want standards compliant/accessible answers of course Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

ems & percents are

ems & percents are interchangeable (e.g. 1em = 100%). My personal preference is always to use percents. Due to differences in the way browsers seem to calculate font-size(*) I tend to specify percents to 2 decimal places with calculations based on the usual default font-size (16px). E.g. I wouldn't use 80% in the body, but 81.25% (13px) or 75%(12px).

I don't use ems for font-size as I believe its confusing. Ems typically refer to the current font-size, as in, margin-top: 1em, excepting when the property is font-size, when they refer to the parent font-size. This means is possible to create a style rule using ems and have the ems refer two different things. e.g.

h1 {
margin: 1em 0;
font-size: 2em;
}

I don't consider use of px or other absolute units as IE6 is unable to vary the size of fonts specified in this way. So if a user finds the font-size too small they would be unable to make it larger if it had been specified in absolute units.

(*) My observations indicate that:
- IE calculates font-size "late" and tends to round up
- FF calculates font-size "late" and tends to round down
- Opera calculates font-size "early"

By "late" I mean that when calculating font-sizes that are dependent on other dependent font-sizes (e.g. 80% of 80% of 16px) the browser appears to make the complete calculation at one time (e.g. 0.64 * 16px = 10.24 = 10px). By early the browser makes the each font-size calculation individually (e.g. 0.8 x 16px = 12.8 = 12px * 0.8 = 9.6 = 9px).

childofgaia
childofgaia's picture
Offline
Regular
Stockholm, Sweden
Last seen: 11 years 51 weeks ago
Stockholm, Sweden
Joined: 2007-07-25
Posts: 18
Points: 0

Thanks alot for an

Thanks alot for an exhaustive post Smile

Yeah, I know they are one and the same. I prefer ems though, there's something with multipliers that makes it easier for me to set correct typographical space (leading, spacing between headings and body etc).

Pixel values is sin when it comes to web typography. Alltough I've seen some use it deliberately NOT to scale text that's rarely interesting to scale, like tiny bits of site info in the site footer.

Em values are also great for column widths (depending on layout) because it always scales so that the text fits in nicely (ie CTRL+Mousewheel this site: http://www.simplebits.com/).

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I wouldn't go to overboard

I wouldn't go to overboard with enthusiasm for em widthed (elastic)layouts, elastic/fluid with max/min em widths maybe but they're tricky. I don't like horizontally scrolling the simple bits layout and also if one observes closely the layout breaks in some subtle areas.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

childofgaia
childofgaia's picture
Offline
Regular
Stockholm, Sweden
Last seen: 11 years 51 weeks ago
Stockholm, Sweden
Joined: 2007-07-25
Posts: 18
Points: 0

Horisontall scrolling,

Horisontall scrolling, maybe. But there are an increasing number who has LARGE screens (20-22+ inch)who sometimes need to enlarge text. And people who have tiny screens (ie portables). So your site "should" fit nicely on both. And high contrast settings that some visually impaired people use requires your site to scale smoothly even if font size is enlarged with like 300%.

Still, totally fixed width and fully fluid (%) layouts are worse in my opinion.

I think sometimes the users itself should be free to set the max width of the site.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Do people with large screens

Do people with large screens have their browsers set to full width? I don't.

I suspect the sensible alternative is to provide multiple layouts/css.

dsscheibe
Offline
newbie
Phoenix, AZ
Last seen: 12 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2007-12-16
Posts: 8
Points: 0

Most browser consistent font-size rules?

I had been taught to use variable fonts in HTML and so I did that when I started doing CSS, using percents for font size. It worked great for FireFox but then I found that IE displayed everything twice as big as I intended it to be :mad: I hate IE!

So I went back and set all my font to .px sizes so IE would display my pages somewhat the way I intended them to. I use 19-21px for anything I normally want you to read, larger for headers and 10px for stuff like copyright and other notifications at the bottom of the page I don't really care if anyone reads.

.XXL { font-style: normal; font-size: 26px; font-weight: 300; font-family: Arial, Helvetica, sans-serif; } .XL { font-style: normal; font-size: 23px; font-weight: 300; font-family: Arial, Helvetica, sans-serif; } .L { font-style: normal; font-size: 21px; font-weight: 300; font-family: Arial, Helvetica, sans-serif; } .M { font-style: normal; font-size: 19px; font-weight: 300; font-family: Arial, Helvetica, sans-serif; } .S { font-style: normal; font-size: 14px; font-weight: 200; font-family: Arial, Helvetica, sans-serif; } .XS { font-style: normal; font-size: 12px; font-weight: 200; font-family: Arial, Helvetica, sans-serif; } .XXS { font-style: normal; font-size: 10px; font-weight: 200; font-family: Arial, Helvetica, sans-serif; }

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

dsscheibe, the problem with

dsscheibe, the problem with px is IE won't allow the user to resize things if they can't cope with your chosen size. If you set up your HTML and your CSS correctly there is no reason for percents to cause IE fonts to be larger than any other browser. Also you may want to try short hand properties, e.g.

.L { font: 21px Arial, Helvetica, sans-serif; }

dsscheibe
Offline
newbie
Phoenix, AZ
Last seen: 12 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2007-12-16
Posts: 8
Points: 0

font-size rules

I like everything spelled out instead of short hand properties then I don't have to remember what order the properties have to be in. Also is there a short hand position for Font Weight? Everyone should switch to FireFox instead of using Micro$oft garbage. I started off using named font sizes; xx-small, x-small, small, medium, large, x-large, xx-large which worked fine in Mozilla and FireFox but IE7 totally broke everything by displaying the fonts twice as large as did the other browsers, IE6 also did the same thing. I tried em's but they basically double in size each number. I wrote a page with different font controls and px's were the only one that displayed about the same in FireFox and IE7. I didn't try percents out to two points though. If you have a list of % equivalent to px from say 10px to 30px that would be interesting to see.

http://scottsworld.info/test2.htm

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

dsscheibe wrote:I like

dsscheibe wrote:
I like everything spelled out instead of short hand properties then I don't have to remember what order the properties have to be in.

afaik they can be in any order, it doesn't matter.

Quote:
Also is there a short hand position for Font Weight?

yep

.large {font: bold 1em/120% Arial, serif; }

(even threw in line-height there for good measure Wink )

Verschwindende wrote:
  • CSS doesn't make pies

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

i have found a fix but can't

i have found a fix but can't find the link to the weird IE6 resizing of text is to set

body { font: 100.1% Arial, Helvetica....... }

EIDT: or maybe that's for a Firefox rounding issue... i can't remember anymore... :bigoops:

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

dsscheibe
Offline
newbie
Phoenix, AZ
Last seen: 12 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2007-12-16
Posts: 8
Points: 0

Line height & weight

Quote:
Also is there a short hand position for Font Weight?

Quote:

yep

.large {font: bold 1em/120% Arial, serif; }

(even threw in line-height there for good measure Wink )

What if you are using numbers to set font weight instead of bold, bolder, boldest, IE: font-weight=600? I've got my smaller fonts at lower numbers and bigger ones at larger ones.

What does the 1em/120% do? Is that the line height? Which brings up another issue I've been having with the weather page and headlines. For a change IE displays them the way I expect and FireFox puts like two blank lines after a headline. I was messing with it last night and tried setting all the headline codes line height. Which when I did so then the second headline h4 displayed over the top of the text under it even when I put breaks between them and the text below is wrapped in a div statement. I end up only putting a line height in the H2 tag in the external css file which looks OK in FireFox but now in IE it is sitting on top of the H4 heading with no space between them. Any Ideas why FireFox is putting so much space between anything below a Heading?

I've been using TopStyle3 lite which came with HomeSite as my style editor and apparently it doesn't exactly follow correct standards nor does it have any help files. So I've mostly been learning by doing. I haven't found any good sites that lay out the rules and syntax of CSS clearly. It and DreamWeaver don't agree and I'm finding Adobe products hard to pick up and learn, they are not at all intuitive and now I've seen several people on here say DW doesn't code correctly. I still prefer HomeSite 4.5.2 but it is a bit dated, it doesn't understand XML at all or CSS very well. I've tried a bit at RSS with the weather page, it doesn't validate but works, I didn't really understand with the validator was saying was wrong so I couldn't fix it. I have really found a good source on the rules of RSS coding either. There is a newer version of HomeSite but it didn't run well on my system and crashed and wouldn't work any more before the trial version ran out. I decided not to upgrade when to a program that crashes and corrupts it's self..

http://members.cox.net/dsscheibe/vws/ Weather page

syrupcore
Offline
Enthusiast
Last seen: 11 years 37 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

great post way up there

great post way up there chris.

The most recent (and prolly best) article of note about setting 100% on the html element is here: http://alistapart.com/articles/howtosizetextincss

Will

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

thepineapplehead

thepineapplehead wrote:
dsscheibe wrote:
I like everything spelled out instead of short hand properties then I don't have to remember what order the properties have to be in.

afaik they can be in any order, it doesn't matter.

It does for font shorthand. font-size/line-height have to come before the font-family and font-style/weight etc have to come before font-size but I can never remember in which order.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

dsscheibe wrote:What does

dsscheibe wrote:
What does the 1em/120% do?

1em is font-size; 120% is line-height although you're better specifying line-height without a unit, e.g. as 1.2.

And to answer the original question, I do the same as Chris although I don't tend to be as exacting with my decimal places (probably should do rather than just letting Opera display everything a bit smaller).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Deuce wrote:i have found a

Deuce wrote:
i have found a fix but can't find the link to the weird IE6 resizing of text is to set

body { font: 100.1% Arial, Helvetica....... }

EIDT: or maybe that's for a Firefox rounding issue... i can't remember anymore... :bigoops:

My recollection, is 100.1% is for Opera. Although, I have never been able to figure out how effective it will be. Afaik, all current browsers will display body { font-size: 100%; } as 16px. By going to two decimal places I don't run into x-browser font-size discrepancies.