• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / CSS / CSS Font Properties

CSS Font Properties

2 October 2001 / Leave a Comment

In this reference we will look at how to control font properties using style sheets. This is a really useful feature of CSS because it means that you can avoid having all those <font> tags in your Web pages, and it allows you to easily control all your fonts simply by editing one style sheet file.

We’ll look at the different font properties that can be used with CSS, and explain each property with the aid of some real-life examples. Each example is shown as it renders in your browser.

There are six properties that can be used to control fonts – font-family, font-style, font-variant, font-weight, font-size and font. Let’s look at each of these in turn.

font-family

The font-family property is used to set the font face used for the text (e.g. Times or Arial). The allowed values are:

Value Example
family-name { font-family: Times; }
generic-family { font-family: serif; }

You can specify one or more family names or generic families for the font.

Family names include names such as times, arial, gill and helvetica.

Generic families include the following:

  • serif (e.g. Times)
  • sans-serif (e.g. Helvetica)
  • cursive (e.g. Zapf-Chancery)
  • fantasy (e.g. Western)
  • monospace (e.g. Courier)

It’s always a good idea to include at least one generic-family, in case the browser can’t find a specific font (e.g. not all computers will have Zapf-Chancery installed).

Examples:


p { font-family: "times new roman", serif; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.


p { font-family: western, fantasy; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.

font-style

This property controls whether the font is slanted (italicised) or not. The options are:

Value Example
normal { font-style: normal; }
italic { font-style: italic; }
oblique { font-style: oblique; }

This allows you to set the font style to normal (upright), or italic/oblique (slanted). italic and oblique are usually the same thing on most browsers.

Examples:


p { font-style: oblique; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.

font-variant

Allows you to choose between normal and small-caps lettering. Small-caps are capital letters used in place of lowercase ones. The original capitals are shown as slightly bigger capitals.

The options are:

Value Example
normal { font-variant: normal; }
small-caps { font-variant: small-caps; }

Examples:


p { font-variant: small-caps; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.

font-weight

This controls whether the font is normal weight, bold or light. The options for font-weight values are:

Value Example
normal { font-weight: normal; }
bold { font-weight: bold; }
bolder { font-weight: bolder; }
lighter { font-weight: lighter; }
100, 200, ... 900 { font-weight: 700; }

bolder and lighter will make the font one step bolder or lighter than the default or inherited weight.

The numbers 100 - 900 are a numerical representation for weight, where 100 is the lightest and 900 is the heaviest (boldest). Usually, normal is represented by 400, and bold by 700.

Examples:


p { font-weight: bold; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.


p { font-weight: 200; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.

font-size

The font-size value specifies the size of the font used to display the text. There are four types of values that can be used for font-size:

Value Example
absolute-size { font-size: large; }
relative-size { font-size: smaller; }
length { font-size: 12pt; }
percentage { font-size: 150%; }

absolute-size values are words specifying definite font sizes. Possible values are: xx-small, x-small, small, medium, large, x-large and xx-large. Although the exact font size represented by, say, large, may vary from browser to browser, you can be sure that large will always be bigger than medium, for example.

relative-size values are relative to the inherited or default font size. Possible values are: larger and smaller. For example, if the inherited font size (from a parent style) is large, a relative-size of larger will set the font size to x-large.

length values are specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the CSS Units reference.

percentage values are relative to the parent element’s font size. For example, if the inherited font size is 12pt and a percentage value of 150% is specified, the resulting font size will be 18pt. See the CSS Units reference for details.

Examples:


p { font-size: 10pt; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.


p { font-size: larger; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.


p { font-size: 10px; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.


p { font-size: 150%; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.

font

The final property is font, which can be used as a shorthand for setting all the previous properties in one line, plus the line-height text property. The following values may be used. Note that the values should be used in the order shown; for example, font-size should come after font-weight.

Value Example
font-style { font: italic; }
font-variant { font: small-caps; }
font-weight { font: bold; }
font-size
[ / line-height ]
{ font: 12pt; }
{ font: 120%/150%; }
font-family { font: Times }

Any values not supplied are set to their default values.

Examples:


h3 { font: bold italic 14pt Arial, sans-serif; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.


body { font: normal small-caps 120%/200% Times; }

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

Filed Under: CSS Tagged With: cascading style sheets, stylesheets, text()

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits