Fonts are the most important part of the webpages as they make the texts that are inevitable organ of the Websites. Fonts in the HTML document can be stylized using the CSS Properties. In this post, we are going to learn how to stylize the fonts of the Webpage using the Font Properties in CSS. As we know, the selectors in CSS allows us to stylize the different elements of an HTML document. In such a way, we can also use the properties and assign the values into them to the HTML elements or tags that contain the text inside them and stylize the fonts of those texts.

Types of Font Properties in CSS

  • Font-size
  • Font-family
  • Font-weight
  • Font-style
  • Font-variant
  • Line-height

Font-size

The Font-size property in CSS determines the size of the fonts inside the particular tag or element of HTML document like <p>, <h1>, <h2> etc.

Example:

<!DOCTYPE html> 
<html>
 <head>
  <title>
  </title> 
  <style>
p{ 
	font-size: 50px; 
} 
  </style>
</head> 
<body> 
	<p> This a styled Font </p>
	 </body>
	  </html>

Output:

font size in css

Explanation: Herefont-size  property changed the size of the texts inside the <p>tag. The units used in the values of the font-size properties are px and em. For Example 10px. 20em etc.

Font-family

The Font-family CSS property changes the entire font type of the Text. There are various kinds of the font supported in the CSS.

Example:

<!DOCTYPE html> 
<html>
 <head>
  <title>
  </title> 
  <style>
h3{
	font-family: Verdana;
}
h4{
	font-family: Comic sans MS;
}
p{ 
	font-family: sans-serif; 
} 
  </style>
</head> 
<body> 
	<h3>This is Font-family: Verdana</h3>
	<h4>This is Font-family: Comic sans MS</h4>
	<p> This is Font-family: Sans-serif </p>
	 </body>
	  </html>

Output:

 

font family in css

Explanation: The font-family property changes the types of font in the text that make the webpage look beautiful. There are are several types of font types that can be used in CSS to stylize the text. Some of them are Roboto, Sans-serif, Verdana, Georgia, Helvetica, etc.

Font-weight

The font-weight property allows the to set the Weight of Font of the text in the HTML page. Basically it changes the thickness of the font.

Example:

<!DOCTYPE html>
<html>
<head>
	<title>Font Weight in CSS</title>
<style type="text/css">
	
.normal p{
	font-weight: normal;
}
.Light p{
	font-weight: lighter;
}
.Bold p{
	font-weight: bolder;
}
</style>
</head>
<body>
<div class="normal">
<p>This is a Normal Font</p>
</div>
<div class="Light">
<p>This is a Light Font</p>
</div>
<div class="Bold">
<p>This is a Bold Font</p>
</div>
</body>
</html>

Output:

fon-weight in css

Explanation: The font-weight properties actually change the thickness of the font which is its weight in terms of CSS. There are many values that can be used with the font-weight properties. Some are Normal, Bold, Bolder, Lighter, Number (like 300, 400 , 500, 600), Initial, Inherit etc.

Font-style

The Font-style property changes the style of the font.

Example:

<!DOCTYPE html>
<html>
<head>
	<title>FOnt Weight in CSS</title>
<style type="text/css">
	
p.a{
	font-style: normal;
}
p.b{
	font-style: italic;
}
p.c{
	font-style: oblique;
}
</style>
</head>
<body>
<p class="a">This is a Normal Font Style</p>
<p class="b">This is a Italic Font Style</p>
<p class="c">This is a Oblique Font Style</p>
</div>
</body>
</html>

Output:

font style in CSS

Explanation:  The Font-style specifies the style of the fonts used in the text. There are some other values also used in the font-style property like initial, inherit etc.

Font-variant

The Font-variant property specifies the variant of the fonts. Mostly used one is the small-caps variant

<!DOCTYPE html>
<html>
<head>
	<title>FOnt Weight in CSS</title>
<style type="text/css">
	
p{
	font-variant:small-caps;
}

</style>
</head>
<body>
<p>This is a Small Caps Font</p>

</div>
</body>
</html>

Output:

Font variant in CSS

Explanation: The Font-variant changes the variant of the font in the text. Some more values of the font-variant properties are Initial and Inherit.

Line-height

The Line-height property sets the distance between the lines in the Paragraph.

<!DOCTYPE html>
<html>
<head>
	<title>Font Weight in CSS</title>
<style type="text/css">
p{
	line-height: normal;
}	
p.a{
	line-height: 30px;
}

</style>
</head>
<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
</body>	
</html>

Output:

line height in CSS

Explanation: The Line-height property is used to increase or decrease the distance between the lines of the paragraph. Its value is written in unit px.

More from this Blog:

 

Avatar

By Rahulwebdev

Hello! I am Rahul Raj. A tech blogger and an enthusiastic web developer. Sharing my skills through my blog. Keen to learn various Programming Languages. " Programming is Poetry".