CSS Fonts

CSS Fonts

CSS Font property is used to control the look of texts. By the use of CSS font property you can change the text size, color, style and more.

These are some important font attributes:

1) CSS Font Color

CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts. It is used to change the color of the text.

There are three different formats to define a color:

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
body {  
	 font-size: 100%;  
}  
h1 { 
   color: red; 
}  
h2 { 
   color: #9000A1; 
}   
p { 
  color:rgb(0, 220, 98); 
}     
</style>
</head>
<body>
<h1>This is a heading 1.</h1>
<h2>This is a heading 2.</h2>
<p>This is a paragraph.</p>
</body>
</html>
Try it with the Editor

2) CSS Font Family

The font-family CSS property allows you to set a prioritized list of font family name and/or generic family name for the text content of a selected element.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p.serif {
    font-family: "Times New Roman", Times, serif;
}
p.sansserif {
    font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
Try it with the Editor

3) CSS Font Size

The font-size property sets the size of font for the text content of an element.

There are several ways to specify the font size values e.g. with keywords, pixels or ems.

By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly. An absolute size is specified using one of the following keywords: xx-small, x-small, small, medium, large, x-large, xx-large. A relative size is specified using one of the following keywords: smaller, larger.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
body {
     font-size: large;
}
h1 {
    font-size: larger;
}
p {
   font-size: smaller;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
<div>This is normal text.</div>
</body>
</html>
Try it with the Editor

Setting the font size in pixel values (e.g. 12px, 16px, etc.) is a good choice when you need the pixel accuracy.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
body {
     font-size: 16px;
}
h1 {
   font-size: 24px;
}
p {
  font-size: 14px;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
<div>This is normal text.</div>
</body>
</html>
Try it with the Editor

The em unit refers to the font size of the parent element.The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element.

If you set a font-size of 20px on the body element, then 1em=20px and 2em=40px.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
h1 {
   font-size: 2em;
}
p {
  font-size: 0.875em;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
<div>This is normal text with browser default font size.</div>
</body>
</html>
Try it with the Editor

The solution to achieve the similar effect in all browsers is to set a default font-size in percentage for the body element. A popular technique is to set the font-size for the body to 62.5% (that is 62.5% of the default 16px), which equates to 10px, or 0.625em.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
body {
     font-size: 62.5%;
}
h1 {
   font-size: 3em;
}
p {
   font-size: 1.6em;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
<div>This is normal text with browser default font size.</div>
</body>
</html>
Try it with the Editor

4) CSS Font Style

The font-style property sets the font style for the text content of an element.

This property has three values:

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p.one {
      font-style: normal;
}
p.two {
      font-style: italic;
}
p.three {
      font-style: oblique;
}
</style>
</head>
<body>
<p class="one">This is a normal paragraph.</p>
<p class="two">This is a paragraph with italic font style.</p>
<p class="three">This is a paragraph with oblique font style.</p>
</body>
</html>
Try it with the Editor

5) CSS Font Variant

The font-variant property allows the text to be displayed in a special small-caps variation.

Possible values are normal and small-caps.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p.normal {
    font-variant: normal;
}
p.small {
    font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">My name is prakash singh thakur.</p>
<p class="small">My name is prakash singh thakur.</p>
</body>
</html>
Try it with the Editor

6) CSS Font Weight

The font-weight property specifies the weight or boldness of the font.The possible values of font-style property are: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

The numeric values 100-900 specify the font weights, where each number represents a weight darker than its predecessor. 400 is same as normal & 700 is same as bold.

The bolder and lighter values are relative to the inherited font weight, while the other values are absolute font weights.

Example:

    <!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>
Try it with the Editor