WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: pixels to ems - was RE: Relative vs. absolute units

for

Number of posts in this thread: 4 (In chronological order)

From: Kevin Spruill
Date: Tue, Jan 07 2003 3:12PM
Subject: pixels to ems - was RE: Relative vs. absolute units
No previous message | Next message →

Jules, et al...

Rough justice division reveals that by dividing #pixels by 16 you get the equivalent in ems... a little tweaking from there should handle it if/when necessary

HK

Kevin Spruill
National Library of Medicine
OCCS
= EMAIL ADDRESS REMOVED =
(301) 402-9708
(301) 402-0367 (fax)
www.nlm.nih.gov

>>> = EMAIL ADDRESS REMOVED = 01/07/03 11:18AM >>>
Despite the fact that the bytowninternet.com example you gave is quite an
eye-opener, it raises the question, how does one measure in ems or convert
from Photoshop pixels to HTML ems?

Jules

>

From: Kynn Bartlett
Date: Tue, Jan 07 2003 3:26PM
Subject: Re: pixels to ems - was RE: Relative vs. absolute units
← Previous message | Next message →

An em equals the size of the current font, and that can be changed by
the browser,
by the user, by the author's style sheet, by the user's style sheet, by
the HTML,
...

An em only equals 16 pixels as long as the font size equals 16 pixels.

--Kynn

On Tuesday, January 7, 2003, at 01:47 PM, Kevin Spruill wrote:

> Jules, et al...
>
> Rough justice division reveals that by dividing #pixels by 16 you get
> the equivalent in ems... a little tweaking from there should handle it
> if/when necessary
>
> HK
--
Kynn Bartlett < = EMAIL ADDRESS REMOVED = > http://kynn.com
Chief Technologist, Idyll Mountain http://idyllmtn.com
Author, CSS in 24 Hours http://cssin24hours.com


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


From: John Foliot - bytown internet
Date: Tue, Jan 07 2003 3:45PM
Subject: RE: pixels to ems - was RE: Relative vs. absolute units
← Previous message | Next message →

...based on the width of the widest letter in the english alphabet, the "M"
(thus the name - although I always thought that "W" was wider...). Netscape
6/Mozilla 1 actually install with a default font size of 16 pixels, IE's
"default install" (at least on a PC, can't say for Macs) is about the same,
I beleive it's 11 pts +/-

Thus the example page on my site is never guaranteed; as a matter of fact I
state "under normal circumstances"
(http://www.bytowninternet.com/examples/relative.html). That said, icons
such as the PDF icon or text "buttons" could still stand to benefit by
scaling, especially a small icon like the acrobat icon, which is about 16px
square.

However, as always, your mileage may vary and I by no means advocate using
"ems" to size *all* images on your page(s).

JF

>

From: Jared Smith
Date: Tue, Jan 07 2003 6:42PM
Subject: Re[2]: pixels to ems - was RE: Relative vs. absolute units
← Previous message | No next message

Kynn-

KB> An em only equals 16 pixels as long as the font size equals 16 pixels.

Which, by default, it roughly does on most systems. The power of ems
is that the size is contingent upon the users settings, yet still
maintains the relative sizing that the developer wants. For the
majority of users who have not changed their default font or user
style sheet, then 16 pixels = 1em is a good guideline to base your text
sizing, though this changes slightly based on OS, browser, font
settings, or weather patterns (ok, it only seems that way).

The danger comes in a design that is not useable when 1em does not
equal the same font size that the majority of us use. What happens to
your page when 1em = 48 pixels? Good design that allows scaling and
utilizes relative size values almost always provides excellent
implementation of ems.

A great, though somewhat antiquated, overview of relative and absolute
sizing and the limitations thereof can be found at
http://www.alistapart.com/stories/fear4/index.html

Jared Smith
WebAIM (Web Accessibility In Mind)
Center for Persons with Disabilities
Utah State University


***************
On Tuesday, January 07, 2003 you sent:
KB> An em equals the size of the current font, and that can be changed by
KB> the browser,
KB> by the user, by the author's style sheet, by the user's style sheet, by
KB> the HTML,
KB> ...

KB> An em only equals 16 pixels as long as the font size equals 16 pixels.


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/