Pixel to Em conversion...

M

Maxx Pollare

I'm in the process of creating some new CSS for my site (same as email)
and wanted to try something other then pixles for everything...

Unfortunately I couldn't get Google to give me a simple page that gives
me a relationship between Em and Pixels, as in "What the hell is an Em,
and how big is it in pixels?". So far I've scraped the experimental CSS
layouts twice because I can't things to work right with Em...

I am still learning all this CSS stuff, and for now most of my HTML is
either written in Notepad+ (XP) or gEdit (Ubuntu). I plan on learing
PHP next, once I've pick up some good books on it, and after I'm
finishing this HTML 4.01/CSS 2.1 stuff...

Note: I do not care about IE 5x or Netscape 4 until I reistall 98se on
a junker box... Which will probally be never...
 
C

Chaddy2222

I'm in the process of creating some new CSS for my site (same as email)
and wanted to try something other then pixles for everything...

Unfortunately I couldn't get Google to give me a simple page that gives
me a relationship between Em and Pixels, as in "What the hell is an Em,
and how big is it in pixels?". So far I've scraped the experimental CSS
layouts twice because I can't things to work right with Em...

I am still learning all this CSS stuff, and for now most of my HTML is
either written in Notepad+ (XP) or gEdit (Ubuntu). I plan on learing
PHP next, once I've pick up some good books on it, and after I'm
finishing this HTML 4.01/CSS 2.1 stuff...

Note: I do not care about IE 5x or Netscape 4 until I reistall 98se on
a junker box... Which will probally be never...
Click to expand...
1em is equivalent to 100%. I hope that helps a bit. Working with CSS
is a different mind set to udeing the old tables for layout, although
tables are easier for some things, mainly laying out for and other
items that you need in a grid type structure.
Use "%" if it's easier to work with.
 
D

David Dorward

I'm in the process of creating some new CSS for my site (same as email)
and wanted to try something other then pixles for everything...

Unfortunately I couldn't get Google to give me a simple page that gives
me a relationship between Em and Pixels, as in "What the hell is an Em,
and how big is it in pixels?". So far I've scraped the experimental CSS
layouts twice because I can't things to work right with Em...
Click to expand...

An em is the font height (or the font height of the parent element
when you are specifying the font-size).

Since this eventually means you are describing something as a ratio of
the font size of the parent element of html, this means that you are
describing things as a ratio of whatever font size the user as
selected as their preference.

Since you don't know what the user's preference is, you can't convert
from pixels to ems or the other way. If you could, then there would be
no point in using ems instead of pixels.

Just keep your body text (i.e. the main text) at 100% (trusting that
the user has their preference set to something comfortable to read
(and the browser defaults before changing are good for most people -
vendors have done a fair bit of usability testing) and adjust up and
down for headings, small print and similar.
 
J

Jim Moe

Maxx said:
Unfortunately I couldn't get Google to give me a simple page that gives
me a relationship between Em and Pixels, as in "What the hell is an Em,
and how big is it in pixels?". So far I've scraped the experimental CSS
layouts twice because I can't things to work right with Em...
Click to expand...
The default setting for browsers is 1 em = 16 pixels. The user has the
option to change that value to suit their preference.
Normally you would set font-size:100% for <body> and adjust the other
font sizes from there using per-cents or ems. There is really no need to
know the actual pixel setting for an em, it's all relative to the user's
preferred font size.
 
B

Ben C

An em is the font height (or the font height of the parent element
when you are specifying the font-size).
Click to expand...

Technically it's a measure of width (of an 'M') rather than of height.
An ex is supposed to be a measure of height (of an 'x'), but most
browsers don't bother to get exes exactly right.
 
N

Neredbojias

I'm in the process of creating some new CSS for my site (same as email)
and wanted to try something other then pixles for everything...

Unfortunately I couldn't get Google to give me a simple page that gives
me a relationship between Em and Pixels, as in "What the hell is an Em,
and how big is it in pixels?". So far I've scraped the experimental CSS
layouts twice because I can't things to work right with Em...

I am still learning all this CSS stuff
Click to expand...

1 em is the current local font size. There is no consistent relationship
to pixels.
 
J

Jukka K. Korpela

Scripsit Ben C:
Technically it's a measure of width (of an 'M') rather than of height.
Click to expand...

No it isn't. This disinformation used to be regularly presented and refuted
in various newsgroups, but recently it has been more quiet. Anyway, if in
doubt,
a) check the CSS specifications
b) make a simple test:
<div style="width:1em; height:1em; line-height:1; background:yellow:
color:black;font-size:300%">M</div>
and see if the width of M equals the width of the em square. To save your
time: it doesn't, except perhaps in some very fancy font - for most fonts,
it's considerably narrower.
An ex is supposed to be a measure of height (of an 'x'), but most
browsers don't bother to get exes exactly right.
Click to expand...

Most browsers implement ex as 0.5em, which is exactly wrong for almost any
font - though perhaps a rough _average_ over fonts. Firefox 2 gets ex right.
 
T

Toby A Inkster

Ben said:
Technically it's a measure of width (of an 'M') rather than of height.
Click to expand...

In traditional typography, yes. But the modern definition of an 'em' is
that an em is the same as the font height.

The font height itself is quite a wishy-washy concept, but it can normally
be thought of as the height of most capital letters and lower-case letters
with ascenders (e.g. 'b', 'd', 'f', etc.). However, in certain fonts, some
of these letters may be smaller or taller than the font-height.

The CSS spec says that browsers are supposed to use the 1 em = font height
definition. So when using, say, a 13 px font, 1 em is supposed to be 13 px,
and doesn't depend at all on the width of the capital M, which could be
slightly larger or smaller than 13 px. The font may not even *have* a
capital letter M -- it may only have, say, Japanese Katakana characters
and no Western characters at all!

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.12-12mdksmp, up 95 days, 17:14.]

Non-Intuitive Surnames
http://tobyinkster.co.uk/blog/2007/05/25/non-intuitive-surnames/
 
A

Andy Dingley

"What the hell is an Em, and how big is it in pixels?".
Click to expand...

There's no such relationship, and to even think that there is is a
major error in CSS design. Read the groups' archives, as this gets
discussed to death.

To convert from pixels to ems, then converting 12pixels to 1em won't
go far wrong.

1em is 100%, so you can use percentages if you prefer.

Then after you've done that, normalise all em settings so that nothing
is less than than 0.75em. Possibly unreadable legal boilerplate might
go to 0.67em, but that's hard to read and anything less is impossible.

Then go through and delete (nearly) all the em settings anyway. It's
just not necessary in competent web design to set this explicitly
(thinking it's appropriate to do is again a major error, as it betrays
that you don't realise how little the author controls and how much the
reader controls).

If you set
body { font-size:1em; font-size:100%; }
then that's enough for nearly all web pages. <h*> will be bigger, but
the default style sheet will probably take care of that adequately
anyway. Semantic HTML markup (marking up your "headings" with <h*>
elements) will take care of most needs to set bigger sizes.

It's extremely rare to need to set a font-size > 2em, for anything.
Thinking this is a good idea is usually an indication of simple poor,
garish "eBay style" design.

If you still think you need to set em sizes all over the place, then
post again with example pages for where and why you think it's needed.
 
T

Toby A Inkster

Andy said:
Then after you've done that, normalise all em settings so that nothing
is less than than 0.75em. Possibly unreadable legal boilerplate might
go to 0.67em, but that's hard to read and anything less is impossible.
Click to expand...

I often drop superscripts down to .67em as they can otherwise disturb line
spacing. In my own writing, superscripts are nearly always footnotes, so
the readability of the textual content is not completely vital, as long as
the link can be followed.

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.12-12mdksmp, up 95 days, 17:51.]

Non-Intuitive Surnames
http://tobyinkster.co.uk/blog/2007/05/25/non-intuitive-surnames/
 
B

Ben C

In traditional typography, yes. But the modern definition of an 'em' is
that an em is the same as the font height.
Click to expand...

Thanks, I didn't know that.
The font height itself is quite a wishy-washy concept, but it can normally
be thought of as the height of most capital letters and lower-case letters
with ascenders (e.g. 'b', 'd', 'f', etc.). However, in certain fonts, some
of these letters may be smaller or taller than the font-height.

The CSS spec says that browsers are supposed to use the 1 em = font height
definition.
Click to expand...

Do you know where it says that? I have in 4.3.2 of CSS 2.1 "em: the
'font-size' of the relevant font". 'font-size' is hyperlinked to 15.7,
which says, "The font size corresponds to the em square, a concept used
in typography."

But you said that in traditional typography, em did mean width of 'M'.
So I am confused. In any case it says "em square" which implies no
distinction between width and height. Are Ms always square?
 
T

Toby A Inkster

Ben said:
Do you know where it says that? I have in 4.3.2 of CSS 2.1 "em: the
'font-size' of the relevant font".
Click to expand...

Consider:

div {
font-size: 12px;
width: 10em;
/* width is 120 px */
}

In practice "font size" and "font height" are synonyms.

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.12-12mdksmp, up 95 days, 18:28.]

Non-Intuitive Surnames
http://tobyinkster.co.uk/blog/2007/05/25/non-intuitive-surnames/
 
J

Jukka K. Korpela

Scripsit Toby A Inkster:
In traditional typography, yes.
Click to expand...

No, the em unit was originally related to the square in which inscription
letters were designed, so it related both to the width and to the height of
"M", but the connection was lost almost two thousand years ago.
The font height itself is quite a wishy-washy concept,
Click to expand...

Rather, it is redundant. It is meant to help people to get a rough idea:
but it can
normally be thought of as the height of most capital letters and
lower-case letters with ascenders (e.g. 'b', 'd', 'f', etc.).
Click to expand...

No, their height is considerably smaller than the font size ("font height").
Try it. Use a 1em by 1em element with a border, with line-height: 1, with a
single character inside it, and see how much space there is both above and
below any of those characters.

If you take the distance from the lowest descender up to the highest
ascender, you get close. Few characters have both a descender and an
ascender; lowercase ("small") thorn is one of the few exceptions. But you
really need a diacritic on it, too, e.g. &thorn;́ (thorn with acute,
not used in any human language) to get a character that occupies the full
height of the font - roughly speaking.

In fact, ascenders, descenders, and diacritic marks may extend a bit past
the limits set by the "font height".

The font size, or "font height", is really a typographic design concept, as
the CSS specifications tell us. When a typographer starts designing a font,
he uses an em square as a tool, designing characters so that they
comfortably fit into it, and some font designs use a larger part of the
square than others, and use it differently. Any normal character is expected
to remain within the em square boundaries, or at most touch them or cross
them just a little.

In a sense, the em square is the drawing board of a font designer. How he
uses it is up to him
 
B

Bergamot

Ben said:
Technically it's a measure of width (of an 'M')
Click to expand...

Alas, if only that were true. There currently isn't any CSS unit that
corresponds to character width. :(
 
B

Bergamot

Andy said:
body { font-size:1em; font-size:100%; }
Click to expand...

You don't really mean to suggest setting both, do you?

font-size:100% is a better choice because it prevents some bizarre
scaling issues IE has with em units.
 
J

Jukka K. Korpela

Scripsit Bergamot:
You don't really mean to suggest setting both, do you?
Click to expand...

Andy's code sets font-size to 100% (of parent element's font size). The
first declaration is ignored, since here we have two settings for a property
of an element, all other things being equal except their order, so that the
latter wins.

Don't ask me why Andy included the declaration that will always be ignored.
font-size:100% is a better choice because it prevents some bizarre
scaling issues IE has with em units.
Click to expand...

And even that setting isn't needed except for dealing with some browser
bugs. After all, by default the <body> element inherits the font size of
<html>, so there's little point in setting <body> font size to 100% of
<html> font size - except as a workaround to some bugs.
 
A

Andy Dingley

You don't really mean to suggest setting both, do you?
Click to expand...

Of course.

In practice I usually boilerplate a referenced explanation of why
they're both in there, citing the IE bug.

Some of you have the luxury of writing HTML pages that stay with the
same content _you_ put into them. I unfortunately don't (a bad local
infestation of code pixies).
 
B

Bergamot

rf said:
Rubbish.
Click to expand...

I think he just meant that the usual "factory setting" for default font
size is 16px. That is true for mozilla-based browsers, but I can't say
it's true for all browsers.
 
B

Bernhard Sturm

Jukka said:
Scripsit Ben C:


No it isn't. This disinformation used to be regularly presented and
refuted in various newsgroups, but recently it has been more quiet.
Anyway, if in doubt,
a) check the CSS specifications
b) make a simple test:
<div style="width:1em; height:1em; line-height:1; background:yellow:
color:black;font-size:300%">M</div>
Click to expand...

Jukka: this is true in it's application, but Ben was talking about it's
'technical' origin. This is something different. Read a bit about
typography (I am a typographer myself) and you will find out, that Ben
was right. The 'em' unit goes back to the Romans using the width of the
letter 'M' to refer to the size of their letters...
Don't only look at how the 'em' unit is implemented in the CSS-specs,
it's sometimes good to know the historical origin of things.

hth
bernhard
 

Members online

Total: 32 (members: 1, guests: 31)
Robots: 467

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top