Understanding and Using Font Properties
Here are the most common CSS properties used to style fonts:
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
All examples use the same text to show how these properties change appearance.
font-family
Defines the typeface used to display text. You can set one font or a list of fallback fonts separated by commas.
font-size
Controls the size of text. px: fixed size. em/rem: size relative to the parent or root element.
font-weight
Controls the thickness of text. Numeric values: 100β900. Keywords: normal, bold, lighter.
font-style
Specifies the style of the text: normal, italic, or oblique.
Pseudo-class ::first-letter
::first-letter targets the first letter of an element (typically a paragraph or heading), allowing decorative or stylized effects.
selector::first-letter {
/* some styles */
}
Let's run the next example to see how it works.
index.html
styles.css
font-family sets the font and fallbacks.
font-size controls text size in px, em, or rem.
font-weight adjusts thickness using numbers or keywords.
font-style changes the font style.
::first-letter styles the first letter of a text block.
1. Which property determines the thickness of the font?
2. What is the default value for the font-style property in CSS?
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Can you show an example of using the ::first-letter pseudo-class?
What are some common use cases for ::first-letter in web design?
Can you explain the difference between font-style italic and oblique?
Awesome!
Completion rate improved to 2.56Understanding and Using Font Properties
Swipe to show menu
Here are the most common CSS properties used to style fonts:
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
All examples use the same text to show how these properties change appearance.
font-family
Defines the typeface used to display text. You can set one font or a list of fallback fonts separated by commas.
font-size
Controls the size of text. px: fixed size. em/rem: size relative to the parent or root element.
font-weight
Controls the thickness of text. Numeric values: 100β900. Keywords: normal, bold, lighter.
font-style
Specifies the style of the text: normal, italic, or oblique.
Pseudo-class ::first-letter
::first-letter targets the first letter of an element (typically a paragraph or heading), allowing decorative or stylized effects.
selector::first-letter {
/* some styles */
}
Let's run the next example to see how it works.
index.html
styles.css
font-family sets the font and fallbacks.
font-size controls text size in px, em, or rem.
font-weight adjusts thickness using numbers or keywords.
font-style changes the font style.
::first-letter styles the first letter of a text block.
1. Which property determines the thickness of the font?
2. What is the default value for the font-style property in CSS?
Thanks for your feedback!
