CSS also provides numerous properties for customizing the typeface. These range from the font to the font style and shadows.
CSS font properties include information on the font, font style and font weight. Of course, these properties are mainly useful for HTML elements that contain text(p, i, etc.). However, they can also be used for tables.
The font to be used can be determined via font-family.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <style> p {font-family:verdana, sans-serif;} h1 { font-family: "Courier New", Courier, monospace; } </style> </head> <body> <div> <h1>PSD-Tutorials.en</h1> <p>This is a paragraph with a <strong>bold word</strong>.</p> <h2>This is a heading with a <strong>bold word</strong>.</h2> </div> </body> </html>The result looks like this in the browser:
Typical fonts are, for example, Arial, Helvetica and Times Roman. The desired fonts are assigned to the CSS font-family property. If you specify several fonts, the order is decisive. If the first font specified is available, it will be used. The desired fonts must be separated from each other by commas. The last instruction is usually a so-called generic font family. Such a generic font family gives browsers the option of selecting a font that is at least similar to the one specified.
- serif = a font with Serifs
- sans-serif = a font without Serif
- cursive = a font for cursive writing
- fantasy = a font for unusual script
- monospace = a font with characters of equal thickness.
The font style
You can determine the font style using the font-style property. If the selected font allows it, you can use the italic value to force an italic font.
Other fonts can be slanted using oblique.
The next CSS property that can be used to influence the typeface is called font-variant. This can be used to define small caps.
To do this, assign the value small-caps to font-variant.
The font size
Of course, it is also very important to specify a font size. CSS provides the font-size property for this purpose. Font sizes can be specified in very different units.
- EM
- REM
- pixel
- Percent
- Keywords
The following variants are available as keywords:
- xx-small - very, very small
- x-small - very small
- small - small
- smaller - smaller than in the parent element
- medium - medium
- large - large
- x-large - very large
- xx-large - very, very large
- larger - larger than in the parent element
Here is an example of how the font size can be set:
.one {font-size: 10px;} .two {font-size: 20px;} .three {font-size: 110%;} .four {font-size: xx-large;}And this is how it looks in the browser:
Please note that the topic of font size definition is very complex, as the different units of measurement each have their advantages and disadvantages.
You can find a good overview of which unit of measurement is best to use and when on the page http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. So much for those who don't want to read through it: Use relative specifications like em for display from screen. For print layouts, however, use absolute units such as pt.
The font weight
We continue with the so-called font weight. This determines the thickness and weight of a font. The font-weight property is used for this.
.bold { font-weight:bold; }
This syntax is used to display the highlighted text in bold.
Possible values are bold, bolder (extra bold), lighter (thinner) and normal. The numerical values 100, 200, 300, 400, 500, 600, 700, 800 and 900 are also permitted. These range from extra-thin(100) to extra-bold(900).
Summarizing definitions
In connection with font definitions, the line-height property, which can be used to define the line height, also plays an important role. I will come back to this property in more detail later. It only needs to be mentioned here as it plays a certain role in connection with the font property shown below.
You can combine the font display information presented so far. The general font property is used for this. This comprises or includes the following individual specifications.
- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family
Different font formatting can be combined using font. You can specify the aforementioned properties, but you do not have to use all of them. However, the properties for font size and font family are mandatory.
Thanks to the shorthand notation, CSS files can be kept shorter and clearer.
However, the order shown below must be adhered to. If the two properties font-size and line-height are noted, they must be separated by a slash. If only one value is specified at this point, it stands for font-size.
An example:
p { font: italic small-caps bold 1.3em/1.5em Georgia,Tim,serif; }font-size-adjust was developed to display fonts in approximately the same size. Different fonts have different x-heights with the same font height. However, fonts with a larger x-height are easier to read. It can therefore happen that a document is difficult to read if the original font is not available and is replaced by another with a smaller x-height. With font-size-adjust it should be possible to compensate for this difference.
An example:
h1 { font-family: Verdana, 'Times New Roman', 'Courier New'; font-size-adjust: 0.61; }
In the next tutorial, you will learn more ways to customize the typeface of your website.
