Courses/Design & Technique-Essential Web Design/05
CSS for typography
essential typography properties
- font-size: body in pt, rest of elements in em
- font-weight: normal or bold
- font-style: normal or italic
- font-family
- color
- text-align
- line-height
- letter-spacing: increases or decreases the space between characters( negative values are allowed)
- text-shadow
- text-indent
- column-count: the number of text columns
- column-width
- text-transform: uppercase, lowercase
::first-letter and ::first-line :first-of-type
:first-of-type selector in CSS allows you to target the first occurrence of an element within its container.
p::first-of-type {
font-size: 14pt;
font-wieght:bold;
}
p::first-letter is a CSS pseudo class that applies to the the first letter of an element
p::first-letter {
font-weight: bold;
color: red;
}
p::first-line is a CSS pseudo class that applies to the the first line of an element
p::first-letter {
font-weight: bold;
color: blue;
text-transform: uppercase;
}
Using fonts
| system fonts | custom fonts |
|---|---|
| ready to use | need to load or upload |
| limited set | broad range |
| change slightly in each user's computer | remain the same to all users |
| too familiar | fresh |
system fonts
System fonts are generic fonts.
- Sansserif
- Serif
- Monospace
- Cursive
system fonts example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
font-size: 10pt;
}
p {font-family: cursive;
font-size: 3em;
}
p.other {font-family: sansserif}
span.yetanother {font-family: monospace}
</style>
</head>
<body>
<p>Cursive generict font</p>
<p class="other">Testig another generic font.
<span class="yetanother">And yet another one</span>
</p>
</body>
</html>
custom fonts
The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. Mozilla @font-face
Web fonts formats
Different font formats exist:
- Web Open Font Format (.woff)
- TrueType/OpenType (.ttf/.otf)
- Scalable Vector Graphics Fonts (.svg)
Currently, most browsers support these font formats, with the exception of .svg, that is only supported by Firefox. See Wikipidia article on Web fonts.
use a custom font
To use a custom font, the font file has to be stored somewhere, either locally (same folder as your site) or remotely.
locally
- download a font from: https://fontlibrary.org/
- save the font files (.ttf .woff) on your website folder, best in a folder dedicate to fonts
- write the CSS @font-face rules for each of the fonts and font files
Try changing the following example with other custom font
In this case I'll use 5by7 https://fontlibrary.org/en/font/5by7 which includes 2 styles: regular and bold.
Notice how 2 font sources (files) are used under the same font name, but with different weight, so that both the regular and bold font-styles are used.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face {
font-family: "5by7";
src: url("fonts/5by7.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "5by7";
src: url("fonts/5by7_b.ttf");
font-weight: bold;
font-style: normal;
}
body {
font-size: 16pt;
font-family: "5by7"; }
</style>
</head>
<body>
<h1>This is a custom font in Bold.</h1>
<b>Bold again</b>
<p>Regular font-weight in a paragraph</p>
</body>
</html>
Open-source fonts libraries
remote custom fonts
It is possible to use custom fonts, that are not stored locally, and instead "live" in a service like Google Fonts or Open Font Library.
This method is:
- convenient
- easier
but, on the down-side:
- it takes more time to load the page
- the font can be removed at any point by the service
remote custom font example
Using the font https://fontlibrary.org/en/font/barrio and following the "Use this font" instructions:
<html>
<head>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/barrio" type="text/css"/>
<style type="text/css">
h1 { font-family: 'BarrioRegular';
font-weight: normal;
font-style: normal;
font-size: 3em;
}
</style>
</head>
<body>
<h1>This is a remote custom font.</h1>
</body>
</html>
