Text sizing -- ems versus percent

K

Kabuki Armadillo

I guess this is probably a common question here. The difference between
them?

I typed a test page, one using percents, one using ems.

The first page used nothing but ems, the second nothing but percent.

In Firefox 2, 1 em = 100% which is what I expected.
However, using 2 ems was much bigger than 200%.

In IE7, both behaved the same, i.e. everything scaled accordingly.

Question 1: Does the Gecko engine render font sizes differently from the IE
engine? And does anyone know how Opera and Safari behave in this regard?


Also, when it comes to padding, margins, I understand how % works.

However, I'm a little fuzzy on how ems work in terms of spacing.

Supposed I want to ensure a comfortable reading setup of 90 characters per
line leaving a generous margin of 10% (e.g. 9 characters on each side). If
the reader re-sizes the text I want the box to resize so as to keep the 90/9
ratio.

Question 2: Is this doable with ems? How?

Question 3: What is the advantage of ems over percent? i.e. is it related to
spacing and margins, is it related to fine-tuning of text appearance, etc.



M
 
J

Jukka K. Korpela

Scripsit Kabuki Armadillo:
I guess this is probably a common question here.

Then why don't you read past postings or check the FAQ?
I typed a test page, one using percents, one using ems.

If you had read the group a little, you would know how pointless it is
to babble about one's test pages without specifying URLs.
 
B

Beauregard T. Shagnasty

Kabuki said:
I guess this is probably a common question here. The difference
between them?

I typed a test page, one using percents, one using ems.
URLs?

The first page used nothing but ems, the second nothing but percent.

General rule of thumb. Use both.
- percents for font sizes, with 100% as the body and content font
- ems for everything else but perhaps borders, and of course your
image sizes

...and yes, it's discussed every week.

See: http://tekrider.net/html/fontsize.php
 
K

Kabuki Armadillo

dorayme said:
Not in this pure example, at least not on my browsers (Mac):

<http://dorayme.890m.com/alt/ems_and_percents.html>

Damn. That means something must be up with my Firefox 2.

I used the 'Options | Content | Advance | 'Allow pages to choose their own
fonts instead of my selections above'

Can someone knowledgeable confirm if this is the correct way to revert to
FF's default state? I thought it was, now methinks I'm missing something
else.

Thx for your helpful response. . .

M
 
D

dorayme

"Kabuki Armadillo said:
dorayme said:
Damn. That means something must be up with my Firefox 2.

I used the 'Options | Content | Advance | 'Allow pages to choose their own
fonts instead of my selections above'

Can someone knowledgeable confirm if this is the correct way to revert to
FF's default state? I thought it was, now methinks I'm missing something
else.

Thx for your helpful response. . .

M

Suppose that each of the lines at the URL I made were numbered 1 to 4
down the page. What exactly are you seeing with respect to size on your
different browsers?
 
K

Kabuki Armadillo

Beauregard T. Shagnasty said:
Kabuki Armadillo wrote:
..and yes, it's discussed every week.

See: http://tekrider.net/html/fontsize.php

Okay, I pretty much use the steps described in that guide. However, that
guide addresses the issue of fixed fonts sizes versus relative font sizes
using %.

My issue is more about ems versus % both of which use some sort of relative
scaling. During my testing with a simple test sheet -- virtually the same as
the one referenced by dorayme --

http://dorayme.890m.com/alt/ems_and_percents.html

I get different scaling between the two methods. He reports that the results
are identical on his browsers. (I'm assuming he has both FF, IE as minimum.)

Can someone confirm that the results should be the same? In IE7 on my Vista
machine, they appear identical but not in my FF. I'm trying to determine if
it's a rendering engine issue or some setting that I've tweaked somewhere in
FF causing the difference.

Assuming the answer to the above is "yes, they should yield the same
results" my next question is: What is the advantage of one over the other?
The only thing I've been able to determine from my readings is that the
advantage has less to do with the font sizing than it does with margins and
paddings.

To provide a simplistic example:
A margin of 10% is not comparable to a margin of 0.1 em in the way that a
font-size: 10% is comparable to a font-size of 0.1 em.

Hopefully that example illustrates my question. . .

Cheers to all,

M
 
K

Kabuki Armadillo

Suppose that each of the lines at the URL I made were numbered 1 to 4
down the page. What exactly are you seeing with respect to size on your
different browsers?

In Firefox 2:

Line 4 > Line 3 > Line 2 = Line 1
i.e. the em effect scales more than the percent effect

Internet Explorer 7:

Line 4=Line 3 > Line 2 = Line 1
The em effect scales as the percent effect which is what you would expect.

FF2 bug?

M
 
D

dorayme

"Kabuki Armadillo said:
In Firefox 2:

Line 4 > Line 3 > Line 2 = Line 1
i.e. the em effect scales more than the percent effect

Internet Explorer 7:

Line 4=Line 3 > Line 2 = Line 1
The em effect scales as the percent effect which is what you would expect.

FF2 bug?

If so, not showing in my Mac FF 2.0.0.14

Perhaps something to do with your own options or settings. There is a
bug in IE 6 that is avoided with setting body to 1 a percentage as in

<http://dorayme.890m.com/alt/ems_and_percents_body100.html>

but I cannot see this is to do with your FF? Is the situation improved
by this url?
 
K

Kabuki Armadillo

Okay problem solved. Went to Mozilla help pages, opened up about:config in
FF and reset all font related item to default. Both FF and IE now displaying
the above page correctly.

M
 
D

dorayme

Neredbojias said:
What I meant was the config option the OP referred to isn't all there is to
setting font-sizes in the browser. Anyway, regarding the latest post, he
seems to have solved it and, I'd say, in the correct manner.

Damn! I suppose that means I have to stop. It is like when my owner
takes me to the park and throws the ball only a very short distance.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top