Loading...
Please wait.
Join LetsLearnLights for expert coding and programming guidance. Study popular languages like Java, Python and JavaScript. Improve your skills today

Complete Guide to CSS Font Property: Explained with Examples and Use Cases

Mnzr chauhanMnzr chauhan February 15, 2023

Description:

The CSS font property is a powerful tool for controlling the typography of web pages. This comprehensive guide covers all aspects of the font property, including font-family, font-size, font-weight, font-style, line-height, and more. Each aspect is explained in detail with clear examples and use cases. Whether you're a beginner or an experienced developer, this guide will help you master the CSS font property and create beautiful, well-designed websites.

The Table of content is given below
  1.  Introduction 
  2.  Explain in Details 
  3.  Final Lines 

Headlines.

Browsers have varying levels of support for CSS font properties, depending on the version and type. Generally speaking newer versions of browsers offer better support for these properties than older versions.
The most common font property is "font-family", which specifies the typeface to use. It provides the ability to assign a range of different fonts to different elements on a page, and is usually supported by all browsers.
'Font-weight' allows designers to set the weight of a font, and the majority of browsers support it. More advanced options, such as 'font-style' and 'font-variant', may not be supported by all browsers, so it's important to check compatibility before using these properties. The CSS 'font-size' property allows designers to set the size of the text, and most browsers support it. 'Line height' is another font property that is supported by the majority of browsers. Finally, the 'font-stretch' property allows designers to stretch or compress a font horizontally. However, not all browsers support this property, so it's important to check compatibility before using it.
In conclusion, the majority of common font properties are supported by the majority of browsers, but it's important to check compatibility before using more advanced properties.

Advertise...

Explain in Details.

The CSS font property is used to specify the font-related properties of an element, such as font family, size, weight, style, and line height. It can be used as a shortened property to set multiple font properties in one line.

The syntax for the shortened font property is as follows:
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
For example, to set the font properties of an element to italic, bold, 20px size, with a line height of 1.5, and using the font family of Arial, the CSS would be: 

<style>
  #font_test_div1 {
    font: italic normal bold 20px/1.5 impact;
  }
</style>
<div id="font_test_div1">Font Test Example</div>

Font Test Example
This will set the font-style to italic, font-variant to normal, font-weight to bold, font-size to 20px, line-height to 1.5, and font-family to Impact.

Using the shortened font property is a convenient way to set multiple font properties in a single line, saving time and space in your CSS code.

Using Fonts properties Separately:

There are five font properties in CSS: font-style, font-variant, font-weight, font-size, and font-family. These properties can be used individually or combined using the shortened font property to specify the font-related properties of an element.

font-style

In CSS, the font-style property is used to define the style of the text in an element. The font-style property in CSS can take the following possible values:

  1. normal - The default value. The text is displayed in the normal style.
  2. italic - The text is displayed in an italicized style.
  3. oblique - The text is displayed in an oblique style, which is a slanted style.
  4. inherit - The font-style property is inherited from the parent element. 

<style>
  #font_test_div2 {
    font-style: italic;
  }

  #font_test_div3 {
    font-style: oblique;
  }
</style>
<div id="font_test_div2">Font italic Example</div>
<div id="font_test_div3">Font oblique Example</div>

Font italic Example
Font oblique Example
Please note that although italic and oblique values may result in a similar slanted appearance, they are not the same. The main difference between these two values is that italic uses a specially designed italic font that has a different shape and spacing, resulting in a cursive or stylized appearance, while oblique simply slants the regular font without modifying its shape or spacing.
Another difference is that the oblique value can be modified with an angle value, such as [integerValue]deg (e.g., 30deg), to create a slanting effect with a specific angle, while italic cannot be modified in this way. 

<style>
  #font_test_div4 {
    font-style: oblique 30deg;
  }
</style>
<div id="font_test_div4">Font oblique 30deg Example</div>

Font oblique 30deg Example

font-variant

font-variant is a CSS property that sets the variation of the font, such as small caps or normal font.
The following are the possible values for font-variant:
  1. normal - This is the default value and sets the font to its normal style.
  2. small-caps - This value sets the font to small capitals. In this style, lowercase letters are replaced by smaller versions of uppercase letters.
  3. all-small-caps - This value sets the font to all small capitals, which means that all letters in the text will be replaced by smaller versions of uppercase letters.
  4. petite-caps - This value sets the font to petite capitals, which means that the uppercase letters will be slightly smaller than the normal size, and the lowercase letters will be even smaller.
  5. all-petite-caps - This value sets the font to all petite capitals, which means that all letters in the text will be slightly smaller than the normal size.
  6. unicase - This value sets the font to unicase, which means that uppercase and lowercase letters are replaced by uppercase letters with some lowercase letter attributes.
  7. titling-caps - This value sets the font to titling capitals, which means that the uppercase letters are much larger than the normal size. 

<style>
  /* Normal font style */
  #font_test_div5>div:nth-child(1) {
    font-variant: normal;
  }
  /* Small caps font style */
  #font_test_div5>div:nth-child(2) {
    font-variant: small-caps;
  }
  /* All small caps font style */
  #font_test_div5>div:nth-child(3) {
    font-variant: all-small-caps;
  }
  /* Petite caps font style */
  #font_test_div5>div:nth-child(4) {
    font-variant: petite-caps;
  }
  /* All petite caps font style */
  #font_test_div5>div:nth-child(5) {
    font-variant: all-petite-caps;
  }
  /* Unicase font style */
  #font_test_div5>div:nth-child(6) {
    font-variant: unicase;
  }
  /* Titling caps font style */
  #font_test_div5>div:nth-child(7) {
    font-variant: titling-caps;
  }
</style>
<div id="font_test_div5">
  <div>Example of font-variant: normal;</div>
  <div>Example of font-variant: small-caps;</div>
  <div>Example of font-variant: all-small-caps;</div>
  <div>Example of font-variant: petite-caps;</div>
  <div>Example of font-variant: all-petite-caps;</div>
  <div>Example of font-variant: unicase;</div>
  <div>Example of font-variant: titling-caps;</div>
</div>

Example of font-variant: normal;
Example of font-variant: small-caps;
Example of font-variant: all-small-caps;
Example of font-variant: petite-caps;
Example of font-variant: all-petite-caps;
Example of font-variant: unicase;
Example of font-variant: titling-caps;
In the above example, the different font-variant values are applied to HTML div elements. You can also apply them to other elements that contain text.

font-weight

Font-weight is a CSS property that controls the boldness of text. It defines the thickness or darkness of the glyphs used to represent text. The property takes numerical values from 100 to 900 or keywords such as normal, bold, bolder, and lighter. The default value is normal, which is equivalent to 400.
Here are the possible values of the font-weight property and their corresponding examples 


<style>
  /* 100 (Thin): It is the lightest weight available for a font */
  #font_test_div6>div:nth-child(1) {
    font-weight: 100;
  }
  /* 200 (Extra Light): It is slightly bolder than the thin weight */
  #font_test_div6>div:nth-child(2) {
    font-weight: 200;
  }
  /* 200 (Extra Light): It is slightly bolder than the thin weight. */
  #font_test_div6>div:nth-child(3) {
    font-weight: 300;
  }
  /* 400 (Normal): It is the default weight for most fonts */
  #font_test_div6>div:nth-child(4) {
    font-weight: 400;
  }
  /* 500 (Medium): It is bolder than the normal weight but not as bold as semi-bold */
  #font_test_div6>div:nth-child(5) {
    font-weight: 500;
  }
  /* 600 (Semi-Bold): It is bolder than the medium weight but not as bold as bold */
  #font_test_div6>div:nth-child(6) {
    font-weight: 600;
  }
  /* 700 (Bold): It is a bold weight that is commonly used for headings and important text */
  #font_test_div6>div:nth-child(7) {
    font-weight: 700;
  }
  /* 800 (Extra-Bold): It is bolder than the bold weight */
  #font_test_div6>div:nth-child(8) {
    font-weight: 800;
  }
  /* 900 (Ultra-Bold): It is the heaviest weight available for a font */
  #font_test_div6>div:nth-child(9) {
    font-weight: 900;
  }</style>
<div id="font_test_div6">
  <div>Example of font-weight: 100;</div>
  <div>Example of font-weight: 200;</div>
  <div>Example of font-weight: 300;</div>
  <div>Example of font-weight: 400;</div>
  <div>Example of font-weight: 500;</div>
  <div>Example of font-weight: 600;</div>
  <div>Example of font-weight: 700;</div>
  <div>Example of font-weight: 800;</div>
  <div>Example of font-weight: 900;</div>
</div>

Example of font-weight: 100;
Example of font-weight: 200;
Example of font-weight: 300;
Example of font-weight: 400;
Example of font-weight: 500;
Example of font-weight: 600;
Example of font-weight: 700;
Example of font-weight: 800;
Example of font-weight: 900;

font-size

Font-size refers to the size of the text in a web page. It can be set using various units, such as pixels, ems, rems, percentages, and more.
All CSS Units are already Explained in following Post

font-family

Font-family is a CSS property that defines the font to be used for text. It specifies a prioritized list of font family names and/or generic family names for the selected element. Here are some of the possible values for font-family:

Specific font family names:

  • Arial
  • Helvetica
  • Times New Roman
  • Georgia
  • Courier
Example code: 


<style>
  #font_test_div7 {
    font-family: Arial, Helvetica, sans-serif;
  }
</style>
<div id="font_test_div7">Testing Div for fonts Arial, Helvetica, sans-serif</div>

Testing Div for fonts Arial, Helvetica, sans-serif
This code sets the font family for element with id of "font_test_div7" to Arial, and if it's not available, it will try to use Helvetica. If neither of these fonts is available, the browser will fall back to a sans-serif font.

Generic family names:

  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy
Example code: 

<style>
  #font_test_div8 {
    font-family: serif;
  }
</style>
<div id="font_test_div8">Testing Div for font serif</div>

Testing Div for font serif
This code sets the font family for all elements with id of "font_test_div8" to a serif font, which includes fonts like Times New Roman and Georgia.

Font family with multiple words:

  • "Lucida Sans Unicode"
  • "Segoe UI"

Multiple words Font family should be wrapped with quotes like "Font family" or 'Font family'. When a font family name has more than one word, it should be wrapped in quotes (either single or double quotes) so that the browser can recognize it as a single value. This is important because without the quotes, the browser may interpret the font family as multiple values, which can lead to unexpected results.

Example code: 

<style>
  #font_test_div9 {
    font-family: "Lucida Sans Unicode", "Segoe UI", sans-serif;
  }
</style>
<div id="font_test_div9">Testing Div for "Lucida Sans Unicode", "Segoe UI", sans-serif</div>

Testing Div for "Lucida Sans Unicode", "Segoe UI", sans-serif
This code sets the font family for all elements with id of "font_test_div9" to first look for the "Lucida Sans Unicode" font, then the "Segoe UI" font, and if neither is available, fall back to a sans-serif font.

Using system fonts:

  • system-uielements
  • -apple-system
  • BlinkMacSystemFont
  • Segoe UI
Example code: 

<style>
  #font_test_divA {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  }
</style>
<div id="font_test_divA">Testing Div for font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;</div>

Testing Div for font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
This code sets the font family for all elements with id of "font_test_divA" to use system fonts, prioritizing the ones that are available on Apple and Mac systems first. If none of those fonts are available, the browser will fall back to a sans-serif font.

In summary, font-family is a versatile property that allows web designers to choose the most appropriate font family for their content. The best practice is to provide a list of fallback options so that the browser can display an appropriate font if the preferred font is not available.

Final Lines.

In conclusion, the CSS font property is a powerful tool for controlling the appearance of text on a web page. By using the various font-related properties, designers can adjust the size, weight, style, and family of text to achieve the desired look and feel.
In this guide, we covered the different font-related properties and their use cases, including font-size, font-weight, font-style, font-variant and font-family. We also explored some of the values that can be used with each property and provided example code to demonstrate how they work. Remember that when using fonts in web design, it is important to consider accessibility and compatibility with different devices and browsers. Providing a fallback font family and using web-safe fonts can help ensure that your text is legible and consistent across different platforms.
Overall, the CSS font property offers a wide range of options for customizing text on a web page. By understanding how to use these properties effectively, designers can create visually appealing and easy-to-read content that enhances the user experience.
Posted by Mnzr chauhan
««« Thanks again for reading our blog. If you have any questions, feel free to ask. Your support is enough for us to share this post with your friends. And a good comment for our hard work. »»»
Thank you ツ
Mnzr chauhan

Posted by Mnzr chauhan

Post a Comment

0 Comments

Post a Comment