Key Font Properties in Css

 The following properties are often used for tighter control. Most are self-explanatory, so let’s
breeze through them; we’ll combine them all in a sample template at the end of the chapter.

font-weight
The font-weight property sets how thick or thin characters in text should be displayed. Typically,
the declaration will either be normal or bold, although some browsers support numeric values
in increments of 100. These are 100 (lightest), 200, 300, 400 (same as normal), 700 (same as bold),
800, and 900 (even bolder!).

font-style
Again, this property is pretty obvious. The default is normal, but typically you would use this
property to declare any text that needs to be rendered in italics. Values are normal, italic, and
oblique. When you specify an oblique font style, the browser looks for any available font with
“oblique” in its name or, failing that, one with “italic” in its name.

font-variant
The font-variant property is used to display text in a small-caps font, which means that all the
lowercase letters are converted to uppercase letters, but all the letters in the small-caps font
have a smaller font size compared to the rest of the text. This is useful for secondary, lessimportant
info such as stats, figures, or footer information. Possible values are simply normal or
small-caps.
Note that the browser will use a proper small-caps font if one is available; otherwise the
effect is done computationally. You can see an example of small caps a little later in Figure 4-9.

text-transform
Not strictly a font property, but it controls the font, so it is included here. This property is a
natural antidote to font-variant, where all characters can be rendered uppercase without
reducing font size. The text-transform:uppercase declaration is especially useful for headings,
where it is semantically incorrect to type using uppercase characters in the markup.

Css Tutorial : Font Shorthand

You probably won’t be surprised to discover that there are some useful methods of shortening
font declarations, pulling several into one simple statement. Later you’ll combine four or five
declarations into one, but for now, let’s collate font-family and font-size.
As mentioned in previous chapters, the most important thing with shorthand is the order
in which declarations are stated. In this case, font-size precedes font-family.
/* Specify blanket rules for all elements */
body {
font: 12px "Lucida Grande", Arial, Sans-serif;
}
With this basic knowledge of the two most important CSS font properties in your arsenal,
you can now begin to experiment with new and interesting font choices. To get you started, in
the following section we’ll plough into the vast array of available web fonts of which there is an
exhaustive and unlimited choice. (I’m joking again.)

Primary Font Properties in Css

Initially, it might seem that the manipulation of text on the Web is severely limited, but
designers are constantly pushing the envelope with new and exciting methods of treating it.
Later we’ll delve into some more complex CSS properties, but for now it’s important to understand
the basic font syntax.

Specifying Fonts

 
First, you’ll want to override some of the browser’s default CSS properties, specifically the typeface
and the font size. This is really straightforward, but there are a few interesting issues to be
aware of. The following properties would typically be declared in the body selector, allowing all
following elements to inherit the values unless you specify otherwise.

font-family

 
The font-family property is a list of font family names and/or generic family names for an
element, specified in priority order. The browser will use the first available font on the user’s
machine. There are two types of font-family values: • Family name: The name of a font family, like Times, Georgia, or Arial.
• Generic family: The name of a generic family, like serif, sans-serif, cursive, fantasy,
or monospace.
Each value must be separated with a comma, and you should always suggest a genericfamily
name as the final option in the list.
If a family name contains whitespace, such as the family name Lucida Grande, it should be
enclosed in quotes ("Lucida Grande"), although single quotes need to be used if embedding the
style in HTML.
In the following example, defining the family names and generic family for the body
element will ensure that all child elements will inherit the font-family declaration, unless
specifically overridden.
/* Specify blanket rules for all elements */
body {
font-family: "Lucida Grande", Arial, Sans-serif;
}
Note also that Lucida Grande is specified first, and due to its whitespace character it is
contained within quotes. Any machines with Lucida Grande will display text with that font, and
if it isn’t available, the display will default to Arial. If neither Lucida Grande nor Arial are available,
the browser knows to use whatever appropriate sans serif font it can find next, as the generic
family sans-serif is specified.
To overrule this blanket declaration, just specify a different font family for the appropriate
element. For example, many designers like to display headings and block quotes with larger,
more classic serif fonts.

ClearType Font Smoothing

Most seasoned web designers will tell you that text renders better on Mac browsers than on
their PC equivalents, because the text is anti-aliased (meaning jagged edges are softened by
the addition of intermediately colored pixels around the characters) as shown in Figure 4-1. It
is certainly fair to say that those who build mostly with Mac browsers are often disappointed
when they review their work over on the office PC.

Often, however, what’s actually happening is the font they specified in the CSS isn’t available
on the PC, and so the display defaults to the next available specified font, which can carry
less clarity in some cases. However, it could also have something to do with that PC’s basic settings.
The ClearType setting is a valuable asset for PC users, and is a preference local to a particular
machine. In other words, it isn’t something you the designer can dictate through your
design. It is worth considering ClearType though, as although it makes your PC-based browsing
more enjoyable, it can also give a false impression of how your PC audience will view your work.
Basically, ClearType enhances the horizontal resolution available for rendering text
through software such as web browsers, resulting in a much clearer display of text on liquid
crystal display (LCD) screens. The benefits of ClearType rendering are less obvious for users
with CRT displays, but still worth experimenting with. The outcome is less-pixilated characters,
bringing the browser display a little closer to the smooth perfection of printed text.

Convey the Mood with the Right Font

The right font for the right job communicates with the user instantly. Your text is the first ingredient
to appear as the page is downloaded, and it can instantly tell the user whether the web
site is serious or friendly, modern or traditional, formal or casual. Do you want the web site to
give the impression of a newspaper or journal, newsletter or fact sheet? If you do not want to
convey such an authoritative standpoint, then maybe something humorous or light-hearted is
needed? Choosing the right font or combination of fonts is key to creating the right impression
from the outset.