Font family

[Rafal 'Raf256' Maj]

Thanks for all suggestions about font-size.

As for font-family,

1) typical text (most text on page) - sansserif (and declared as substitues
- arial,times,verdana)

2) headers text (for h1,h2) - I find sansserif not so nice when it has big
font-size (it's to "thin", even whet font-weight is bold), what are You
using instead?
Maybe - font-family:arial,verdana,sansserif,times is a good idea?

 

[Beauregard T. Shagnasty]

Quoth the raven named Rafal 'Raf256' Maj:

Thanks for all suggestions about font-size.

As for font-family,

1) typical text (most text on page) - sansserif (and declared as substitues
- arial,times,verdana)

Nooooo... just use { font-family: sans-serif; }
[don't forget the dash]
DON'T mix serif and sans serif fonts together:
arial and verdana are sans, times is serif!
Don't declare "substitutes."

2) headers text (for h1,h2) - I find sansserif not so nice when it has big
font-size (it's to "thin", even whet font-weight is bold), what are You
using instead?

Most of my sites do not specify a font-family for <hx>.

h1 {
background-color: transparent;
color: #00008b;
font-size: 150%;
text-align: center;
}
h2 {
background-color: transparent;
color: #00008b;
font-size: 140%;
}

On one site, not a business site, I go wild for <h1>:

h1 {
background-color: transparent;
color: #00008b;
font-family: "Comic Sans MS", cursive;
font-size: 170%;
}
h2 and the rest are just descendants of body.

Maybe - font-family:arial,verdana,sansserif,times is a good idea?

No.....

 

[brucie]

1) typical text (most text on page) - sansserif (and declared as substitues
- arial,times,verdana)

if you just use sans-serif you get the look you want and the visitor
gets the font they want for that generic family. win-win

 

[Toby A Inkster]

Maybe - font-family:arial,verdana,sansserif,times is a good idea?

No. For three reasons.

First let's get our definitions straight. I'm not sure you know what we
all mean when we say "Serif" and "Sans Serif".

Serif and Sans Serif aren't specific fonts -- they are *groups* of fonts
that share common features.

Serif fonts include Times New Roman and Georgia.

Sans Serif fonts include Arial, Helvetica and Trebuchet MS.

Serif fonts have little extra lines at the end of the main lines of the
font. To understand the difference it is best to look at a picture.
http://www.goddamn.co.uk/tobyink/scratch/what-is-serif

So, now we understand the concepts of Serif and Sans Serif.

Imagine that for the main body of text on our website, we want to use
Trebuchet MS. Despite being made by Microsoft, it's actually rather
elegant, quite in contrast with the garish Windows XP! But I digress...

So in our CSS we specify this:

body {
font-family: "Trebuchet MS";
}

Now, on browsers that have access to the Trebuchet MS font (about 88% of
computers do, according to CodeStyle <URL:http://www.codestyle.com/>) our
body text will display as Trebuchet MS.

However, on those 12% of computers without Trebuchet MS, the browser will
have to use its default font instead. (You have no control over what this
is. It is often Times New Roman, but certainly not always.) This may ruin
our design, as the default font might look nothing like Trebuchet MS.

So we specify some fall-back fonts:

body {
font-family: "Trebuchet MS", "Helvetica", "Arial";
}

This means that the browser should try to display the text in Trebuchet
MS, and if that fails try Helvetica, and if that fails try Arial.

Why have I chosen Helvetica and Arial? Because they look similar to
Tebuchet MS. They're not the *same*, but they're all Sans Serif fonts, so
have a lot of features in common.

Our CSS style above should cover *most* computers. If the computer doesn't
have Trebuchet MS installed, it is likely it has at least one of Helvetica
or Arial installed.

However for those few computers that don't, the CSS specification gives
designers a great solution! It defines some special "generic" font names
that mean "choose any font from this group".

So we can use:

body {
font-family: "Trebuchet MS", "Helvetica", "Arial", sans-serif;
}

This means that the browser should try to display the text in Trebuchet
MS, and if that fails try Helvetica, and if that fails try Arial, and if
even *that* fails, then it should use whatever damn Sans Serif font it can!

Similarly, for some other bit of text we might want to use:

div.specialtext {
font-family: "Times New Roman", serif;
}

This means use Times New Roman if possible, but otherwise use any damn
Serif font.

Now, coming back to your original question, why is the following a bad
idea?

font-family:arial,verdana,sansserif,times;

The first reason, is that there should be a hyphen in sans-serif.

The second reason is that Times will never be used, because the generic
font sans-serif means "use whatever sans serif font you want" (and every
computer I've seen in a long while has some sort of sans serif font
installed), so the browser will never get back that far.

The third reason is that you're mixing Serif and Sans Serif fonts. You
clearly don't want the little curly end lines that are present in Serif
fonts (see my picture again) -- this is why you have chosen Arial as your
first font. So why do you specify Times as a fallback? Times has the
little curly lines.

I hope this answers your question sufficiently.

 

[David Dorward]

Now, coming back to your original question, why is the following a bad
idea?

font-family:arial,verdana,sansserif,times;

The first reason, is that there should be a hyphen in sans-serif.
The second reason is that Times will never be used
The third reason is that you're mixing Serif and Sans Serif fonts.

.... and the fourth reason is that Verdana looks bigger then Arial, so it
doesn't make a good substitute for it even within the group of sans-serif
fonts.