HTML TEXT FORMATTING

ELEMENTS
 CSS FONT
CSS font properties define the font family, boldness,
size, and the style of a text.
Difference between serif and sans-serif Fonts
 CSS FONT FAMILIES
Generic family Font family Description

Serif Times New Roman Serif fonts have small lines at the end
Georgia on some characters

Sans-serif Arial "Sans" means without - these fonts do

Verdana not have the lines at the ends of
characters
Monospace Courier New All monospace characters like a
Lucida Console typewriter format
 SANS-SERIF FONTS FOR THE WEB
Arial is a common font choice, largely because of its
dominance on Windows.
Its poor design makes it unreadable at small sizes and a
poor choice for body copy.
Mac users should be wary of choosing Helvetica—it’s an
excellent font, but it’s not generally shipped with Windows.
Better choices for body copy are Verdana or Trebuchet MS.
Trebuchet MS is perhaps less readable, but it has plenty of
character and is sometimes an interesting alternative,
 SERIF FONTS FOR THE WEB
Georgia is perhaps the best available web-safe serif,
especially when used at sizes equivalent to 12 pixels and
bigger, and it can be more suitable than a sans-serif if
you’re working with traditional subject matter or if you’re
attempting to emulate print articles.
 FONTS FOR HEADINGS AND
MONOSPACE TYPE
Arial Black and Impact are reasonable choices for
headings, although they must be handled with care.
Courier New is more useful and a good choice when you
need a monospace font.
Comic Sans MS, which is inexplicably popular with
novice web designers. It is readable, but its quirky and
unprofessional nature makes it unsuitable for most
purposes
 FONT FAMILY
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a
"fallback" system. If the browser does not support the first
font, it tries the next font.
Start with the font you want, and end with a generic family, to
let the browser pick a similar font in the generic family, if no
other fonts are available.
Note: If the name of a font family is more than one word, it
must be in quotation marks, like: "Times New Roman".
 FONT FAMILY
font-family: preferred, "alterate 1", "alterate 2", generic;
The most common generic font family names are serif and
sans-serif, although when you’re using monospace fonts
(such as Courier New), you should end your list with
monospace.
Multiple-word font family names must be quoted (such as
"Trebuchet MS" and "Times New Roman"). You can use
single or double quotes—just be consistent. Single-word font
family names should never be quoted.
 FONT FAMILIY
Examples of font-family in use are as follows:
➔font-family: Arial, Helvetica, sans-serif;
➔font-family: Georgia, "Times New Roman", Times, serif;
➔font-family: Courier, "Courier New", Monaco, monospace;
<h1 style=“font-family: Arial, Helvetica, sans-
serif”>
<p style=“font-family: Georgia, ‘Times New
Roman’, Times, serif;”>
 FONT FAMILIY
Examples of font-family in use are as follows:
➔font-family: Arial, Helvetica, sans-serif;
➔font-family: Georgia, "Times New Roman", Times, serif;
➔font-family: Courier, "Courier New", Monaco, monospace;
<h1 style=“font-family: Arial, Helvetica, sans-
serif”>
<p style=“font-family: Georgia, ‘Times New
Roman’, Times, serif;”>
 HTML TEXT SIZE
The font-size property defines the text size for an HTML
element:
<h1 style="font-size:16px;">This is a heading</h1>
<p style="font-size:1em;">This is a paragraph.</p>
 FONT SIZE
The font-size property sets the size of the text.
Being able to manage the text size is important in web
design. However, you should not use font size
adjustments to make paragraphs look like headings, or
headings look like paragraphs.
 TWO TYPES OF FONT-SIZE
Absolute size:
➔Sets the text to a specified size
➔Does not allow a user to change the text size in all browsers (bad
for accessibility reasons)
➔Absolute size is useful when the physical size of the output is
known
Relative size:
➔Sets the size relative to surrounding elements
➔Allows a user to change the text size in browsers
Note: If you do not specify a font size, the default size for
normal text, like paragraphs, is 16px (16px=1em).
 SET FONT SIZE WITH EM
To allow users to resize the text (in the browser menu),
many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text
size in browsers is 16px. So, the default size of 1em is
16px.
The size can be calculated from pixels to em using this
formula: pixels/16=em
 SETTING LINE HEIGHT
It’s a good idea to be
fairly generous with
leading for web pages,
because text is harder
to read on-screen than in
print; by placing larger
gaps between each line,
the eye can more easily
scan through large
blocks of text.
 DEFINING FONT-STYLE, FONT-
WEIGHT, AND FONT-VARIANT
font-style, enables you to set italic or oblique text.
The font-weight property is intended to make a font heavier
or lighter, and despite the various available values, only bold
and normal are in general use.
The font-variant property has three available values: normal
(the default), small-caps, and inherit.
➔The inherit value causes this element to use the font-variant
settings of its parent element.
➔Small caps are often used to deemphasize uppercase letters in
abbreviations and acronyms and are similar in size to a typeface’s
lowercase characters.
DEFINING FONT-STYLE, FONT-
WEIGHT, AND FONT-VARIANT
 HTML TEXT ALIGNMENT
The text-align property defines the horizontal text
alignment for an HTML element:
<h1 style="text-align:center;">Centered
Heading</h1>
<p style="text-align:center;">Centered
paragraph.</p>
 SETTING LETTER-SPACING AND
WORD-SPACING
letter-spacing, the value
increases whitespace between
characters,
word-spacing, the defined value
increases whitespace between
words. Negative values are
permitted, which cause
characters or words to bunch
together (or kern, if you’re a
graphic designer)
 CONTROLLING CASE WITH
TEXT-TRANSFORM
The text-transform
property enables you
to change the case of
letters within an
element. Available
values are capitalize,
uppercase,
lowercase, and none
(the default)