font:10pt ??

[Walter Metzger]

I have a little problem in my styles.css (the last one with validator pro!)

font:10pt verdana, arial, helvetica, sans-serif;

other places in my file with 14pt and 20pt etc.

I get the message from validate (Accessibility):

Relative units rather than absolute units should be used in style sheet property values (and also in HTML/XHTML attribute values). If absolute units are used, then make sure that the rendered content is usable. [P2, 3.4]. Relative units include "em" and percentage lengths. Avoid using absolute units like "cm", "in", "mm", "pc", and "pt".

Sorry, I do not understand how I can change.
Can I get a help please?

Greetings
Walter

[MikeGale]

A couple of pointers, in no special order. (I don't know enough of your situation to do more.)

1) The CSS might look like "font-size: 200%;"

2) I think a good checker and editor for CSS are important. (For checking I've found, in the past, that CSE finds things that nothing else can. An editor with property windows and syntax highlighting makes the job easier.)

3) If you have existing work with fixed sizes, you need to work through the CSS design systematically. You might need to change and likely improve it.

4) People with vision difficulties are going to be pleased that you thought of them. (They can now change font size and actually read the web site.) People wanting a nice compact print are also likely to be pleased. (They can now print with a smaller font which gives them less pages.)

If you have an existing stylesheet with a lot of classes it may be possible to simplify the CSS design.

For the actual conversion I'd take 10 or 11 point to 100% (if % is the system you're using). If you pick 10 then the size for 14 is 14/10*100 or 140%. Best to try it and see. Different browsers may act differently, so check on several.

(There is an old and ongoing argument about the best size for body text, suggestions range between 10 and 12 points. In reality you've just got to check it with your chosen fonts, one font at 10 point can look a totally different size from another at 10.)

[Walter Metzger]

Thank You MikeGale for the answer,

I did not understand all what You wrote. But I tried und looked to examples in Google.

I made in my styles.css the following:

font:10pt verdana, arial, helvetica, sans-serif;
change to
font:13px verdana, arial, helvetica, sans-serif;
also at other places font:12pt to font:16px and font:20pt to font:24px.

Result:
a) the type is (nearly 100%) the same between pt to px, testing Preview
in IE, Mozilla Firefox and Opera,
b) there is now no message from Tools/Validate.

Did You mean this, or have I more to do?
Greetings
Walter

[Albert Wiersch]

Hi Walter,

MikeGale made some good points. Also...

Instead of using 10pt, 14pt, and 20pt, try using values like 1em, 1.2em, 1.5em, 2em, etc.

More information:
http://www.w3.org/TR/CSS21/syndata.html#em-width

[Albert Wiersch]

I made in my styles.css the following:

font:10pt verdana, arial, helvetica, sans-serif;
change to
font:13px verdana, arial, helvetica, sans-serif;
also at other places font:12pt to font:16px and font:20pt to font:24px.

While "px" is a relative unit, I would suggest trying "em" instead.

[MikeGale]

Hi,

As Albert says px is still an absolute size (scaled to your monitor resolution).

Relative sizes are em and %.

So your CSS might look like:

h5 {
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
font-size: 117%;
}

or

h5 {
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
font-size: 1.17em;
}

In the early days when CSS was first getting going one of the browsers (I can't remember which) made a complete mess of the em calculation. Since then I have always used the % way of doing things.

I believe the best way to get a really good feel for this is experiment with a real page, changing how fonts are sized and altering the size.

(When I did that, I created a realistic page which changed itself, using javascript and CSS.)

[Walter Metzger]

Thank You MikeGale and Albert,

for Your answers, to get a better and right CSS for me.
(Excuse me please, when I write so much)

I have done in my styles.css on my local PC (only parts with fonts)

.all {
padding:0;
margin:0;
/* font:10pt verdana, arial, helvetica, sans-serif; */
/* font:13px verdana, arial, helvetica, sans-serif; */
/* font:0.8em verdana, arial, helvetica, sans-serif; */
font-family:verdana, arial, helvetica, "lucida handwriting", sans-serif;
font-size:0.8em;
background: url(bg_chamois_1.gif) #46617F no-repeat 200px 0px;
}

.menuefeld a {
text-decoration:none;
color:#ffffff;
margin:12px;
padding:2px 0 2px 0;
/* font:12pt verdana, arial, helvetica, sans-serif; */
/* font:16px verdana, arial, helvetica, sans-serif; */
font:1.3em verdana, arial, helvetica, sans-serif;
}

.menuefeld a.aktiv {
text-decoration:none;
color:#000000;
margin:12px;
padding:2px 0 2px 0;
/* font:12pt verdana, arial, helvetica, sans-serif; */
/* font:16px verdana, arial, helvetica, sans-serif; */
font:1.3em verdana, arial, helvetica, sans-serif;
}

.menuefeld a:hover {
text-decoration:none;
color:#000000;
margin:12px;
padding:2px 0 2px 0;
/* font:12pt verdana, arial, helvetica, sans-serif; */
/* font:16px verdana, arial, helvetica, sans-serif; */
font:1.3em verdana, arial, helvetica, sans-serif;
}

.stil1 {
/* font:20pt "lucida handwriting", sans-serif; */
/* font:24px "lucida handwriting", sans-serif; */
font:1.9em "lucida handwriting", sans-serif;
}

I tried first -pt-, than -px-, at last -em-
and I feel now content with the result of the type in my browsers.

.all is used in <body class="all">
I have seen, when I change -em- in .all, I change the result from all the following special fonts.

Now my 3 questions:

1.
When I had defined
font:0.8em verdana, arial, helvetica, sans-serif;
and changed 0.8em to another, there was also another result
for "lucida handwriting"

Is this wanted and right?

2.

As I use today two families for
1. font:1.3em verdana, arial, helvetica, sans-serif;
2. font:1.9em "lucida handwriting", sans-serif;

I defined both families in one line (.all):

font-family:verdana, arial, helvetica, "lucida handwriting", sans-serif;

and

font-size:0.8em;

Is this the right way? Or is it possible to get one central family-definition only for verdana etc, and the other for "lucida handwriting"?

3.
Is the value "117%" MikeGale wrote, an exampelvalue or an absolute tip?

Greetings
Walter

[MikeGale]

1) I don't understand the question.

2) I would not add lucida handwriting here, it doesn't fit (not a sans font), it won't be seen by users (too far into the list), and I suspect few machines have it.

3) I don't really understand the question but here's an example of a sheet which is probably almost equivalent to yours:

.all {
background: url(bg_chamois_1.gif) #46617F no-repeat 200px 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 80%;
margin: 0;
padding: 0;
}

.menuefeld a {
color: #ffffff;
font: 130% verdana, arial, helvetica, sans-serif;
margin: 12px;
padding: 2px 0 2px 0;
text-decoration: none;
}

.menuefeld a.aktiv {
color: #000000;
font: 130% verdana, arial, helvetica, sans-serif;
margin: 12px;
padding: 2px 0 2px 0;
text-decoration: none;
}

.menuefeld a:hover {
color: #000000;
font: 130% verdana, arial, helvetica, sans-serif;
margin: 12px;
padding: 2px 0 2px 0;
text-decoration: none;
}

.stil1 {
font: 190% "lucida handwriting", "Monotype Corsiva", Script, cursive;
}

In this case I have added a couple of cursive alternates to your handwriting, though I suspect they are also likely to fail on most machines (not installed). (You could research the most widely installed cursive fonts and change the list accordingly.)

[Walter Metzger]

Thank You MikeGale for the extensive answer,

You really make me better in CSS.

The (perhaps) last questions:

Why do you prefer per cent '80%' instead em '0.8', I get the same result
with both?

**me private seeing in WWW: 99% german css-files use most -pt-,
less -px-, and very rarely -em- or -%-**

I have now understand the differences arial, lucida ..., sans-sherif etc.
And I found thank Your help good tips at german sites also (!!!).

But why is ist neccesary or suitable to define "one" font-family and one "font-size" global (in .all) instead of defining
only at every other place font:... (as .menuefeld a etc.)

Your declaration at -.stil1-
font: 190% "lucida handwriting", "Monotype Corsiva", Script, cursive;
did give a message by validator,
I changed in
font: 190% "lucida handwriting", "Monotype Corsiva", cursive;

I make much propaganda to my friends for CSE HTML Validator Pro as excellent checker and editor for CSS and HTML.

Greetings
Walter

[MikeGale]

Why do you prefer per cent '80%' instead em '0.8', I get the same result with both?

See previous message.

**me private seeing in WWW: 99% german css-files use most -pt-, less -px-, and very rarely -em- or -%-**

Most content on the web is badly designed in some ways, it's not just German sites. It's most sites. (People with vision difficulties must go nuts with the bad manners of it all.)

But why is ist neccesary or suitable to define "one" font-family and one "font-size" global (in .all) instead of defining only at every other place font:... (as .menuefeld a etc.)

I don't know the purpose of your "all" class, so I can't answer that.

font: 190% "lucida handwriting", "Monotype Corsiva", Script, cursive;

Script is a font I picked in a CSS editor as one that is clearly cursive. CSE seems not to recognise it. On further investigation I find it's an MS font in the old "FON" format. (Not TrueType or OpenType.) It appears to date back to 1991 or 1992 though my installated version may have been re-released in 2003. I can't insert an image of it in here, but trust me, it's not a font to use in real life on a web page. (It was just an illustration.) It's a "joined up writing" sort of font, maybe inspired by Copperplate.

[Walter Metzger]

Thank You MikeGale for the answer,

we can now end the dialog .

As I had typed parts (fonts) of my styles.css, I type now the last state:

.all {
background: url(../anlage2/bg_chamois.gif) #46617F no-repeat 200px 0px;
font-family: verdana, arial, helvetica, sans-serif;
margin: 0;
padding: 0;
}

.inhalt {
background: #FFFFCD;
border: 0 solid black;
color:#000000;
font-size: 0.8em;
margin: 0 0 0 200px;
padding: 30px;
}

.menuefeld {
border-bottom: 1px solid black;
font-size: 1.05em;
width: 200px;
}

.menuefeld a {
color: #ffffff;
margin: 12px;
padding: 2px 0 2px 0;
text-decoration: none;
}

.menuefeld a.aktiv {
color: #000000;
margin: 12px;
padding: 2px 0 2px 0;
text-decoration: none;
}

.menuefeld a:hover {
color: #000000;
margin: 12px;
padding: 2px 0 2px 0;
text-decoration: none;
}

.stil1 {
font: 1.9em "lucida handwriting", "Monotype Corsiva", cursive;
}


(.stil1 will be changed, I look for another family with cursive)
(.all is used gobal for every page in <body>)

There is now another look as "Posted: Fri Mar 14",
I am very content for Your great help.
Thanks to Albert too.

Greetings
Walter

[MikeGale]

A final note.

When choosing your fonts it's useful to check how many people have it installed.

This link may be useful:
http://www.codestyle.org/css/font-family/index.shtml

If you use it a few things to be aware of:

1) Cursive fonts are not widely installed. Monotype Corsiva is fairly common on Windows at something like 82%, Lucida Handwriting is at 45%. (Personally, if I can't guarantee 85% coverage I usually don't bother.)

2) There may be machines out there without any cursive fonts.

3) The consolidated results from the site above may be skewed. Your user base may not be like that. (i.e. treat the aggregated data with caution.)

4) Many of the results (Jan 2004 to April 2007) are based on user identified fonts, the more recent ones are based on the Java applet. The user identified results have problems, the program identified fonts are, I'm sure, of excellent quality. Maybe 6 out of 7 data points may be from the human identified data so treat the results with some caution.

5) It's interesting to see that the new fonts in the consolas family (Calibri, Consolas, Constantia...) are showing up at about 35%. This is welcome news, they are excellent fonts.

You could replace your .all class by defining settings for your body directly in the CSS.

[Walter Metzger]

Thank You MikeGale for the very good link,

so i could quickly decide to take Comic Sans MS (in cursive),
now in styles.css:

.stil1 {
font: 2.2em "Comic Sans MS", cursive;
}

I write in html-file
<div class="stil1"><em>Welcome ...</em></div>

You say:
You could replace your .all class by defining settings for your body directly in the CSS.

I wrote, class .all is used global (not gobal) for every page in <body>,
as: <body class="all"> in each page (soon more than 30).
When I set for body directly, I have later to do any change in each page.
Or I do not understand You?

Greetings
Walter

[MikeGale]

You can define the style for body in your CSS.

It looks like:

body {
background-color: *;
font-family: *;
...
}

Then you have no need to use class="all".