Home 〉 CSS Tutorials 〉 CSS Font Properties Tutorial with Examples | font-family, font-size, font-style

CSS Font Properties Tutorial with Examples | font-family, font-size, font-style !

CSS Font Properties Tutorial with Examples | font-family, font-size, font-style !

Are you aiming to enhance your website's typography? CSS font properties like `font-family`, `font-size`, and `font-style` allow you to control the appearance of text. This tutorial explains how to select appropriate fonts, adjust sizes, and apply styles like italic or bold. Improve readability and aesthetics by mastering these properties. Read the post on CSS Font Properties

In this guide, we'll cover important CSS font properties like:

  1. 'font-family'
  2. 'font-size'
  3. 'font-style'
  4. 'font-variant'
  5. 'font-weight'
  6. 'font'
  7. 'line-height'
  8. 'letter-spacing'
  9. 'word-spacing'
  10. 'text-transform'
  11. 'text-align'

CSS Font Property Tutorial

CSS font properties let you control how text appears on a webpage. These properties help you define the font family, font size, style, 'weight', 'variant', and more. Fonts play a key role in website readability and design.

Let's break down each property with examples so you can easily apply them in your projects.

1. 'font-family'

Specifies the font of the text.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="font-family: Arial, sans-serif;">This is Arial font with sans-serif fallback.</p>

</body>
</html>

output 📌

This is Arial font with sans-serif fallback.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

If Arial isn't available, the browser will use a similar sans-serif font.

2. 'font-size'

Defines the size of the text.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="font-size: 20px;">This text is 20px in size.</p>

</body>
</html>

output 📌

This text is 20px in size.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Acceptable Units:

  • 'px' (pixels)
  • 'em' (relative to parent)
  • '%' (percentage of parent)

3. 'font-style'

Controls if the text is normal, italic, or oblique.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="font-style: italic;">This text is italic.</p>

</body>
</html>

output 📌

This text is italic.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Values:

  • 'normal'
  • 'italic'
  • 'oblique'

4. 'font-variant'

Displays text in small-caps (uppercase in smaller font).

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="font-variant: small-caps;">This text uses small-caps.</p>

</body>
</html>

output 📌

This text uses small-caps.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Values : 'small-caps', 'normal'

5. 'font-weight'

Defines the thickness of the text.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="font-weight: bold;">This text is bold.</p>

</body>
</html>

output 📌

This text is bold.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Values:

  • 'normal'
  • 'bold'
  • 'lighter', 'bolder'
  • '100' to '900' (numeric scale)

6. Shorthand Property: 'font'

You can combine font properties using the 'font' shorthand.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="font: italic bold 16px Arial, sans-serif;">
This is shorthand for font.
</p>

</body>
</html>

output 📌

This is shorthand for font.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Order:

'font-style font-variant font-weight font-size/line-height font-family'

More Related Font Properties

'line-height'

Controls the space between lines of text.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="line-height: 1.8;">This paragraph has more space between lines.</p>

</body>
</html>

output 📌

This paragraph has more space between lines.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

'letter-spacing'

Sets the space between characters.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="letter-spacing: 2px;">Letters are spaced further apart.</p>

</body>
</html>

output 📌

Letters are spaced further apart.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

'word-spacing'

Sets space between words.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="word-spacing: 10px;">Words are spaced out more.</p>

</body>
</html>

output 📌

Words are spaced out more.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

'text-transform'

Controls the text capitalization.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="text-transform: uppercase;">This becomes UPPERCASE.</p>

</body>
</html>

output 📌

This becomes UPPERCASE.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Values : 'uppercase', 'lowercase', 'capitalize', 'none'

'text-align'

Aligns the text inside a block.

Code 📝

<!DOCTYPE html>
<html>
<body>

<p style="text-align: center;">This text is centered.</p>

</body>
</html>

output 📌

This text is centered.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Values : 'left', 'right', 'center', 'justify'

Conclusion

Font properties are essential for good web typography. With 'font-family', 'font-size', 'font-style', 'font-weight', and related properties, you can create clean and readable designs. Start experimenting and apply them in your own projects for better user experience.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

What is the best font unit to use?

Use 'em' or 'rem' for responsive design and 'px' for fixed designs.

How do I use Google Fonts with 'font-family'?

Import the font from [Google Fonts](https://fonts.google.com) and apply it via 'font-family'.

What is the difference between 'font-style: italic' and 'oblique'?

'italic' uses a specific italic font, while 'oblique' slants the normal font.

Previous Post Next Post