CSS Font Families: Generic Names (group with similar looks)
- Monospace → they all have the same fixed width E.g Courier, MS Courier New, Prestige, Everson Mono
- Serifs → they have finishing strokes, flared or tapering ends E.g Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
- Sans-serifs → they have stroke endings that are plain E.g MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
- Fantasy → are primarily decorative while still containing representations of characters E.g Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
- Cursive → generally have either joining strokes or other cursive characteristics beyond those of italic typefaces E.g Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
Font Family → ( a specific font name like ” Times New Roman or Arial”)
| Generic Family | Font Family | Description |
| Monospace | Courier New Lucida Console |
All Monospace character has the same width. |
| Sans-serif | Arial Verdana | “Sans” means without – these fonts do not have the lines at the ends of characters |
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
The properties for Fonts are :
- font-family
- font-style
- font-variant
- font-weight
- font-size
- font
Example 1: Font Family
To style your text in your HTML document, you can use the font family property and call in any font to be used on that particular text. in the font family category, there 3 types of fonts that are considered web safe fonts and they are the generic families of (sans-serif, serif and monospace).
E.g. font-family: arial;
using a combination of families, you can specify the font family along with the generic family name so if that particular font doesn’t exist, it can use an alternative font in the list. lets see an example.
when doing a combination, the syntax is to name a font followed by a comma then name another font followed by a comma and finally the generic family name of those fonts.
N/B. Using a combination of fonts, they must be in the same generic families.
E.g font-family: arial, verdana, sans-serif;
E.g font-family: Times New Roman, Georgia, serif;
<html>
<style type="text/css">
body {
font-family: arial, verdana, sans-serif; }
h2 {
font-family: Times New Roman, Georgia, serif;
}
</style>
<h2> This is Text Styling using the serif family</h2>
<body>
This is Text Styling using the sans-serif family
</body>
</html>
it will look like this on your browser
This is Text Styling using the serif family
This is Text Styling using the sans-serif family
Example 2: Font Style
Specifies the font style of the text, there are four values that can be applied to this property name
and the values are:
font-style: (normal, italic, oblique,inherit)
E.g. font-style : italic;
<html>
<style type="text/css">
body {
font-family: arial, verdana, sans-serif;
font-style: italic; }
h2 {
font-family: Times New Roman, Georgia, serif;
}
</style>
<h2> This is Text Styling using the serif family</h2>
<body>
This is Text Styling using the sans-serif family
</body>
</html>
it will look like this on your browser
This is Text Styling using the serif family
This is Text Styling using the sans-serif family
Example 3: Font Variant
This is used to Specifies whether or not a text should be displayed in a small-caps font. The property value for font variant are :
font-variant: (normal, small-caps, inherit )
E.g. font-variant: small-caps;
<html>
<style type="text/css">
body {
font-family: arial, verdana, sans-serif;
font-style: italic;
font-variant: small-caps; }
h2 {
font-family: Times New Roman, Georgia, serif;
}
</style>
<h2> This is Text Styling using the serif family</h2>
<body>
This is Text Styling using the sans-serif family
</body>
</html>
it will look like this on your browser
This is Text Styling using the serif family
This is Text Styling using the sans-serif family
Example 4: Font Weight
This is used to Specifies the weight of a font, in your HTML document, you can specify how much weight a text can bear using the font weight property. the values are :
font-weight: (normal, bold, bolder, lighter, 100, 200, 300, 400,500, 600,700, 800, 900, inherit)
E.g. font-weight: 300;
<html>
<style type="text/css">
body {
font-family: arial, verdana, sans-serif;
font-style: italic;
font-variant: small-caps;
font-weight: 300; }
h2 {
font-family: Times New Roman, Georgia, serif;
}
</style>
<h2> This is Text Styling using the serif family</h2>
<body>
This is Text Styling using the sans-serif family
</body>
</html>
it will look like this on your browser
This is Text Styling using the serif family
This is Text Styling using the sans-serif family
Example 5: Font Size
This is used to specify the size of text of your font. normally on any browser or on most commonly popular browsers, the text font size default value is set to 16px; that’s if you didn’t specify any font size for your text in your HTML or CSS document. the values for font size are :
font-size: (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length[unit of measurement], %, inherit)
E.g. font-size: medium;
<html>
<style type="text/css">
body {
font-family: arial, verdana, sans-serif;
font-style: italic;
font-variant: small-caps;
font-weight: 300; }
h2 {
font-family: Times New Roman, Georgia, serif;
}
b{
font-size: large;
}
</style>
<h2> This is Text Styling using the serif family</h2>
<body>
This is Text Styling using the sans-serif family
<b> can you see the size of this text </b>
</body>
</html>
it will look like this on your browser
This is Text Styling using the serif family
This is Text Styling using the sans-serif family
can you see the size of this text
Example 6: Font [Shorthand property]
To shorten the time it takes to write out the code for each and every font declaration, the shorthand name for fonts are “font”, using this you can group all the properties for other fonts in one, in this manner.
E.g font: font-style | font-variant | font-weight | font-size/line-height |font-family
the following above is the correct syntax when using the shorthand property form, give a space in between each declaration.
E.g font: italic normal 200 xx-large Arial, Helvetica, sans-serif;
<html>
<style type="text/css">
body {
font: italic normal 200 xx-large Arial, Helvetica, sans-serif;
}
</style>
<body>
This is Text Styling using the font shorthand declaration
can you see that the text are in italics and bold, what about
the size? whoo!
</body>
</html>
it will look like this on your browser
This is Text Styling using the font shorthand declaration
can you see that the text are in italics and bold, what about
the size? whoo!
I have to say this, but your becoming pretty good, keep up the good work and before you know it, you’ll become an expert.
| Back | Main: CSS Programming | Previous Lesson: Texts | Next Lesson: Links |
