CSS: Fonts

Name: CSS: Fonts
Author: Cliff Brozo

Work with fonts in CSS

Preview the first lesson free — get full access to all 6 lessons.

Course: On-Demand

In today's lesson, we'll discuss the difference between a typeface and a font. We'll learn what serif fonts are and compare those to sans serif. We'll talk about ascenders and decenders. We'll take a look at font families and figure out the weight of different fonts. When they first created a language, they had to come up with letters and numbers that represented the characters, and they call that a typeface. The font is the styling of those letters and numbers. Serif fonts have a small stroke attached to the main portion of the letter. Serif fonts are typically seen in newspapers, magazines, and books, and some people say that serif fonts are easier to read because there's a line that guides your eyes across the entire line of text. Sans serif fonts have the same letters that serif fonts have, but they don't have those small strokes. They're considered to be more modern. Some common serif fonts are on the left-hand side of the screen, and some common sans serif fonts are on the right side of the screen. I'm sure you have used both. When we discuss actual letters, there's a main portion of the letter. As you can see in those orange lines, but there are also ascenders, the portion of the letter that goes above the main letter, like in the letter B and D and F, and there are decenders, the portion of the letter that goes below those letters, the P, the Q, and the J. The serif, as we have discussed, is the little extra piece that goes on to a letter, and there are also ears and loops, like in the letter G. There's a little extending piece that is the ear of the letter, and the loop is a closure. The open part of a letter, like in the letter A, is called the aperture. When we want to have fonts that look similar, we call them the font family. When we create a font family, we provide a list of several similar looking fonts, and if the first font in the list is not on the user's PC, the next one is chosen. Usually, the last font in the list is the generic word serif or sans serif, and that will take any available serif or sans serif font. As you can see, the serif fonts are on the left, and the sans serif fonts are on the right. You can also notice that a single font can belong to more than one family. When we want to make a font stand out, we make it bold, but there are many different ways to make it bold, and we can call it just plain old bold, or we can make it lighter or bolder. A more accurate way is to create a font and use the value, the numeric value, and that's a range between one and 1000, and typically we can break them up into 100 increments, and the normal regular font would be 400, and we can go higher than that number to get more bold, and lower than that number to get a thinner number.

Beginner Provider : Cliff Brozo 6 Lessons · 35m in English

Course Description

Fonts come in multiple styles and can be formatted to enhance and personalize your webpage. In this course you will learn to work with fonts in CSS, including how to format fonts with effects. Give your webpage the perfect finishing touch with correct font sizing and style.

Learning Objectives:

Skills:

What You'll Learn

Work with fonts in CSS to enhance and personalize your webpage
Format, style, and add effects to fonts to match your design
Apply correct font sizing and styling for the right finishing touch
Modify fonts using CSS code
Format font sizes in CSS

Key Takeaways

Fonts come in multiple styles and can be formatted to enhance and personalize a webpage.
CSS lets you format fonts with effects to match your page design.
Correct font sizing and style give a webpage the perfect finishing touch.
The course covers modifying fonts, coding for modifying fonts, and formatting font sizes.

Frequently Asked Questions

What will I learn in this course?

You will learn to work with fonts in CSS, including how to format, style, size, and add effects to fonts to match your page design.

What skills does this course cover?

It covers formatting and sizing of fonts and adding effects to fonts, with related skills including Computer Fonts, CSS Codes, CSS Frameworks, Font Face, Object Oriented CSS, and Web Typography.

What topics are included in the lessons?

The lessons cover Modifying Fonts, Coding for Modifying Fonts (Parts 1 and 2), and Formatting Font Sizes (Parts 1, 2, and 3).

What is the focus of this CSS Fonts course?

The focus is enhancing your CSS web design with fonts that match your page and properly formatting, styling, and adding effects to fonts to match your design.