in

CSS FONTS | Learn How To Design Web Fonts Using CSS

In this tutorial we will be discussing about CSS fonts and how you can design them for your web document. In our previous tutorial we discussed about CSS background. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS BACKGROUND | Learn How to Design Web Background using CSS

CSS FONTS

CSS gives developers the opportunity to adjust and style various properties to give the web document the best feel. Some of this properties include:

  • The font-size
  • The font-family
  • The font-style
  • The font-variant
  • The font-weight

The font-size

The font size of your web page can be tweaked or altered using css. The best way to carry out this is by following the example below

<!DOCTYPE html>
<html lang="en">
<head>
  
     
   
   <title>font size illustration</title>
</head>
<body >
   <p style="font-size: small;" >small font size</p    >
   <p style="font-size: large;"   >large font size</p  >
   <p style="font-size: 30px;"   >30px font size</p>
   
   

</body>
</html>

Result

font size illustration

small font size

large font size

30px font size

The font-family

The font family of your web page can be tweaked or altered using css. The best way to carry out this is by following the example below

<!DOCTYPE html>
<html lang="en">
<head>
  
     
   
   <title>font family illustration</title>
</head>
<body >
   <p style="font-family: Arial;" > font family Arial</p    >
   <p style="font-family: Cambria;"   >font family cambria</p  >
   <p style="font-family: fantasy;"   >font family fantasy</p>
   
   

</body>
</html>

Result

font family illustration

font family Arial

font family cambria

font family fantasy

The font style

The font style of your web page can be tweaked or altered using different css font styles. The best way to carry out this is by following the example below

<!DOCTYPE html>
<html lang="en">
<head>
  
     
   
   <title>font style illustration</title>
</head>
<body >
   <p style="font-style:italic ;" > font style italic</p>
   <p style="font-style: normal;"   >font style normal</p  >
   <p style="font-style: oblique;"   >font style oblique</p>
   
   

</body>
</html>

Result

font style illustration

font style italic

font style normal

font style oblique

The font variant

You can set up the font variant of your web element using the example below. Options you have are the normal, unset,inherit and small-caps

<!DOCTYPE html>
<html lang="en">
<head>
  
     
   
   <title>font variant illustration</title>
</head>
<body >
   <p style="font-variant: initial ;" > font variant inital</p>
   <p style="font-variant: small-caps;"   >font variant small-caps</p >
   <p style="font-variant: normal;"   >font variant normal</p>
   <p style="font-variant: unset;"   >font variant unset</p>
   
   

</body>
</html>

Result

font variant illustration

font variant inital

font variant small-caps

font variant normal

font variant unset

The font weight

CSS allows developers to set up different levels of font weight using the font-weight property. Example of different font weights are shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
     
   
   <title>font weight illustration</title>
</head>
<body >
   <p style="font-weight: 500 ;" > font weight 500</p>
   <p style="font-weight: bold;" >font weight bold</p >
   <p style="font-weight: bolder;" >font weight bolder</p>
   <p style="font-weight: normal;" >font weight normal</p>
   
   

</body>
</html>

Result

font weight illustration

font weight 500

font weight bold

font weight bolder

font weight normal

we can extend the above example by adding colors to each font as shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
     
   
   <title>font weight and color illustration</title>
</head>
<body >
   <p style="font-weight: 500; color: blue; " > font weight 500 with blue color</p>
   <p style="font-weight: bold; color: red;" >font weight bold with red color</p >
   <p style="font-weight: bolder; color:green;" >font weight bolder with green color</p>
   <p style="font-weight: normal; color: yellow;" >font weight normal with yellow color</p>
   
   

</body>
</html>

Result

font weight and color illustration

font weight 500 with blue color

font weight bold with red color

font weight bolder with green color

font weight normal with yellow color

conclusion

The CSS fonts properties listed above are needed when styling your fonts for a web document. A good understanding of this tags will enable you make good web page formatting and structure. Lets move on to the next topic on CSS TEXT

What do you think?

css background

CSS BACKGROUND | Learn How to Design Web Background using CSS

css text

CSS Text | Learn How to Design Text in Web Document Using CSS