Select Lesson
CSS Introduction Quiz
5 min
Font color color
5 min
Font family font-family
5 min
Font size font-size
5 min
Font weight font-weight
5 min
Lesson 13. Using pretty fonts
15 min
Google fonts
5 min
Font Styles Quiz
5 min
Fonts HTML/CSS
Level OneCSS Introduction Quiz
5 min
Font color color
5 min
Font family font-family
5 min
Font size font-size
5 min
Font weight font-weight
5 min
Lesson 13. Using pretty fonts
15 min
Google fonts
5 min
Font Styles Quiz
5 min
60 min
Fonts in CSS
Controlling fonts in CSS allows a lot of changes to text.
Code Avengers Quiz
CSS Introduction Quiz
Concepts
Font color color
Look at this example text:
Because the <body>
tag is the highest possible visible HTML tag, the body
selector allow us to target the entire page font color.
Remember: Selectors are the words you write at the start of the CSS style section for the elements you want to change.
If you replaced body
with h1
in the above code, it would look like this;
Concepts
Font family font-family
Generic Fonts
CSS has 5 font types called generic fonts comprised of 5 different groups:
cursive and fantasy are good for headings, since they are hard to read in large chunks.
monospace is good for code; its characters have the same width.
serif is great for printed text and headings; its letters have little hooks on the end called serifs.
sans-serif is good for the main text of websites; its letters have no serifs (little hooks) and are easy to read on screens.
Web-safe fonts:
Fonts that are generic fonts will work on most web browsers and are used on all operating systems (Windows, Linux and Mac etc.) are considered "web safe".
Some of the most used fonts are:
- Arial (sans-serif)
- Verdana (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Comic Sans MS (cursive)
- Impact (fantasy)
- Courier New (monospace)
- Impact (fantasy)
- Comic Sans MS (cursive)
- Georgia (serif)
- Times New Roman (serif)
- Verdana (sans-serif)
Example:
Not all fonts are installed on all computers, so it's recommended that you use a list of fonts. If the first font in the list isn't available, it will try to use the next.
Example:
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
}
Click here to view more web-safe fonts →
Concepts
Font size font-size
Font sizes can be measured in pixels (px):
35px
25px
15px
10px
Heading elements have default font-sizes defined by the browser. We can override them through the css.
The example below shows the heading font sizes have been changed.
Concepts
Font weight font-weight
Images and elements on a screen are said to have a weight; this is not a physical-weight but refers to how substantial an element looks.
The more weight an element has, the more you will look at it.
Adding borders, highlighting, making text bigger,increasing white space around the element, or placing the element in the top left corner (reading gravity) are all little tricks to add weight.
With fonts, you can add weight with size, color and font type. For example, making the text bold (which adds more pixels to the text) helps draws your eye to the words.
You can add font-weight
as a CSS property.
Let's remove the bold by applying the normal font.
HTML/CSS 1 Lesson
Lesson 13. Using pretty fonts
Extension: Concepts
Google fonts
Google Fonts provided hundreds of free, open-source fonts optimized for the web. In just 3 quick steps you can have a good looking website.
In CSS versions 1 and 2, web designers could only use web-safe fonts for text.
To use fancy fonts in headings, you had to create images using software like Photoshop.
Now with CSS 3 it is possible to use any font.
Click on the link to view instructions on how to use Google Fonts →
Code Avengers Quiz
Font Styles Quiz
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F