Basics of CSS3 Fonts
CSS3 Basics - Part 17
Forward: In this article we look at the CSS3 font properties.
By: Chrysanthus Date Published: 23 Jul 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
Meaning of Font
Characters in an HTML containing element and some inline elements (e.g. SPAN) will always have a set of characteristics. They may all be leaning. They may all be each, thick or too thick. They may all be big or small. They may all look like curves. A Font is a set of these characteristics. The number of possible combinations is too high that the characteristics have been group into families.
Font Families
The font families that are likely to be supported by your browser are, serif, sans-serif, cursive, fantasy, and monospace. These are generic font families. There are many fonts out there that are non-generic. A font family, whether generic or not, has a name.
The study of Fonts can be complicated. I will give you just the basics in this article. We shall concentrate on font properties. You can design a web page without choosing a font. For any HTML element the browser chooses a font for you. In many cases this choice is satifactory.
The font-family Property
The value of a font-family property is the name of the font family. Possible values are: serif, sans-serif, cursive, fantasy, and monospace. An example is:
font-family: sans-serif
If the name has a space, then it should be in quotes. The hyphen is not a space. When the designer does not decide on a family name, the initial or default family name is chosen by the browser.
The font-style Property
This describes the leaning nature of the characters in the HTML element. A possible value for this is “italic”. It indicates that the characters have to be leaning. The value to the font-style property can be any of the following:
normal | italic | oblique | inherit
In this tutorial series, | means, or. The best way to appreciate the property values in this tutorial is to try them out, yourself. The value, inherit, means the elements in question inherits the value of the same property of the parent (containing) element. Below I give you a sample code, which you can modify to test the different properties and their values.
The font-variant Property
A possible value for this is “small-caps”. When you use this value, all the lowercase letters in the element will become uppercase letters, but they will be short; while the letters that were originally in uppercase will remain tall. The value to the font-variant property can be any of the following:
normal | small-caps | inherit
The font-weight Property
This property determines how thick the characters are. The value to the font-variant property can be any of the following:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
The numbers do not need any unit. “normal” means 400. “bold” means 700. “bolder” takes the inherited value one level higher. “lighter” takes the inherited value one level lower. The minimum effective value is 100; the maximum is 900.
This determines how big a character is. The value to the font-size property can be any of the following:
xx-small | x-small | small | medium | large | x-large | xx-large
The above are absolute sizes. You can make the font of the element in question bigger or smaller than that of the parent element, using the relative font-size property. The value to the “relative” font-size property can be any of the following:
larger | smaller
An example of the use of the “absolute” property is:
font-size: x-small
An example of the use of the “relative” property is:
font-size: larger
You can also use a number as a value, with a unit. You can use the percentage, pixel or em; em is a good choice. However, most of your problems will be solved using the keywords above.
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {font-family:monospace; font-size:x-large}
</style>
</head>
<body>
<p>
This is a very short paragraph, typed.
</p>
This is the browser's default font
</body>
</html>
As I said above, the different possible combinations of font characteristics are so many and the study of fonts can become complicated. So let us just round up and leave this part of the series.
Rounding Up the Tutorial
If you do not choose a font family and/or any of the font properties, for an element, the browser will choose that for you. In other words, if you do not have any font coding in your web page, the browser will choose a font for you. The browser usually gives you something reasonable. If you do not want the browser’s default font, then in the CSS rule (selector), type a font-family property and value and then type one or more of the other properties and values.
Important: You can use one or more of the rest of the font properties on the default font without using the font-family. So if in the above code “font-family:monospace” was not typed, “font-size:x-large” alone would produce an effect on the default font.
If you really want to impress people with fonts, then you have to do more research on fonts, after this course.
Let us leave this unnecessary complicated topic here and continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT