Css Tutorial : Be Careful with Fonts

Remember that the alternative fonts suggested here need to be used with caution. Ensure
sensible alternatives are listed in the font-family sequence, and remember that a font displayed
on a Mac can look significantly different, or even be unavailable, on a PC. It is advisable to edit
your font sequences at the testing stage to see how your alternative fonts work for you. For
example, Georgia may be your second-choice font, but be sure it suits your design should the
first choice be unavailable.

Css Tutorial : Web-Safe Fonts Alternative

It’s time to act like the rebellious tutor who throws course books out of the window and encourages
the group to “push the envelope.” In truth though, many designers are simply pursuing unsung
alternatives that can sensibly be added to the accepted list of available web fonts. The gamble
here is lessened thanks to the ability to suggest backup fonts should the preferred one be
unavailable. Learning CSS can be challenging enough without being forced to work within
difficult confines, so I encourage you to flirt with some of the following fonts, be they classic
or well established, or newcomers that have shown their true worth on screen.
We’ll look at the merits of each of the fonts displayed in Figure 4-4, followed by suggested
family names and generic names to ensure your design isn’t compromised when that font is
unavailable. Lucida Grande and Lucida Sans Unicode
Lucida Grande comes preinstalled on Mac OS X, and Lucida Sans Unicode comes with
Windows XP, the latter being a very close match to the former. These fonts are a brilliant
Verdana alternative, being supremely legible and extremely refreshing to eyes tired of typical
web fonts. Note that this author has used Lucida Grande on probably 60% of all the sites he
has built!
Suggested declaration: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif

Futura
Futura is a good contemporary-looking font, comes preinstalled on Mac OS X, and is included
with many Adobe applications. It is a great sans serif font that works particularly well at larger
font sizes (so great for headers).
Suggested declaration: Futura, Helvetica, Arial, sans-serif

Helvetica Neue
A redrawn version of Helvetica that has better separation between characters across its various
guises, Helvetica Neue (pronounced “noye-er”) comes preinstalled with most platforms and
software. It’s a very stylish font that looks great in any situation.
Suggested declaration: "Helvetica Neue", Helvetica, Arial, sans-serif

Gill Sans
Gill Sans is classified as a humanist sans serif, making it very legible and readable in text and
display work. The condensed, bold, and display versions are excellent for packaging or posters,
and this description translates very well to the screen. Gill Sans exudes a modern feel due to its
clear, generous, and original characters. It comes preinstalled on Mac OS X.
Suggested declaration: "Gill Sans", "Lucida Grande", "Lucida Sans Unicode", Arial,
sans-serif

Palatino
Preinstalled on Mac OS X and many Windows machines, Palatino is a typeface based on classical
Italian Renaissance forms, and is a rather nice serif font. It has become a modern classic
in itself, and is popular among professional graphic designers and amateurs alike. Palatino
works well for both text and display typography, and used carefully it can be a great web font.
Suggestion declaration: Palatino, Georgia, "Times New Roman", serif

Css Tutorial : Web-Safe Fonts

Always, always think about clarity and legibility here. Choose fonts that look good not only on
your chosen platform (most look fabulous on a Mac), but also on others. How legible is your
11-pixel Times text over on a colleague’s PC? What if that colleague has/hasn’t enabled
ClearType font smoothing? What if you need to render some information in italics? Does your
chosen font cope well in such circumstances? Certain fonts give very consistent results in a variety of situations. While some may consider
the likes of Verdana and Georgia as safe bets, this is unfair. Legibility generally overrules whimsy,
and certainly comes well before indulgence. Verdana, for example, is vilified in some circles as
the equivalent of a Queen Greatest Hits album—absolutely everywhere, incredibly familiar, but
not delivering anything new, i.e., boring. Take this raw source though, and give it a little remix,
and who knows what could be drawn from it? My point is that the possibilities with CSS are
endless, and the combination of background images, appropriate font properties, and careful
spacing can give an old font new room in which to shine.
There are, in all facets of web design, rules to be followed. Web standards exist for the
common good, but most rules can be treated as guidelines for good practice. Remember that
nobody is forcing you to do things their way, and the web is an open playing field. Use the font
you want to use, and do not be swayed by ill-considered opinion. Just make sure your visitors
can actually read it.
Let’s look at the web-safe fonts available at the time of writing, illustrated in Figure 4-3,
and consider why some might be more useful than others, and what kind of web sites they
might suit.

Verdana
Verdana is super-legible, and copes with smaller font sizes very well indeed. It is devoid of
extraneous curly bits (technically speaking this means it is a sans serif font—that is, without
serifs), and I’ll bet my laptop that 99.9% of web users will have it installed on their machine,
especially as it comes bundled with Internet Explorer. Use Verdana for a government or blue
chip business web site.

Georgia
Georgia is a serif typeface (so it does have curly bits). It is a web designer’s favorite because
unlike most serif fonts, Georgia has been designed especially for the screen. Its italics, which
are unusually clear and legible on screen, are a major bonus. Use Georgia for a historical information
site, such as a web site about World War II.

Times New Roman
If a font has Times in the name, you can assume it will give the impression of a newspaper typeface,
although this is not always a good thing on screen. Another serif font, Times New Roman is
intended for PC platforms, and is hinted especially for the screen. That said, many would argue
that Georgia supersedes it if you want a particularly legible serif font for your web site.

Times
Times is the Mac equivalent to Times New Roman, but is not designed specifically for screen.
However, Macs being Macs, it’ll still render pretty well on that platform. Use Times New Roman
or Times for a financial institution’s web site.

Arial
Like Verdana, Arial is another sans serif font that lends a more modern feel to web sites. It is
widely used, but doesn’t work very well at lower font sizes, and there isn’t much default space
between the characters. Use Arial for a pretentious museum’s web site.

Helvetica
The closest web font to Arial for the Mac, Helvetica is another sans serif font regarded as a
superstar typeface in the real world, but faring not so well on screen. Use Helvetica for a new
media company’s web site.

Tahoma
With so little choice for web designers, you’d think there would at least be some variety on the
menu, but sadly there isn’t. Tahoma resides on any computer that has Microsoft Office installed
on it, and is thus available to most of your visitors, but it bears an uncanny resemblance to
Verdana, and is therefore used rarely. Use Tahoma for a business web site, or alternatively just
use Verdana.

Comic Sans MS
You want variety? Well, this is pretty wild. I say wild, but really Comic Sans is a bit of a joke. It’s
rare that you’ll come across a design that demands its text be rendered in this very informal
typeface. It is unfortunate that any web sites using Comic Sans tend to have that “my first web
site” feel about them, and it is best reserved for unfunny jokes or printable party invitations.
Use it if you wish, but steer clear if you are looking to present even a tiny amount of professionalism.
Use Comic Sans for your little sister’s web site about ponies.

Trebuchet
A great screen font, designed originally at a smaller size than most fonts, which usually means
a font that has less unique subtleties. That said, Trebuchet manages to convey a contemporary
feel in a limited space, and is a stylish choice that ships with copies of Internet Explorer. Use
Trebuchet for your personal portfolio.

Courier
Courier is a monospaced font, meaning every character is the same width as you would find on
a traditional typewriter, so they line up vertically as well as horizontally. Courier New is the
most common monospaced font but can appear faint when anti-aliased at smaller sizes. Alternatives
are Lucida Console (Windows), American Typewriter (Mac), and Monaco (Mac). Use
Courier or its alternatives to display code or simulate typewriter text.

Css Tutorial : Available Fonts

Arguably the most annoying problem designers face with regard to the Web is the poor choice
of fonts available. This boils down to the fact that the only fonts that can be specified are the
ones certain to be installed on every computer used to view the web site. For example, just
because you have Sharktooth Italicized installed on your computer doesn’t mean everyone else
has. Specify it in your style sheet, and the text on your web site, as viewed on your computer, will be
rendered with it, but very few other users will have such an obscure font installed and available
to their browser. The more obscure the font you specify, the more likely it is that you’ll run
into trouble.
Thus, it is important to think about web-safe fonts. These are few, but they can be used
with confidence, as most of your visitors will have them installed.