CSS

Font

Something sans-serif

Something serif

Something monospace

Something cursive

Something fantasy


Example 2.4.1

When there stand some text, it is important to be readable.
Therefore you must think about what typograhy you use.

Font-family

Font-family are the text on the website. There are 5 basic font families

h1 { 
font-family: serif;
}
Example 2.4.2

You can use the basic font to change the typografi on the website. If you do that will it take the default font type from the computer. Therefore can you risk that the font will not be the same.
But you can also specify what font you want, and if the computer can find it will the be changed. If it cant, then make a backup font. Some fonts need to be installed or referred to, so the computer can find it.

h1 { 
font-family: "Comic Sans MS", sans-serif;
}
p {
font-family: helvetica, arial, sans-serif;
}
Example 2.4.3

Web safe font

Web safe font are preinstalled fonts (notice that not every device have the same fonts as the other). Web safe font are often used as 'fall back' fonts.
Some are:

Font-size

Font-size is the size of the text. You can make it big or small.
You can change the font size with px, but the text will not scale then, or with em, which are another way of changing the font size. Em does scale .

p { 
font-size: 50px;
}
h1 {
font-size: 2em;
}
Example 2.4.4

CSS units

CSS has several different units for expressing a length. Length is a number followed by a length unit, such as 10px, 2em, etc.

/* Pixels (px) are relative to the viewing device */
h1 {
font-size: 60px;
}
Example 2.4.5
/* Relative to the parent element */
h1 {
font-size: 60%;
}
Example 2.4.6
/* Relative to the font-size of the element (2em means 2 times the size of the current font) */
h1 {
font-size: 2em;
}
Example 2.4.7

Font-weight

Font-weight is the weight the font have. You can use the normal weight, you can make it thick or thin
The weight can only be changed if the font have the a font weight

h1 { 
font-weight: 100;
}
Example 2.4.8

Line-height

Line-height is a way to make more or less whitespace betwwen the lines.

.firstClass { 
line-height: 5px;
}
p {
line-height: 20px;
}
Example 2.4.9

This line has a
line height on 5px

This line has a
line height on 20px

Visuel example of 2.4.9

Google webfont

If you want a font that are not on the website, you can use Google fonts
There you choose a font, click on the size you want, and they opens a review. There you can find a link, which you insert on your site in the head.

HTML

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

CSS

p{
font-family:roboto;
}
Example 2.4.10

Load webfont

But that is a lot of code. You can make it faster with the use of JavaScript and webfont loader.

Read more about webfont loader
// Google webfont
WebFont.load({
google: {
families: ['Open Sans:300,400,700', 'Handlee']
}
});
Example 2.4.11

Font awesome

You want icons, you say?
Without you need to insert one?
Then use Font awesome

Menu with icons

See the Pen Menu with icons by Dominoeffekten (@dominoeffekten) on CodePen.

Example 2.4.12