View Full Version : font-family

Jan 22nd, 2003, 08:15 AM
The CSS validator returned this error, i don't know whats wrong.

font-family: You are encouraged to offer a generic family as a last alternative

this is what im using, am i missing something?

* {
font : 9pt "Courier New", Arial, Verdana, Helvetica;

Jan 22nd, 2003, 08:28 AM
Please bear in mind that I know little about CSS, but it could be that the validator wants you to use a generic family like this:

H1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 17px; color: #523A14; text-align: center}


Jan 22nd, 2003, 08:35 AM
well evidently you know more than me ;)
it worked thanks, i didnt know what a generic family was hehe

Jan 22nd, 2003, 08:43 AM
Lucky shot in the dark! And you're welcome! *S*

Jan 22nd, 2003, 03:41 PM
There are five generic font families -

serif (such as times new roman)
sans-serif (such as arial)
cursive (such as comic sans ms)
fantasy (such as gothic)
monotype (such as courier)

You should always end a list of fonts with one of these, as Deanna said.

But an added note - never finish with a generic "cursive" because in Win95 the default cursive font is WingDings ! Also take care with monotype and pixel sizes - the type will not be the pixel size you specify - larger or smaller depending on your browser - so you shoudn't rely on being able to control the size of it (well, actually, you shouldn't rely on be able to control text size *at all*)

Jan 22nd, 2003, 05:02 PM
so "X" the size for Courier??
why not font size manipulation for any others?

i may just end up typing in an image or something ...

Jan 23rd, 2003, 07:21 AM
Yep...Helvetica (Swiss) isn't generic...Big help, eh?

Interesting about the comic sans in Win95...

Jan 24th, 2003, 02:27 AM
why is it only monotype that varies?
are you guys telling me no text sizing just because of the browser settings? to make the page more friendly?

Jan 24th, 2003, 04:00 PM
I'd recommend setting a base font size in the body and then using a proporational unit for setting size in other elements.

For example:

body {
font-size : large;
div {
font-size : 1em; //this does not change the font size
h1 {
font-size : 2em; //this doubles the font size
span {
font-size : .5em; //this halves the font size

You could also use percentages : 100%, 200%, 50% if that seems more intuitive.

Using styles like this allows you to control relative size for elements while still allow the user to vary the basic font size for the page in IE (and since so much of the world knows only IE ...).

Jan 24th, 2003, 04:13 PM
Yeah, that's the point - you should never use px or pt font sizes, because in IE these are non-resizeable. % are the easiest to deal with, I find - they give good control over the initial size, while still allowing for resizing.

As for why monospaced fonts are different sizes ... I dunno; it's just an observation.

Jan 24th, 2003, 05:07 PM
Here's a little image I cooked up to help understand why mono-spaced fonts appear different at pixel sizes. This also explains a few other things, like why Arial always looks bigger than Times.


This was a screenshot from IE6 with 50px fonts, all using just the generic typeface setting (serif, sans-serif, and monospace)

As you can see, the relative cap-height of the monospaced font is just a bit higher than the x-height of Arial. In fact, you can see that the monospace ascenders + x-height is taller than it's cap-height. Also, you can see that the monospace descender is a bit shorter than that of the other two.

So, it would appear that monospace fonts by default have more leading built in to the typeface at the top and bottom. The is most likely done in a attempt to make the monospaced letters appear as 'square' as possible and provide more space between lines to balance the fact that they create more space between characters.

As I said above, this picture also illustrates why Arial always seems bigger than Times, because the x-height is bigger, and Arial's cap-height, ascenders, and descenders reach the full height of the font-size, whereas Times' cap-height and ascenders don't quite measure up (pun?).

Now, what can we do? Well, my next picture


Is the same text with a few changes. The sans-serif is 50px. The serif is set to 95% and the monospace is set to 115% (of 50px). This gives us an almost uniform appearing font-size. But be not fooled, they are different font-sizes.

As you can see, most serifed fonts consistently have a shorter x-height than the others, while sans-serif fonts have the tallest x-height. Per the rules of typography each of these typefaces accurately potrays a cap-height that is 75% of the font-size (in this case, 37px)

Jan 24th, 2003, 05:48 PM
thanks for clearing this up for me guys
i didnt realize this much beetle, i appreaciate the tutorial

Jan 24th, 2003, 06:34 PM
Nice one beetle; that's really interesting.

Jan 24th, 2003, 06:45 PM
Originally posted by brothercake
Nice one beetle; that's really interesting. Thanks, I guess I did learn few things in college after all.

Pop Quiz: What is the etymology of "leading" in regards to typography?

Jan 24th, 2003, 06:50 PM
I thought entymology had something to do with bugs? :D

Jan 24th, 2003, 07:03 PM
Originally posted by Catman
I thought entymology had something to do with bugs? :D Acutally, that's entomology :D

Jan 24th, 2003, 07:35 PM
Nice diagram, beetle. You gave me a refresher course for you see, I am a closet font junkie. Well, not just fonts as we pilfer them from the web and let them collect dust on our hard drives *S*, but in typography in general. In answer to your pop quiz ....

Leading is a measure of vertical space between lines. The term is a legacy from the days of hot type, when extra lead was added to increase line space. Thus 12/16 is sometimes referred to as "four points lead." The absence of extra leading is called "setting solid" (for example, 10/10). Tighter line spacing is called "negative leading"; it is sometimes seen in short texts in advertising, in logos, or in avant-garde design that flouts legibility. A rough rule of thumb for leading conventional continuous text is 20% of type size (thus 10/12), but there are many considerations for particular cases:

The longer the measure (column width), the more the lead.
The greater the x-height, the more the lead.
The looser the word spacing, the more the lead.
The darker the face, the more the lead
The larger the type size the more the lead
Reference material: less lead; continuous reading: more lead.
Serifed face: less lead; san-serif face: more lead
Old style face: less lead; modern face: more lead

The elements of a coherently designed work should be leaded in such a way that the basic gridline can be re-established following interruptions in the continuous text (in other words, if an extract, for example, is more tightly leaded than the main text, it should be surrounded by sufficient extra space to get back the the main grid, so text on that facing pages will align.

How'd I do? Did I pass?


OK, OK, so I cheated: http://www.lanset.com/bookfolk/typehead/leading.htm, but I knew what it meant, honest I did. It's just that this guy said it better. ;)

Jan 24th, 2003, 07:45 PM
Yes, you passed ;)

For those of you that don't know what hot type is or still don't understand exactly what leading is, this page (http://www.nlc-bnc.ca/presses/t15-450-e.html) explains it pretty well.

Mar 5th, 2003, 04:04 PM
Originally posted by beetle
Pop Quiz: What is the etymology of "leading" in regards to typography?

Does it come from printing, where the space was created with small strips of lead ?

Mar 5th, 2003, 04:06 PM
Ya, that's pretty much it.

Popped in here a bit late, eh bcake? :p

Mar 5th, 2003, 08:50 PM
you would fail miserably in jeopordy. :D
what is the font a percentage of?
i have an idea, but im not exactly sure why one font % affects another font %

Mar 5th, 2003, 09:02 PM
Font percentage is inherited from the element's parent's font-size.

So, if you specify a base font size like this
body {
font-size: small;
}then all elements that are children of the BODY will go off that. So, add an H1 rule
h1 {
font-size: 200%;
}H1 elements will now be twice the size of regular text. What if you wanted part of your H1 tag to be regular size? As in this HTML
<h1>Heading <span>with regular text</span></h1>How can you get the text in that SPAN to be the base size? Remember the SPAN is a child to the H1, not the BODY, and since we've specified a new font-size for the H1 elements, we need to go off that for our new percentage
h1 span {
font-size: 50%;
}Since we doubled the base to get our H1 size, we need to halve it to get back to the base size for our SPAN.

Got that? :D

Mar 5th, 2003, 09:09 PM

Mar 5th, 2003, 09:10 PM
Originally posted by beetle
Popped in here a bit late, eh bcake? :p

Er ... so it would seem :D Dunno how I missed the rest of the thread ...

Aug 27th, 2003, 12:14 AM
etymology of leading:
from the english name of the metallic element, lead (Pb).
the term leading came about because the spacers used in typesetting were made of lead.
etymology of lead
(n.) - "metal," O.E. lead, from W.Gmc. *lauda. The name and the skill in using the metal were both borrowed from the Celts (cf. O.Ir. luaide). Adjective form leaden is a relic of O.E.