CSS Fonts

CSS (Cascading Style Sheets) fonts play a pivotal role in web design, influencing the readability and aesthetics of textual content. Understanding CSS font properties empowers web designers to create visually appealing and legible typography. In this guide, we’ll delve into CSS font-related properties, their significance, and provide code examples to illustrate each concept.

Font Families

CSS allows you to specify font families to ensure consistent and visually appealing text. For instance:

body {
font-family: Arial, sans-serif;

In this code, the ‘Arial’ font is the preferred choice, and if unavailable, the browser falls back to a generic sans-serif font.


Font Size

The font-size property controls the size of text. It can be set in various units, such as pixels, ems, or percentages:

h1 {
font-size: 24px;

p {
font-size: 16px;


Here, headings (<h1>) are styled with a larger font size than paragraphs (<p>).


Font Weight

The font-weight property determines the thickness or boldness of text:

strong {
font-weight: bold;

span {
font-weight: 400;


This code makes text within <strong> elements bold while setting a normal font weight (400) for text within <span> elements.


Text Alignment

Text alignment is controlled using the text-align property:

h2 {
text-align: center;

p {
text-align: justify;


Here, headings (<h2>) are centered, while paragraphs (<p>) are justified.


Line Height

The line-height property determines the vertical space between lines of text:

p {
line-height: 1.5;

This code sets a line height of 1.5 times the font size for paragraphs, improving readability.


Font Style

The font-style property allows you to italicize text:

em {
font-style: italic;

This code italicizes text within <em> elements, emphasizing it.


Web Fonts

Web fonts enable the use of custom typefaces not available on users’ devices. For example:


@import url('https://fonts.googleapis.com/css?family=Open+Sans');


body {
font-family: ‘Open Sans’, sans-serif;


In this code, the ‘Open Sans’ web font is imported and applied to the body text.

Font Variants

The font-variant property allows you to apply variations to text, such as uppercase or small caps:

abbr {
font-variant: small-caps;

h3 {
text-transform: uppercase;


This code renders the text within <abbr> elements in small caps and converts headings (<h3>) to uppercase.

CSS font properties offer web designers a palette of tools to create aesthetically pleasing and readable typography. By mastering these properties, you can harmonize typefaces, control text size, weight, and spacing, and even introduce custom fonts to elevate the visual impact of your web designs. Typography isn’t just about words; it’s about the art of communication and expression through text on the digital canvas.

Build something ULTIMATE!

About Us

Learn about HTML, CSS, SASS, Javascript, jQuery, PHP, SQL, WordPress. From basics to tips and tricks.

Connect With us

© 2023 Ultimate WebDev

This website uses cookies to improve your experience. By browsing this website, you agree to our cookies. Accept Read More