CSS Tutorial - CSS Font








CSS can choose font family, set font size, control font weight, and add font style.

Font Family

The font-family property specifies the fonts in order of preference. The browser begins with the first font and use the available one.

CSS defines some generic fonts that are available everywhere. There can be variations in the exact font that is used by a browser to render them. A summary of the generic font families can be found in the following table.

Generic Font FamilyExample Implementation Font
serifTimes
sans-serifHelvetica
cursive Zapf-Chancery
fantasyWestern
monospaceCourier

The following code shows the font-family property applied to a block of text. 

p  {
    font-family: "HelveticaNeue  Condensed", monospace;
}

If HelveticaNeue Condensed is not available in your system, the generic monospace is used.





font-size

The font-size property sets the size of the font. The allowed values for this property are described in the following list.

  • xx-small
    x-small
    small
    medium
    large
    x-large
    xx-large
    Sets the font size. The browser is responsible for deciding the exact size that each value represents.
  • smaller
    larger
    Sets the font size relative to the font size of the parent element.
  • length
    Sets the font size precisely using a CSS length value.
  • %
    Sets the font size as a percentage of the parent element's font size.

The following code shows the font-size property. 

<!--  ww  w  .  j a v  a 2  s  .c  om-->
<html>
<head>
<style type='text/css'>


p.absoluteone {
  font-size: xx-small;
}

p.absolutetwo {
  font-size: x-small;
}

p.absolutethree {
  font-size: small;
}

p.absolutefour {
  font-size: medium;
}

p.absolutefive {
  font-size: large;
}

p.absolutesix {
  font-size: x-large;
}

p.absoluteseven {
  font-size: xx-large;
}

p.pixelsone {
  font-size: 9px;
}

p.pixelstwo {
  font-size: 12px;
}

p.pixelsthree {
  font-size: 14px;
}

p.pixelsfour {
  font-size: 18px;
}

p.pixelsfive {
  font-size: 24px;
}

p.pixelssix {
  font-size: 36px;
}

p.pixelsseven {
  font-size: 48px;
}

p.picaone {
  font-size: 1pc;
}

p.picatwo {
  font-size: 2pc;
}

p.picathree {
  font-size: 3pc;
}

p.picafour {
  font-size: 4pc;
}

p.pointone {
  font-size: 9pt;
}

p.pointtwo {
  font-size: 12pt;
}

p.pointthree {
  font-size: 14pt;
}

p.pointfour {
  font-size: 18pt;
}

p.pointfive {
  font-size: 24pt;
}

p.pointsix {
  font-size: 36pt;
}

p.pointseven {
  font-size: 48pt;
}

p.relativeone {
  font-size: smaller;
}

p.relativetwo {
  
}

p.relative {
  font-size: larger;
}

p.emone {
  font-size: 1em;
}

p.emtwo {
  font-size: 2em;
}

p.emthree {
  font-size: 3em;
}

p.emfour {
  font-size: 4em;
}

p.exone {
  font-size: 1ex;
}

p.extwo {
  font-size: 2ex;
}

p.exthree {
  font-size: 3ex;
}

p.exfour {
  font-size: 4ex;
}

p.exfive {
  font-size: 5ex;
}

p.exsix {
  font-size: 6ex;
}

p.exseven {
  font-size: 7ex;
}

p.percentone {
  font-size: 50%;
}

p.percenttwo {
  font-size: 75%;
}

p.percentthree {
  font-size: 100%;
}

p.percentfour {
  font-size: 150%;
}

p.percentfive {
  font-size: 200%;
}

p.percentsix {
  font-size: 400%;
}
</style>

</head>

<body>

  <div class="page">

    <h1>Font Sizes</h1>

    <div class="column">

      <h2>Absolute</h2>
      <p class="absoluteone">xx-small</p>
      <p class="absolutetwo">x-small</p>
      <p class="absolutethree">small</p>
      <p class="absolutefour">medium</p>
      <p class="absolutefive">large</p>
      <p class="absolutesix">large</p>
      <p class="absoluteseven">large</p>

    </div>
    <div class="column">

      <h2>Pixels</h2>
      <p class="pixelsone">9 px</p>
      <p class="pixelstwo">12 px</p>
      <p class="pixelsthree">14 px</p>
      <p class="pixelsfour">18 px</p>
      <p class="pixelsfive">24 px</p>
      <p class="pixelssix">36 px</p>
      <p class="pixelsseven">48 px</p>

    </div>
    <div class="column">

      <h2>Points</h2>
      <p class="pointone">9 pt</p>
      <p class="pointtwo">12 pt</p>
      <p class="pointthree">14 pt</p>
      <p class="pointfour">18 pt</p>
      <p class="pointfive">24 pt</p>
      <p class="pointsix">36 pt</p>
      <p class="pointseven">48 pt</p>

    </div>
    <div class="column">

      <h2>Picas</h2>
      <p class="picaone">1 pc</p>
      <p class="picatwo">2 pc</p>
      <p class="picathree">3 pc</p>
      <p class="picafour">4 pc</p>

    </div>

    <hr />

    <div class="column">

      <h2>Relative Sizes</h2>
      <p class="relativeone">smaller</p>
      <p class="relativetwo">no style</p>
      <p class="relativethree">larger</p>

    </div>
    <div class="column">

      <h2>Ems</h2>
      <p class="emone">1em</p>
      <p class="emtwo">2em</p>
      <p class="emthree">3em</p>
      <p class="emfour">4em</p>

    </div>
    <div class="column">

      <h2>Exs</h2>
      <p class="exone">1ex</p>
      <p class="extwo">2ex</p>
      <p class="exthree">3ex</p>
      <p class="exfour">4ex</p>
      <p class="exfive">5ex</p>
      <p class="exsix">6ex</p>
      <p class="exseven">7ex</p>

    </div>
    <div class="column">

      <h2>Percents</h2>
      <p class="percentone">50%</p>
      <p class="percenttwo">75%</p>
      <p class="percentthree">100%</p>
      <p class="percentfour">150%</p>
      <p class="percentfive">200%</p>
      <p class="percentsix">400%</p>

    </div>

  </diV>

</body>
</html>

Click to view the demo





font-weight

You can set the weight of the font using the font-weight property. Its possible values are:

  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

The following code uses the font-weight and font-style Properties. 

<!DOCTYPE HTML>
<html>
<head>
<style>
p.one {<!--from   www .  ja v a2 s.  c o  m-->
  font-weight: normal;
}

p.two {
  font-weight: bold;
}

p.three {
  font-weight: normal;
}

p.three span {
  font-weight: bolder;
}

p.four {
  font-weight: bold;
}

p.four span {
  font-weight: lighter;
}

p.five {
  font-weight: 100;
}

p.six {
  font-weight: 200;
}

p.seven {
  font-weight: 300;
}

p.eight {
  font-weight: 400;
}

p.nine {
  font-weight: 500;
}

p.ten {
  font-weight: 600;
}

p.eleven {
  font-weight: 700;
}

p.twelve {
  font-weight: 800;
}

p.thirteen {
  font-weight: 900;
}

.column {
  width: 150px;
  float: left;
  margin-right: 30px;
}
</style>
</head>

<body>
  <h1>Font Weight</h1>

  <div class="column">
    <p class="one">normal</p>
    <p class="two">bold</p>
    <p class="three">
      <span>bolder</span>.
    </p>
    <p class="four">
      <span>lighter</span>.
    </p>
  </div>

  <div class="column">
    <p class="five">100</p>
    <p class="six">200</p>
    <p class="seven">300</p>
    <p class="eight">400</p>
    <p class="nine">500</p>
    <p class="ten">600</p>
    <p class="eleven">700</p>
    <p class="twelve">800</p>
    <p class="thirteen">900</p>
  </div>

</body>
</html>

Click to view the demo

font-style

The font-style property selects between normal, italic, and oblique fonts.

There is a distinction between italic and oblique fonts, but the distinction makes little difference to the appearance of text.

The following code uses the font-weight and font-style Properties. 

p.one {
  font-style: normal;
}

p.two {
  font-style: italic;
}

p.three {
  font-style: oblique;
}

<!DOCTYPE HTML>
<html>
<head>
<style type='text/css'>
<!--  w  ww .  j  ava2  s.c  om-->
p.one {
  font-style: normal;
}

p.two {
  font-style: italic;
}

p.three {
  font-style: oblique;
}
</style>

</head>

<body>

  <p class="one">This is a normal font</p>
  <p class="two">This is an italic font</p>
  <p class="three">This is an oblique font</p>

</body>
</html>

Click to view the demo

Property Description CSS
@font-face Load font from web3
font-family Set the font family for text1
font-size-adjust Set the readability of text when font fallback occurs3
font-size Set the font size of text1
font-stretch Choose a normal, condensed, or expanded face for a font family3
font-style Set the font style for text1
font-variant Set to use a small-caps font1
font-weight Set the weight of a font1
font Shorthand property for font1