CSS Properties; CSS Font(CSS Font-Size and CSS Font-Family)

CSS Font

CSS Font is a CSS property used to control text look. The CSS font property can change the text size, color, style, and more. Here, you will know how to resize your font with percentage.

Here are some essential font attributes:

  1. CSS Font size
  2. CSS Font family 
  3. CSS Font weight
  4. CSS Font color

CSS Font Size

The CSS font-size property helps to select the font's height and size. Simply put, it controls the size of the text of elements. This attribute is applied to all elements and has a default value of medium. This property values include xx-small, small, x-small, large, x-large, and xx-large. The font size of an element can be relative or absolute.

Absolute Size

By using absolute size, the text size is set to a specific size, and it is impossible to change it in all browsers. By knowing the output's physical size, we will be able to make more effective decisions.

Relative Size

This sets the size of the text relative to its surrounding elements and makes it possible to change the text size in browsers when you use it. If you do not set the actual font size, then for the regular text, like paragraphs, the default size is 16px, equal to 1em.

Font Size With Pixels

If you set the text size with pixels, it gives complete control over the text size.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
  
#first {  
  font-size: 50px;  
}  
#second {  
  font-size: 30px;  
}  
</style>  
</head>  
<body>  
  
<p id="first">This paragraph has a size of 50px.</p>  
<p id="second">This paragraph has a size 30px.</p>  
  
</body>  
</html>
Font Size With em

It is helpful to know that em = pixels/16 when converting pixel size to em. Using this command will resize the text. Most developers pick em over pixels, as the world wide web consortium (W3C) advises. As mentioned previously, browsers use 16px as the default text size, which means 16px for 1em.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#first {  
  font-size: 2.5em; /* 40px/16=2.5em */  
}  
  
#second {  
  font-size: 1.875em; /* 30px/116=1.875em */  
 }  
  
#third {  
  font-size: 0.875em; /* 14px/16=0.875em */  
}  
</style>  
</head>  
<body>
<p id='first'>First Sentence.</p>  
<p id='second'>Second Scentence</p>  
<p id='third'>ThirdScentence.</p>  
</body>  
</html>

Responsive Font Size

In this case, the text size is shown using the VW unit, which stands for the 'viewport width.' The size of the window browser is called the viewport. 1vw is equal to 1% of the viewport width.A viewport with a width of 50 cm is equal to 1 VW.

Example

<!DOCTYPE html>  
<html>  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<body>  
  
  
<p style="font-size:10vw;">This paragraph has the width of 10vw.</p>  
<p style="font-size:15vw;">This paragraph has the width of 15vw.</p>  
  
</body>  
</html>

Font Size With The Length Property

Sets the length of the font, which can be expressed in cm, px, pt, etc. Also, there can not be negative values of length in font size.

<!DOCTYPE html>   
<html>   
    <head>   
        <style>   
            .length {   
                color: blue;   
                font-size: 5cm;   
            }   
        </style>   
    </head>   
        
    <body>   
        <h1>font-size property example</h1>   
            
        <p class = "length">This paragraph has the length of 5cm.</p>   
    </body>   
</html>

CSS Font Family

The CSS property allows you to specify a list of font families using commas separated by them. This property defines the font-face of the text of an element and can hold multiple font names as in the case of an unsupported font in the browser; an alternative can be used if the first one is not supported. A variety of font families are used to create attractive web pages.

Two types of font family names exist in CSS, and they are explained below:

  • Family name: It refers to the family of fonts such as "Courrier", "Arial", and "Times."
  • Generic family: The generic family includes five categories: "serif", "sans-serif", "cursive," "fantasy", and "monospace." It is usually placed last in the list of the font family names.

Below, we define the generic-family categories.

Serif: This is primarily used when writing text that intends to be printed, such as books, magazines, newspapers, etc. Various font families are included, including Georgia, Garamond, Times New Roman, Minion, and many others.

Sans-serif: This style is modern, formal, and straightforward. It is generally used but more frequently used in digital text. Arial, Calibri, Verdana, Futura, Lato, and countless other fonts are included in this family.

Cursive: This is primarily used for writing invitation letters, informal messages, etc. It is like a handwritten text written with a pen or a brush. A few font families are included within it, including Insolente, Corsiva, Flanella, Belluccia, Zapfino, and many others.

Monospace: This is used for instructions, mailing addresses, typewritten text, etc. It includes the font family that is Monaco, SimSun, Courier, Consolas, Inconsolata, and many more.

Fantasy: This helps to make the text more expressive, beautiful, and impactful. It includes the font-family: Impact, Copperplate, Cracked, Critter, and many more.

Values

Below are the values of the font-family property.

Family-name/generic-family: This is the list of font-family and generic family names.

Initial: This is to set the property back to its fundamental value.

Inherit: This is used to inherit the property from its original element.

Here's an example to aid our understanding further

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body{  
text-align:center;  
}  
h1.a {  
  font-family: "Times New Roman," Times, serif;  
  color:Yellow;  
}  
  
h2.b {  
  font-family: Arial, Helvetica, sans-serif;  
  color:green;  
}  
</style>  
</head>  
<body>  
<h1>The font-family Property example</h1>  
  
<h1 class="a">Hello Humans :) :)</h1>  
  
<h2 class="b">Welcome to the Techstack city</h2>  
  
</body>  
</html>

CSS Tutorial Quick Links