Using font and

text in Web design

 What is Font?
• Is a set of characters of a particular size and style.
• Fonts bring readability and visual appeal in a web
page.
• Fonts is an advantage for a web designer to learn the
different fonts and its particular characteristics.
 A font-family is a set of fonts with the same
typeface may differ in weight and size. You can use the
font-family property in a CSS file
The font-family property identifies a specific font
for an element. In CSS, there are two types of font
family which are classified as generic family and font
family.

Two types of font family
Generic family- it is a set of
font families with a similar
look.
Font family- it is a specific
font family
In CSS there are five
generic font families:
1.Serif fonts have a small stroke at
the edges of each letter. They create
a sense of formality and elegance.
2.Sans-serif fonts have clean lines
(no small strokes attached). They
create a modern and minimalistic
look.
3.Monospace fonts - here all the
letters have the same fixed width.
They create a mechanical look.
4.Cursive fonts imitate human
handwriting.
5.Fantasy fonts are
decorative/playful fonts.
 Like most CSS codes, there is a basic structure or
syntax that we should follow using fonts.
Basic Structure:
{font-family:font initial inherit;}
List of font Set this Inherits this
family name property to its property from
and/or generic default value. its parent
family names element.

Example:
{font-family:”Arial Black”}- specifies a single font using CSS.
{font-family:”Times New Roman”, Georgia, Serif}
 What is Font style?
Font style property is mostly used to style a
specific text. Font has several properties to style a text.
This property has three values:
 Normal- text appears in normal.
 Italic- text appears in italic.
 Oblique- text appears leaning (it is similar to italic
but less supported).
 Example of font-style
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
 To include a boldface style, use the font-weight
attribute in any type of style sheet. Font weight defines the
heaviness of a text.
Using an inline style:
<p style=“font-weight:bold”> This text is in BOLD letters</p>
Using an inline style or external style:
p{font-weight:bold}
 Example of font-weight

p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
Value

Normal  Defines normal characters. This is a

default.
Bolder  Defines thicker characters.
Lighter  Defines lighter characters.
100
200
300
400  Defines from thin to thick characters.
500
600  400 is the same as normal and 700 is
700 the same as bold.
800
900

Inherit  Specifies that the font weight should be

inherited from the parent element.
 What is font-size?
• The font-size property modifies the size of the text.
• Managing text size is essential in web design.
• Content that is more important should have a larger
font size.
• Font size value can be absolute or relative.
Example of font-size
h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}
 Two types of Size
Absolute size
Sets the text to a specified
text.
Does not allow a user to
change the text size in all
browsers.
 Absolute size is useful
when you know the size of
the output (like the monitor
of your user)
Relative Size
 Sets the size relative to
surrounding elements.
 Allows a user to change
the text size in browsers.
 Syntax for specifying
font size in CSS.
 Font-size property
Value Description Value Description
xx-small Smallest possible size x-small 2nd smallest possible
size
small 3rd smallest possible medium The default size
size
large Slightly larger than x-large Larger size than the
the default. default
xx-large Largest font-size smaller One value smaller
than the parent
element
larger One value larger than length Fixed to a specific
the parent element. value in px and cm.
% Larger or smaller in inherit Size the same to the
percent than the parent parent element
element.
 Readability of your web content depends on its font size. There
are four common units by which you can measure the size of the text as
it is displayed in the web browser. These are the following:
 Pixels (px)- these are fixed size units that are used in a computer
screen or other screen media.
 Points (pt)- these are similar to pixels but are fixed in size and are
best used in print media.
 Percent (%) this is scalable unit which can be used for mobile
devices and accessibility. By default, a 100% font size is equivalent to
12 pt
 Ems (em)- this is also a scalable unit that is used in web document
media. Generally, 1 em =12pt = 16px = 100%
 Creating an Inline Span
• A span is a tag that can be placed to any web content to be
formatted.
• It is beneficial if users wish to apply a style to a single word or
a group of words in a single container tag.
• Span is mostly used in inline style called Inline span.
Example:
<p> Cigarette smoking is <span style=“font-weight:bold; font-
style: italic”>Dangerous</span>to your health</p>

Adjust Spacing
 In HTML, there are two types
of spacing users can control.
 These are word spacing and
letter spacing.
 Word spacing manages the
amount of space between
each word while letter
spacing manages the amount
of space between each letter.
 In general, space is set to
zero; a positive value will
increase the space and a
negative value will
decrease the space.
Example of letter spacing
p{letter-spacing:2px;}
Example of word spacing
p{word spacing:20px;}
 Text Alignment
Alignment is very The text align property specifies
important because it the horizontal alignment of yext
will create a visual in an element.
connection between Basic Syntax:
other web content p{ text-align: center;}
such as images,
videos, and others.
 Value Desscription
Text
None Word’s capitalization will
Transform not be changed.
• The text
transform Capitalize First letter of the word is
property controls capitalized.
the capitalization
Uppercase The entire word will be in
of the text. uppercase
Basi Syntax:
Lowercase The entire word will be in
p{text- lowercase
transform:uppercas
e;} Inherit Gives the text case and
capitalization of its parent.
THANK YOU!!!!!