CSS HTML Font Size Property in px, pt, percent, em, responsive Values

Ad Banner Image

CSS HTML Font Size Property

Every HTML elements have a default font size set in the web browser. And if you want to modify the font size of any Element with the help of font-size property.

CSS Font Size in px, pt, em, percent, Responsive or vw Units

px(pixel), em, percent, rem, pt(point) and other relative lengths are the units used to specify the value to the font-size property.

Font Size with px (pixels)

The default font-size of paragraph or body element is 16px in pixels. Pixel is an absolute value(fixed value).

Example 1 – set the size value in px

<!DOCTYPE html>
<html>
  <head>
	<style>
		.a 
		{
		  font-size: 10px;
		}
	</style>
  </head>
  <body>
	<h1>The font-size Property</h1>
	<p class="a">This is a paragraph.</p>
	<p>This is an another paragraph.</p>
  </body>
</html>

Here above code shows that how can you set the font size to any of Element.

Font Size Basic Example
Fig.1 – Font Size Basic Example

Font Size Percent

The natural font-size of an HTML Element in percent formate is 100%. And if you want to change the font size than you have set the percent value. If you specify percent more than 100% than text is bigger, or if you specify percent less than 100% than text is smaller. Percent is a relative value(font-size related to the parrent font-size).

Example 2 – Set Size in Percent Value

<!DOCTYPE html>
<html>
  <head>
	<style>
		.a 
		{
		  font-size: 150%;
		}
	</style>
  </head>
  <body>
	<h1>The font-size Property</h1>
	<p class="a">This is a paragraph with font size of 150%.</p>
	<p>This is an another paragraph with the natural font-size.</p>
  </body>
</html>

Here above code shows that how can you set the font size to any Element in perecent formate.

CSS Font Size Percent
Fig.2 – Font Size Percent Example

Font Size em

em is also a relative unit of font-size. Basically 1em = 16px. And em unit is depending on the font-size of body. Means that if you change the font-size of body, body{ font-size: 20px; }, than 1em = 20px. Thats why em is a relative unit.

Example 3 – Set the Size in em

<!DOCTYPE html>
<html>
  <head>
	<style>
		.a 
		{
		  font-size: 1em;
		}
	</style>
  </head>
  <body>
	<h1>This is a default font-size heading.</h1>
	<h1 class="a">This is a heading with the font-size of 1em.</h1>
  </body>
</html>

Here above code shows that how you can set font-size in the em unit. And how it work actually.

CSS Font Size em
Fig.3 – Font Size Set in em Example

Font Size point(pt)

Point(pt) is an absolute unit of font-size. Naturally the font-size of paragraph element in pixel formate is 16px. So 12pt = 16px.

Example 4 – Set Font Size in point(pt)

<!DOCTYPE html>
<html>
  <head>
	<style>
		.a 
		{
		  font-size: 12pt;
		}
		.b
		{
		  font-size: 8pt;
		}
	</style>
  </head>
  <body>
	<p>This is a default font-size paragraph in pixel.</p>
	<p class="a">This is a paragraph with the font-size of 12pt.</p>
	<p class="b">This is a paragraph with the font-size of 8pt.</p>
  </body>
</html>

In the above code we define two different values to specify the font-size of the paragraph element. Where first paragraph have default font-size value.

CSS Font Size pt
Fig.4 – Font Size set with pt Example

Font Size Responsive or vw unit

Responsive means that text will resize based on the width of browser window. Viewport specify in terms of the width of browser. If you change the width of browser window than font-size will be changed and this makes font-size responsive.

Example 5 – Font Size Responsive Behavior

<!DOCTYPE html>
<html>
  <head>
	<style>
		.a 
		{
		  font-size: 4vw;
		}
		.b
		{
		  font-size: 2vw;
		}
	</style>
  </head>
  <body>
	<p>This is a default font-size paragraph in pixel.</p>
	<p class="a">This is a paragraph with the font-size of 4vw.</p>
	<p class="b">This is a paragraph with the font-size of 2vw.</p>
  </body>
</html>

In the above code we define two different values to specify the font-size of the paragraph element. Where first paragraph have default font-size value.

You have to try by yourself to know what in actually viewport work. You have to change the size of the browser widow.

CSS HTML Font Size Responsive vw Property
Fig.5 – Font Size Set with the vw or Responsive Technique
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress