Forum Moderators: open

Message Too Old, No Replies

Relative font size

Is it possible in Strict HTML?

         

WeirdoPL

12:42 am on Jan 31, 2004 (gmt 0)

10+ Year Member



My problem actually concerns CSS.

Is it possible to make a font size relative in a style tag, like it was in the availiable in Transistional HTML <font> object:
<font size="+3"> .. </font>

When converting to strict HTML i was forced to get rid of all the <font> objects and use CSS instead. That in consequence forced me to use {font-size:20pt} instead of the previous method.

choster

1:01 am on Jan 31, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There are several ways to generate relative text sizes using CSS.

p {font-size:125%}
p {font-size:1.25em}
p {font-size:larger}
p {font-size:2ex}

tedster

3:45 am on Jan 31, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you do go for fixed font sizes on screen, the best way to go is using px for the units, and not pt. Pixels are a monitor measure and points are a print measure. You may get uneven on-screen results cross-browser if you use points.

nafmo

10:02 am on Jan 31, 2004 (gmt 0)

10+ Year Member



tedster, I'd say the exact opposite is better. Pixels are not very good for font sizes, considering that the size of a pixel varies greatly depending on the pixel density of a screen. I'd go for points, which is a length unit and can easily be calculated for a screen if you know the size or the dpi of the screen.

But best is of course to base the font sizes on relative units, and never to decrease the size below 100% for normal text.

WeirdoPL

9:44 pm on Feb 1, 2004 (gmt 0)

10+ Year Member



One more question...
What are "em"s and "ex"s?
And what measure would approximately be equal to size="+3"? (that would give me a good start point for thinking about converting other <font> objects into CSS).

Ant thank You for not making me search for this in CSS reference. It's still a bit awkward to me... But I hope to learn how to move around it sooner or later.

choster

6:24 am on Feb 2, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



An "em" is a typographical unit equivalent to the width of the capital letter "M" in a given typeface. An em dash (&#8220; sometimes represented by two hyphens, --) is the long dash one em wide.

For the purposes of CSS, one em also equals the height of the font, including the ascenders (the parts that stick up above the rest of certain letters, like b or f) and descenders (the parts that stick below in letters like p or y). In other words, font-size:100% equals font-size:1em.

An "ex" is a typographical unit equivalent to the height of the lowercase letter "x." Support for exes is not as consistent as support for percentages or ems.

<font size="3"> is the basefont size for most browsers-- essentially 100%/1em, depending on the typeface. You can experiment yourself by comparing an unstyled paragraph of text against various styled paragraphs.

See www.thenoodleincident.com/tutorials/box_lesson/font/ for one study of font size renderings.