css font-stretch Archives

CSS Font Kerning

Please Share On:

Definition:

CSS font-kerning is used to define the space between letters.

Syntax:

font-kerning: auto | normal |none;

Property Value:

Property Value	Description
1. auto	This is a default font-kerning. Your browser decides a font-kerning should be applied or not.
2. normal	applies font-kerning in normal spacing.
3. none	does not applies font-kerning.

1. auto

Definition:

This is a default font-kerning. Your browser decides a font-kerning should be applied or not.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .kerning{
      border: 3px solid black;
      background-color: pink;
      font-kerning: auto;
    }
    </style>
  </head>

  <body>
  	<div class="kerning">This is a paragraph with an auto font-kerning.</div>
  </body>
</html>

Output:

try it yourself

2. normal

Definition:

This property value applies font-kerning in normal space.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .kerning{
      border: 3px solid black;
      background-color: pink;
      font-kerning: normal;
    }
    </style>
  </head>

  <body>
  	<div class="kerning">This is a paragraph with a normal font-kerning.</div>
  </body>
</html>

Output:

try it yourself

3. none

Definition:

This property value does not apply font-kerning and also removes the previously defined font-kerning.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .kerning{
      border: 3px solid black;
      background-color: pink;
      font-kerning: none;
    }
    </style>
  </head>

  <body>
  	<div class="kerning">This is a paragraph with a none font-kerning.</div>
  </body>
</html>

Output:

try it yourself

Donate to support writers

You may be interested in the following topics:

CSS font-weight is used to set the boldness of the font. Its property values are normal, bold, bolder, lighter, or defined in hundreds like 100, 200, 300,…. up to 900. 100 is the lightest, 400 is the normal font-weight and 700 is the same as bold value.

Syntax:

font-weight: normal | bold | bolder | lighter | 100 |200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Property Value:

Property Value	Description
1) normal	This is a default font weight, where browsers display normal fonts.
2) bold	This property value defines the thickness of the font.
3) bolder	This property value defines thicker fonts
4) lighter	This property value defines the lighter fonts.
5) Numbers	Defines in number like 100, 200,300,400,500,600,700,800 and 900.
5.1) 100	100 is the lighter font-weight
5.2) 200	200 is a little bolder than 100 & little lighter than 300.
5.3) 300	300 is a little bolder than 200 & little lighter than 400.
5.4) 400	400 is the same as a normal font-weight
5.5) 500	500 is a little bolder than 400 & little lighter than 600.
5.6) 600	600 is a little bolder than 500 & little lighter than 700.
5.7) 700	700 is the same as bold font-weight
5.8) 800	800 is a little bolder than 700 & little lighter than 900.
5.9) 900	900 is the bolder font-weight

1. normal

Definition:

This is a default font-variant, where browsers display normal fonts.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .normal{
      border: 3px solid black;
      background-color: pink;
      font-weight: normal;
    }
    </style>
  </head>

  <body>
  	<div class="normal">This is a paragraph with a normal font-weight.</div>
  </body>
</html>

Output:

try it yourself

2. bold

Definition:

This property value defines the fonts thickness. 700 in number has the same font-weight like bold.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .bold{
      border: 3px solid black;
      background-color: pink;
      font-weight: bold;
    }
    </style>
  </head>

  <body>
  	<div class="bold">This is a paragraph with a bold font-weight.</div>
  </body>
</html>

Output:

try it yourself

3. bolder

Definition:

This property value defines thicker fonts. 900 in number is the bolder font-weight.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .bolder{
        border: 3px solid black;
        background-color: pink;
        font-weight: bolder;
      }
    </style>
  </head>

  <body>
  	<div class="bolder">This is a paragraph with a bolder font-weight.</div>
  </body>
</html>

Output:

try it yourself

4. lighter

Definition:

This property value defines the lighter fonts. 100 in number is the same font-weight as lighter.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .lighter{
      border: 3px solid black;
      background-color: pink;
      font-weight: lighter;
    }
    </style>
  </head>

  <body>
  	<div class="lighter">This is a paragraph with a lighter font-weight.</div>
  </body>
</html>

Output:

try it yourself

5. number

Font-weight can be defined in number from 100 to 900, which is from lighter to bolder. 100 is the lighter font-weight. 400 is the normal font-weight and 700 is the bolder font-weight. Let see each font-weight output using in number.

5.1) font-weight: 100;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.number{
  border: 3px solid black;
  background-color: pink;
  font-weight: 100;
}
</style>
</head>
   
<body>
<div class="number">This is a paragraph with font-weight is equal to 100. This font-weight is as same as lighter.</div>
</body>
</html>

Output:

try it yourself

5.2) font-weight: 200;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .number{
        border: 3px solid black;
        background-color: pink;
        font-weight: 200;
      }
    </style>
  </head>

  <body>
    <div class="number">This is a paragraph with font-weight is equal to 200. </div>
  </body>
</html>

Output:

try it yourself

5.3) font-weight: 300;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .number{
        border: 3px solid black;
        background-color: pink;
        font-weight: 300;
      }
    </style>
  </head>

  <body>
    <div class="number">This is a paragraph with font-weight is equal to 300. </div>
  </body>
</html>

Output:

try it yourself

5.4) font-weight: 400;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .number{
      border: 3px solid black;
      background-color: pink;
      font-weight: 400;
    }
    </style>
  </head>

  <body>
  	<div class="number">This is a paragraph with font-weight is equal to 400. 400 is the same as normal.</div>
  </body>
</html>

Output:

try it yourself

5.5) font-weight: 500;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .number{
      border: 3px solid black;
      background-color: pink;
      font-weight: 500;
    }
    </style>
  </head>

  <body>
  	<div class="number">This is a paragraph with font-weight is equal to 500. </div>
  </body>
</html>

Output:

try it yourself

5.6) font-weight: 600;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .number{
      border: 3px solid black;
      background-color: pink;
      font-weight: 600;
    }
    </style>
  </head>

  <body>
  	<div class="number">This is a paragraph with font-weight is equal to 600. </div>
  </body>
</html>

Output:

try it yourself

5.7) font-weight: 700;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .number{
      border: 3px solid black;
      background-color: pink;
      font-weight: 700;
    }
    </style>
  </head>

  <body>
  	<div class="number">This is a paragraph with font-weight is equal to 700. </div>
  </body>
</html>

Output:

try it yourself

5.8) font-weight: 800;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .number{
      border: 3px solid black;
      background-color: pink;
      font-weight: 800;
    }
    </style>
  </head>

  <body>
  	<div class="number">This is a paragraph with font-weight is equal to 800. </div>
  </body>
</html>

Output:

try it yourself

5.9) font-weight: 900;

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .number{
      border: 3px solid black;
      background-color: pink;
      font-weight: 900;
    }
    </style>
  </head>

  <body>
  	<div class="number">This is a paragraph with font-weight is equal to 900. </div>
  </body>
</html>

Output:

try it yourself

Donate to support writers

You may be interested in the following topics:

CSS Font Variant

Please Share On:

Definition:

CSS font-variant is used to convert the text into lowercase or uppercase using CSS font-variant property value.

Syntax:

font-variant: normal | small-caps | initial | inherit

Property Value:

Property Value	Description
1. normal	This is a default font-variant, where browsers display normal fonts.
2. small-caps	All fonts converted into upper case
3. initial	Match this property to its default value
4. inherit	Inherit this property from its parent value

1. normal

Definition:

This is a default font-variant, where browsers display normal fonts.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .normal{
      border: 3px solid black;
      background-color: pink;
      font-variant: normal;
    }
    </style>
  </head>

  <body>
  	<div class="normal">This is a paragraph with a normal font-variant.</div>
  </body>
</html>

Output:

try it yourself

2. small-caps

Definition:

By using the small-cap value in the font variants, it converts all fonts into upper case.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .small-caps{
      border: 3px solid black;
      background-color: pink;
      font-variant: small-caps;
    }
    </style>
  </head>

  <body>
  	<div class="small-caps">This is a paragraph with a small-caps font-variant.</div>
  </body>
</html>

Output:

try it yourself

3. initial

Definition:

Match this property to its default value.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .initial{
      border: 3px solid black;
      background-color: pink;
      font-variant: initial;
    }
    </style>
  </head>

  <body>
  	<div class="initial">This is a paragraph, where the fonts are matched to its default value.</div>
  </body>
</html>

Output:

try it yourself

4. inherit

Definition:

Inherit this property from its parent value.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .inherit{
      border: 3px solid black;
      background-color: pink;
      font-variant: inherit;
    }
    </style>
  </head>

  <body>
 	 <div class="inherit">This is a paragraph, where its property is inherited from its parent value.</div>
  </body>
</html>

Output:

try it yourself

Donate to support writers

You may be interested in the following topics:

CSS Font Stretch

Please Share On:

Definition:

CSS font-stretch property is used to stretch the text wider or narrower.

Note: If the selected font doesn’t offer condensed or expanded, the font has no changes.

Syntax:

font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal |  | semi-expanded | expanded | extra-expanded | ultra-expanded

Property Value:

Property Value	Description
1. ultra-condensed	make the text as narrow as it goes
2. extra-condensed	narrow the text than condensed, but not as narrow as ultra-condensed.
3. condensed	narrow the text than semi-condensed, but not as narrow as condensed.
4. semi-condensed	narrow the text than normal, but not as narrow as condensed.
5. normal	This is default value. It doesn’t stretch the text.
6. semi-expanded	expand the text than normal, but not as wide as expanded.
7. expanded	expand the text than semi-expanded, but not as wide as extra-expanded.
8. extra-expanded	expand the text than expanded, but not as wide as ultra-expanded.
9. ultra-expanded	make the text as wider as it goes

Donate to support writers

You may be interested in the following topics: