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 : letter-spacing (Kerning)

In the real (print) world, the spacing of characters has the professional name of kerning. Again,
CSS has enabled web designers to emulate this tight text control with the letter-spacing property.
Where line-height creates extra whitespace between lines of text, so letter-spacing is used to
adjust the spacing between characters. Again, normal can be declared to override inherited
letter-spacing, but mostly you will declare letter-spacing in pixels. In the following example,
letter-spacing is declared only for the grouped headings:

/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px
font: 12px Verdana, Arial, Sans-serif;
line-height:150%;
}
h1, h2 {
letter-spacing:3px;
}

■Note It is worth noting that unlike line-height, here negative values are allowed, so something like
letter-spacing:-0.5em can be used to bunch up the characters if required. Using the em measurement
will ensure that the spacing scales if text sizes are increased. This approach is unlikely to aid legibility, however,
so use negative spacing with caution. Use letter-spacing only when absolutely necessary. Increasing the
whitespace between characters rarely makes text more legible, and only serves to make life more difficult for
those with reading difficulties.Many designers like to ensure many other font properties are set first, and leave line-height
and letter-spacing until last. It can be that final touch that sets a design apart, and shows that
the designer has a good approach to legibility and type design.

Please, Please Use line-height in Css!

Adjusting the spacing between lines of text makes a huge difference to the look of your text, and
it is almost always required to enhance legibility. Please, please use it!
The line-height property is easy to understand, simple to implement, but most often
forgotten about. With careful color, size, and font-family properties set, and the text placed
within a beautifully executed section of the page, it is easy to consider the job done. The revelation
that something as simple as adjusting line-height can then bring to what is considered
finished is something one never forgets, and once you see this for yourself, you will use it in
every subsequent design.

Setting the line-height Using Percentage

It is worth setting line-height in the body selector, as all elements can benefit from inheriting
this value. Headings that wrap to two or more lines, lists, block quotes, and so on can all use
some space for clarity, but it’s the paragraphs where the increased legibility will be most
noticeable. The rule is simple:
line-height:150%;
In this example, the spacing between the lines of text will be the given percentage of the
current font-size. So, a line-height of 100% will make no difference, whereas a line-height of
150% will create a space half the size of the font. A line-height of 200% will create a space equal
to the size of the font, and so on. Here, the line-height declaration is added to the existing
body selector:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
line-height:200%;
}

The browser window on the right clearly shows that a line-height of 200% creates spacing
equal in height to the size of the text characters. This is great for the example, but in the real
world, a value of 150% or 160% would probably be more appropriate.

Other line-height Values
As well as the very flexible method of setting line-height using percentage, some other values
can be used.

Normal
Sets what the experts call a “reasonable distance between lines.” In actuality, this setting is
exactly the same as specifying no line-height at all, and it is only useful if you wish to override
inherited line-height for a particular element.
line-height:normal;

Number
Sets a number that will be multiplied with the current font-size to set the distance between
the lines. For example, if the font-size is 12px, then specifying a line-height of 2 will result in
a space of 24 pixels between lines of text.
line-height:2;

Length
Sets a fixed distance between the lines, which is great for precision, but it is important to
remember that when text is resized, the line spaces will not increase or decrease at the same
ratio as the text.
line-height:8px;
To ensure appropriate scaling when text is resized, use a flexible length measurement such as
ems or percentage.

Css Tutorial :Body Declarations

The first task with any new web site is to consider what blanket rules can be declared in the
body selector. Remember that every element contained in the body element will inherit its
values unless you specify otherwise. For example, to avoid having to declare the font-family
and font-size for every element, some blanket rules can be applied from the outset.
The first selector to define in text.css is for body. Notice that margin, border, and padding
properties have been declared, but more importantly so have the font-family and font-size properties using shorthand. These are specified for the whole web page, and any others that
take their style from text.css:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
}With the font-size reduced to 12px, the display looks a little more professional, and
Verdana makes the text a little easier on the eye. Notice that the declared font-size has no
effect on the headings (<h1> and <h2>), which retain their default font sizes, as discussed earlier.

Define Your Style Sheet in Css

The first step is to override the browser’s default style sheet with one of your own. In Chapter
1, you learned how to apply an external style sheet, so repeat that process and apply a style
sheet called text.css using the following link element within the head of the document:
<head>
<title>Chapter 4: Text</title>
<link rel='stylesheet' media="screen" type='text/css' href='text.css' />
</head>
Reload text.html in your browser. Nothing looks different, but text.css is now higher in
the cascade than the browser style sheet. As there are no rules in text.css to override the
browser style sheet yet, the latter’s rules currently still take precedence.

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.

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.)

font-size in Css

Now since you learned the various uses of the preferred
measurements, namely pixels, ems, and percentage. In particular, we looked briefly at sizing
text with ems, and the general consensus is that this is by far the best approach.
However, when it comes to discussing CSS and learning its ways stage by stage, I prefer to
use the pixel measurement, as it is the most easily understood and ensures those who simply
cannot get their head around the concept of ems can still sit at the table with everyone else. Just
to recap, using ems to resize text ensures compatibility with IE6, which cannot resize text defined
with pixels (jump back to Chapter 2 for a full overview of the woes and virtues of the various
units of measurement).
In the following example, a new declaration is added to the body to define the size of the
text in that and all child elements:
/* Specify blanket rules for all elements */
body {
font-family: "Lucida Grande", Arial, Sans-serif;
font-size: 12px;
}
By declaring font-size:12px in combination with the font-family declaration, you will
ensure that all elements will be sized to 12px regardless of any inheritance (unlike ems, which can be influenced heavily through cascading rules), and will of course be rendered in the fonts
you specified earlier.
There are exceptions to this blanket font-size declaration, however. Note that all headings
(<h1>, <h2>, <h3>, and so on) will retain their default font sizes as declared by the browser style
sheet unless you redefine them. In other words, just because you specify a size of 12px in the
body does not mean that level 2 headings will also be 12px, as the browser style sheet has its
own correctly formatted CSS rules such as h1 {font-size:2em}. In any case, why on earth would
anyone want headings to be of equal size to their body text? This is another great example of
the creators of CSS ensuring common sense is not compromised.

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.

Why Is Text So Important in Css

Well, it tells people things, for a start. Without words, your images have an awful lot of work to
do. Aside from this flippant point, it should go without saying (although I’ll say it anyway) that
your text should be legible, to the point, and within easy reach. Visitors are rarely coming to a
web site to sit back and admire your graphics—it is most often information they are seeking.
Graphic embellishments are often mere decoration.
The issue of accessibility is an important one here. Responsible web developers spend a lot
of time ensuring that their designs are not compromised under user-defined viewing situations.
For example, if a style sheet is not available, or images are turned off, the image-based
buttons in the navigation bar will need replacement text to assist navigation. Equally important
is replacement text for general images, especially images that convey a particular message
or act as a link to another page, and there are many circumstances where background colors
can conflict with text of the same color when images are absent. Issues such as these need consideration at every stage of the design process. Essentially,
your web site should make just as much sense with or without all images, and the hierarchy of
your content should remain apparent in any situation.

Css Tutorial : border-color

Remember that, unless you declare the color for the border, it will inherit color from the
element or parent element. As there is only one property for color (border-color), multiple
colors must be declared using shorthand:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed dotted solid ridge;
border-top-width: thin;
border-right-width: 20px;
border-bottom-width: medium;
border-left-width: thick;
border-color: #000 #999 #333 #CCC;
}
which gives us borders from black (top) to lightest gray (left)

Css Tutorial : border-width

border-width
More specifically, in this section we will look at border-width, border-top-width, border-rightwidth,
border-bottom-width, and border-left-width. These properties allow you to define the
width of the element’s edges one by one or all at once. Note that for a border-width value to be
applied, a border-style must first be declared.
Several keyword values are available here, as well as relative lengths. The keywords are
thin, medium, and thick, although caution is required as different browsers render these borders

in various ways. Exactly how many pixels each browser will use does vary. Note that if you
define a border-style but not a border-width, the default value is medium.
In the following example, the border-style values declared previously are combined with
specific border-width keywords and relative values:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed dotted solid ridge;
border-top-width: thin;
border-right-width: 20px;
border-bottom-width: medium;
border-left-width: thick;
}

Css Tutorial : border-style

The border-style property is used to give any element a border. The browser must first understand
the style of border to be drawn before moving on to further border declarations. In other
words, the style keyword is declared before the color of the border, for instance.
The property applies a defined style to one, several, or all borders. Keywords for border-style
are none, dotted, dashed, solid, double, groove, ridge, inset, and outset.

**■Note: Some elements have default borders. The fieldset element (used to define a series of related
form inputs) has a medium-thickness border by default. Also watch out for images used for hyperlinks, where
the image will have a border matching the declared link text color for the containing element. The borders for
both can be styled or removed using border-style. In the case of all other elements, you define your border
styles from scratch.

The following CSS styles a container with a medium-thickness dashed border all around
the division:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed;
}

Taking this further, a unique style for each side can be defined using shorthand for the
border-style property; as with margin and padding, the values are ordered top, right, bottom,
and left:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed dotted solid ridge;
}

Css Tutorial : Border,Border Properties

Border
 
Borders are a simple concept with a million possibilities. Any element can have a border placed
around it, and borders can be placed on all sides, or just the sides you desire. The border property
is particularly flexible as each border can be a specific width, color, or style. As a result of the
numerous values that can be applied, a greater number of shorthand declarations are available.

Border Properties
 
The default values are a border with a medium thickness, inheriting the text color of the parent
element. Only by applying further values can this default state be influenced. The full list of
border properties is
border-style
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-color
border
border-top
border-right
border-bottom
border-left
Controlling borders is relatively easy, but it is worth looking at each property in more detail.

Margin, Padding, and the Body in Css

Back to good old browser default style sheets again. In order to ensure your page content sits
exactly as you desire on all browsers and doesn’t inherit browser defaults, it is important to
consider resetting the page margin and padding in the body selector.
Netscape and IE place a default margin of 8px around the <body> element. The Opera browser
confuses things further by applying a default padding of 8px. Therefore, until all browsers agree
and can settle on either margin or padding to provide this default spacing, it is recommended
that margin and padding be given the values you desire in the body selector:
/* Define default values for the whole site */
body {
margin: 0;
padding: 0;
}
Obviously values of 0 will remove the default spacing entirely, so it may be that you prefer
to set the margin to 10px, 20px, or whatever you need.
Other methods are available that will reset all margins and padding to a defined value that
is inherited throughout unless you declare otherwise. Such methods should be used with caution however, as all headings, paragraphs, lists, and so on will also inherit the value, and if the value
is 0, you might end up in trouble, with all of your page elements bunched together. This would
then require margin and/or padding values to be declared for all headings, paragraphs, and other
elements that typically have sensible default spacing values.