setting font sizes?

[Paul Furman]

I'm not following the debates in the CSS Question thread between using
px & pt. I've also seen +1 -1 used. Pt is presumably points which
doesn't mean anything to me, px is pixels which makes sense though I
don't know what the default is.

Can someone clarify the basics here...

Thanks!

PS I use Large Fonts on my 21" monitor at 1200x1600 pixels with windows
2000 so I probably have a warped perspective on all this.

 

[Jukka K. Korpela]

I'm not following the debates in the CSS Question thread between
using px & pt.

Try reading a primer on CSS then.

I've also seen +1 -1 used.

Yes, there are lots of integers.

Pt is presumably points
which doesn't mean anything to me, px is pixels which makes sense
though I don't know what the default is.

Right, mostly pixels only "make sense" to people who don't understand
the issues.

Can someone clarify the basics here...

Don't set the font size.

After understanding this, read a CSS primer for further information.

PS I use Large Fonts on my 21" monitor at 1200x1600 pixels with
windows 2000 so I probably have a warped perspective on all this.

I'm using my forefingers and just a small part of my cortex to type
this, so I might miss your reason for telling that.

 

[David Dorward]

I'm not following the debates in the CSS Question thread between using
px & pt.

http://css-discuss.incutio.com/?page=FontSize

 

[Paul Furman]

Paul Furman wrote:




http://css-discuss.incutio.com/?page=FontSize

Thanks. It looks complicated with loads of opinions. I didn't even see a
definition of "em"... and had never heard of that one.

 

[Paul Furman]

Jukka K. Korpela wrote:

I'm using my forefingers and just a small part of my cortex to type
this, so I might miss your reason for telling that.

I don't know how this effects the way I'm seeing/designing web pages.
Most pages are legible but a few big name web sites still appear
illegibly small to me on this setup. I wonder if I'm designing things
way to big and clunky with my settings.


Most of the reference material I've used doesn't explain things but
simply lists options. Probably lots of clueless folk out there like me
since I see px & pt in other's code often.

 

[David Dorward]

I didn't even see a definition of "em"... and had never heard of that
one.

http://www.w3.org/TR/CSS2/syndata.html#length-units

 

[Steve Pugh]

I'm not following the debates in the CSS Question thread between using
px & pt. I've also seen +1 -1 used. Pt is presumably points which
doesn't mean anything to me, px is pixels which makes sense though I
don't know what the default is.

Can someone clarify the basics here...

The CSS spec defines four basic means of specifying font sizes.

1. Physical units (in, cm, mm, pt, pc - inch, centimeter, millimeter,
point = 1/72 inch, pica = 1/6 inch).
pros - familiar from print based media.
cons - not based on the user's chosen default. not really suited to
screen media.

2. Pixels (the CSS defines a pixel as an angular measure, but all
current browsers use screen pixels instead).
pros - precise control (but see below), well implemented across
browsers.
cons - not based on the user's chosen default. Can not be resized on
the fly by Windows IE users.

3. Keywords (a range from xx-small to xx-large).
pros - simple to use. based around the user's chosen default.
cons - no fine contral. IE has a bug whereby it thinks that small =
browser default (fixed in IE6 if the doctype used triggers Standards
Compliant mode).

4. Relative units/keywords (percentage, em, keywords 'smaller' and
'larger'; 1 em = the 'current' height of the font, so on the root
element 1em = user's chosen default).
pros - based on the user's chosen default.
cons - unpredicatable as the author can't know what the user has
chosen. Some browser bugs (IE with ems, older Opera with %). Need to
be used with care as the can multiply in nested elements, e.g. 60% *
60% = 36%!

PS I use Large Fonts on my 21" monitor at 1200x1600 pixels with windows
2000 so I probably have a warped perspective on all this.

This is the one thing that maks IE change the size of pixel sized
text. Your default font size is about 20 screen pixels opposed to the
standard 16 screen pixels (BTW various Mac browsers use 12, 14 or 16
pixels).
The font size settings inside IE itself have no effect on pixel sized
text which is one reason why some of us dislike them.

You will be seeing a different relationship between text (however
sized) and images than other people. On some sites the authors try to
enforce a set relationship for design reasons, this is the main reason
to use pixel sized text, and one of the core issues of the font size
debate is whether trying to enforce that relationship is a good or bad
thing.

Steve

 

[Richard]

Thanks. It looks complicated with loads of opinions. I didn't even see a
definition of "em"... and had never heard of that one.

An "em" is supposed to be the width of one "m" as used by that font.
I've seen mixed results using it.

 

[Richard]

I'm not following the debates in the CSS Question thread between using
px & pt. I've also seen +1 -1 used. Pt is presumably points which
doesn't mean anything to me, px is pixels which makes sense though I
don't know what the default is.

Can someone clarify the basics here...

PS I use Large Fonts on my 21" monitor at 1200x1600 pixels with windows
2000 so I probably have a warped perspective on all this.

Most browsers, specially IE, use a system of fixed font sizes and to make
life easier, they use +1 through +6, or very small to extra large.
If you turn off your fixed font settings if using IE, you can see what these
numbers refer to.
As I use a trackball mouse with scroll wheel, I can press "ctrl" then turn
the scroll wheel to make the text larger or smaller as desired.

"px" is short for pixels as you guessed.
"pt" is point as in original hard copy type point.
Old typewriters usually used a common Courier 10 pt font as a reference.

800x600 screen resolution means 480,000 pixels inhabit the screen.

 

[Steve Pugh]

An "em" is supposed to be the width of one "m" as used by that font.

1. No, it's the width of an M not an m. May or may not be the same in
any given font.
2. In typographic terms that's the historic definition, today the em
is defined as the height of the font.
3. In CSS the em is always defined as the height of the font.

I've seen mixed results using it.

Maybe if you understood what it was...

Steve

 

[Paul Furman]

2. Pixels (the CSS defines a pixel as an angular measure, but all
current browsers use screen pixels instead).
pros - precise control (but see below), well implemented across
browsers.
cons - not based on the user's chosen default. Can not be resized on
the fly by Windows IE users.




This is the one thing that maks IE change the size of pixel sized
text. Your default font size is about 20 screen pixels opposed to the
standard 16 screen pixels (BTW various Mac browsers use 12, 14 or 16
pixels).
The font size settings inside IE itself have no effect on pixel sized
text which is one reason why some of us dislike them.

You will be seeing a different relationship between text (however
sized) and images than other people. On some sites the authors try to
enforce a set relationship for design reasons, this is the main reason
to use pixel sized text, and one of the core issues of the font size
debate is whether trying to enforce that relationship is a good or bad
thing.

Ugh, so I really am seeing things differently than the vast majority of
users. Is there an emulator out there that I can use without resetting
my display settings?

If I understand, fixed pixels would be approporiate if say I wanted
captions to fit under pictures without wrapping or a very graphic effect
of some sort but otherwise I should stick with relative sizing because
people with imperfect vision won't be able to see things if I set them
too small. Plus my pixel settings are all wrong with my big fonts
setting! Ems just sound weird and require tricks to downsize so percent
makes more sense to me. Ems also showed the biggest discrepancy in
Mozilla in this test I did:
http://www.edgehill.net/large-font-test
That page has the 101% body trick (commented out) but that just messes
everything up. PX & PT are poo-poohed on the pages at
http://css-discuss.incutio.com/?page=FontSize and EX was way off in
Mozilla also so that leaves me liking percent. It even makes sense! EMs
don't make any sense and didn't work in my test.

PS I don't know what I was doing with +1 -1 that I copied from somewhere
but it was way off in my test and apparently EX is the correct format
for that approach.

PPS I also learned from the reading today that <font> is a "bad" tag and
shouldn't be used. If that's true, how do I set font size mid-stream?
<div> makes a line break and the class tag is sort of chunky. On a
related note, I hate h1, h2, li, etc because of the huge paragraph break.

 

[PeterMcC]

see a > definition of "em"... and had never heard of that one.


An "em" is supposed to be the width of one "m" as used by that font.

No, no, please, no... not again... please...

 

[Adrienne]

I also learned from the reading today that <font> is a "bad" tag and
shouldn't be used. If that's true, how do I set font size mid-stream?
<div> makes a line break and the class tag is sort of chunky. On a
related note, I hate h1, h2, li, etc because of the huge paragraph
break.

<font> is not a "bad" thing, it's a depreciated thing. To change font
properties midstream, use the <span> element, it's inline. For example:
This is <span style="background-color:#000,color:#fff">white text on a
black background</span>.

Class is not a tag, it is an element attribute. It is also not as chunky
as it seems. As a matter of fact, the class attribute will definately put
your pages on a diet, for example: This is <span class="blackwhite">white
text on a black background</span>. can be used over and over again, and if
it is defined in an external stylesheet, then all pages can use it that
link to that sheet.

Heading elements, <h1-6> can be styled any way you want them. Reduce the
margin to reduce the paragraph break, for example: <h1 style="margin:0">
will give a h1 with no margin at all. Play with the margin until you feel
comfortable. Additionally, you may want to change the font size. I use
140% for h1, 130% for h2, 120% for h3, etc.

 

[Paul Furman]

<font> is not a "bad" thing, it's a depreciated thing. To change font
properties midstream, use the <span> element, it's inline. For example:
This is <span style="background-color:#000,color:#fff">white text on a
black background</span>.

Class is not a tag, it is an element attribute. It is also not as chunky
as it seems. As a matter of fact, the class attribute will definately put
your pages on a diet, for example: This is <span class="blackwhite">white
text on a black background</span>. can be used over and over again, and if
it is defined in an external stylesheet, then all pages can use it that
link to that sheet.

Heading elements, <h1-6> can be styled any way you want them. Reduce the
margin to reduce the paragraph break, for example: <h1 style="margin:0">
will give a h1 with no margin at all. Play with the margin until you feel
comfortable. Additionally, you may want to change the font size. I use
140% for h1, 130% for h2, 120% for h3, etc.

Thanks, that's real helpful! I found this page to explain further based
on those clues:
http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.4