Fonts come in two main styles:

  • Sans-Serif
  • Serif


Serifs are the small decorations on the font characters:

Sans-Serif Serif


Fonts are defined by setting their properties:


Property Description Value
font-style Specifies the style to apply to the font normal, italic, oblique
font-variant Converts lower-case characters to capitals, but in a smaller font size normal, small-caps
font-weight Specifies how bold or light a font should be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
font-size Specifies the size of the font xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %
font-family Specifies the actual font face to apply family-name. e.g."verdana", "arial", "courier" etc.
generic-family. e.g. "serif", "sans-serif", "cursive", "fantasy", "monospace".
font Shorthand version to set all properties e.g. font: Arial 17px bold italic



The font properties can be set in a single style declaration, by specifying the attributes in the following order:

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size/line-height *
  5. font-family *

values are required. If one of the other values is missing, the default values will be inserted, if any.


<!DOCTYPE html>
        <title>My Document Title</title>
        <style type="text/css">
            p {font: 17px arial italic bold, sans-serif;}
        <p>My paragraph text</p>

Save & refresh browser:

My paragraph text




A selection of commonly used web-safe font-families. Multiple values ensure a fallback to a value that the browser can pick if no other fonts are available:



Serif Fonts

Georgia, serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
"Times New Roman", Times, serif

Sans-Serif Fonts

Arial, Helvetica, sans-serif
"Arial Black", Gadget, sans-serif
"Comic Sans MS", cursive, sans-serif
Impact, Charcoal, sans-serif
"Lucida Sans Unicode", "Lucida Grande", sans-serif
Tahoma, Geneva, sans-serif
"Trebuchet MS", Helvetica, sans-serif
Verdana, Geneva, sans-serif

Monospace Fonts

"Courier New", Courier, monospace
"Lucida Console", Monaco, monospace

Leave a Reply