Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

CSS Font Properties

In HTML4, the <font> tag was deprecated by the W3C. It is still used by some Web designers today, so the tag isn’t totally obsolete yet, but replacing all <font> tags with CSS will keep your files lean, clean, and mean!

CSS font properties are very popular styles used in web design; they are simple to implement, but the outcome is dramatic. Everyone seems to love font changes on a web page. It adds a creative flair to a page without adding much trouble and file weight, like the <font> tag can do.

Below are the CSS font properties we will be working with in this tutorial. Notice there is a hyphen in each property name.

CSS Property Values
font-family [font name], serif, sans-serif, monospace, cursive, fantasy
font-style normal, italic, oblique
font-weight normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
font-variant normal, small-caps
font-size [length], [percentage], xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger

Let’s go over each CSS font property in detail.

CSS Font-family property

Values include: [font name], serif, sans-serif,
monospace, cursive, fantasy.

The last five values are considered "generic" font choices. Most browsers have a predetermined "default" font value for each of the generic fonts. For example, your browser’s default font for serif might be "Times New Roman" and the default font for sans-serif might be "Arial."

Generic Font Choices

Serif Fonts

Serif fonts are the fonts with the little "serifs" or decorative strokes at the end of each character. A few examples of serif fonts are Garamond, Georgia, Times New Roman, and Paramount. Here is a link that will offer some additional info:

Sans Serif Fonts

Sans serif fonts are without (sans) the little extra stroke. Arial, Tahoma, Franklin Gothic Book, and Verdana are all examples of sans serif fonts. Here is a link that will offer a little more info:

Make sure to include the (-) hyphen when using the generic sans-serif value.

Monospace Fonts

Monospace fonts are similar to type-writer text. They are non-proportional, meaning each character utilizes the exact same width of space. Your text editor most likely uses a monospace font to display the coding. It is very helpful when reading code to have all the characters the same width for easier troubleshooting. An example of a monospace font is Courier.

Cursive and Fantasy Fonts

Cursive fonts are curvy and sometimes similar to handwriting. Comic Sans, Freestyle Script, and Signature are all examples of cursive fonts.

Fantasy fonts are decorative and not easily classified; its definition might be left up to the interpretation of the browser/user. It is not advisable to work with a generic fantasy font, as the effect could be unexpected in some browsers.

Using Generic Font Values

When a generic font value is specified for an element with the CSS font-family rule, the browser will render the text content according to its default choice for that particular generic. It is not specific, so you are taking a chance on how the text will display.

p {font-family: sans-serif;}

The above rule will render all content contained in paragraph tags to display in the browser default font for sans-serif; the default ultimately depends on the browser and the user, but very often it will render as Arial.

Please view my font-generic.html file to see how your own browser interprets the generic font values. Make sure to view the code.

Specific Font Names

So, what if don’t want to take a chance on how a generic font will display for your visitors? By defining specific fonts for an element, you gain more control over how text will display.

p {font-family: Arial;}

Before you get all excited, thinking you can design your page using every cool font in the book, STOP! The bad news is that your visitor must have that particular font installed on their system.

Using a less popular font like Quill or Bradley Hand ITC might look awesome in your own browser, but your visitors won’t see your page as you designed it unless they have that font installed.

There is a bit of good news. You can still use that obscure font as your font-family value, but just make sure to also include a 2nd and/or 3rd choice as backup. Even better, along with the specific font names, you should also list a generic font as the last resort choice.

Here is an example:

h1 {font-family: Quill, Arial, Tahoma, sans-serif;}

The above CSS rule works like this: for all h1 heading text, the browser will check each visitors’ installed fonts. If Quill is not available, then the browser will check for Arial. If Arial is not installed, it will check for Tahoma. If Tahoma is not installed, the browser will render the h1 heading text in the default sans-serif font. Very efficient!

Important To Remember:

  • A designer can use as many or as little font choices as they want, but I suggest at least 2 or 3 font names along with the 1 generic.
  • Never use more than one generic; it isn’t necessary.
  • Keep the generic at the end of the font list.

Now take a look at this CSS rule:

p {font-family: 'Times New Roman', Garamond, Times, serif;}

Do you notice anything different in the above rule? How about those ‘quotation marks’ - It is extremely important to always include ‘quotes’ around any font name that has a space in it, or if it includes a special character in the name.

Without the quotes, the browser will read your font choices incorrectly. In the case above, if the quotes were missing, the browser would look for fonts named Times, New, Roman, Garamond, and Times.

You can use "double quotes" or ’single quotes’ - either is acceptable in embedded or external style.

On the flip side, never enclose a generic font in quotes. The browser will interpret it as an official font name, and that defeats the purpose of the generic font.

View my font-family.html file.

Which Font to Choose?

Because there are thousands (millions) of available fonts, it is impossible to know what fonts your visitors will have installed on their computer system. The good news is, there are lists of fonts that will most likely be installed with a particular operating system.

You should be okay with a mixture of fonts like these:

  • Tahoma (sans-serif)
  • Verdana (sans-serif)
  • Arial (sans-serif)
  • Arial Black (sans-serif)
  • Helvetica (sans-serif)
  • Times New Roman (serif)
  • Times (serif)
  • Garamond (serif)
  • Georgia (serif)
  • Comic Sans MS (sans-serif or cursive)
  • Impact (sans-serif)
  • Century Gothic (sans-serif)
  • Trebuchet MS (sans-serif)
  • Courier New (monospace)

Some web site links to help you out:

Remember, if you want to design your pages using a font that might not be very popular, always make sure to also include at least one or two common fonts along with the generic font.

There is no way to guarantee your page will look the same to every visitor, but at least you can retain some design control.

CSS Font-style Property

Values include: normal, italic, oblique.

Normal is the default value for most elements, except <em> which is italic by default.

Italic and oblique are very similar. Both will render slanted text. It has been written than "italic" is more of a specific font choice, in example "Arial Italic." Choosing oblique will render any font as slanted, whether the font has an italic label or not. In most cases, you will not be able to visually notice a difference between italic and oblique. They both work virtually the same.

The CSS rules below will render h3 heading text as italic and any text enclosed in an <em> tag will look normal (not italic as the default style.)

h3 {font-style: italic;}
em {font-style: normal;}

View my font-style.html file
for a working example of font-style and font-family.

CSS Font-weight Property

Values include: normal, bold, bolder, lighter,
100, 200, 300, 400, 500,
600, 700, 800, 900.

The CSS font-weight property specifies the boldness of text, or lack of boldness as it were…in other words, the weight of the font.

Normal is the default value for most elements, except for the heading tags and the strong tag, which will display as bold by default.

The CSS rule below will set the text contained in any em tags with a bold weight.

em {font-weight: bold;}

The values bolder or lighter are rendered depending on the parent element. In example, take a look at this set of CSS rules.

h1 {color: #ff0000;}
p {color: #006633;}
strong {font-weight: bolder;}

In theory, the weight of <strong> text will depend on where the <strong> tag is nested. If it is located in an <h1> heading tag, then it will be bolder than the bold heading text. If it is located in paragraph text, then it will render as medium bold text.

Notice I said "in theory" - in reality, it isn’t as easy to create "bolder" text. It all depends on the chosen font-family and browser; even then, you might not notice any difference between bold and bolder.

The numeric values of 100 to 900 will let you specify the weight of text. Again, this is not an exact science, and many of the values will have similar results.

In example, 100 to 400 might view as normal font weight. 500 and 600 might view bold, and 700 to 900 are the boldest values. It will depend on the font that is defined, and the fonts your visitors have installed.

As I stated, this is not an exact science. Some browsers only display normal or bold. Personally, because there are so many outside factors involved, I only use the values normal or bold.

Creating Non-bold Headings

What if you want the weight of a h1 tag (or other heading or strong tag) to not display as bold? This is easy using CSS. If you want any default bold element to display as normal, just add the rule to your CSS.

h1, h2, h3 {font-weight: normal;}

The above rule will render the h1, h2, and h3 heading text as normal weight. I like using this rule a lot for my headings.

View my font-weight.html file for working examples of the CSS font-weight property, font-style property, and font-family property.

CSS Font-variant Property

Values include: normal, small-caps. The default value is normal. The only other value you can use is small-caps. Notice the hyphen in the value name.

The small-caps value will render text in upper case, but any capitalized letters will
be a little larger in size.

Please view my font-variant.html file
to see the CSS font-variant property in use.

CSS Font-size Property

Values include: [length], [percentage], xx-small, x-small, small,
medium, large, x-large, xx-large, smaller, larger.

Deciding which value to use when displaying font size is a battle. There are many variables such as screen resolution, browser choice, and operating systems, that can affect how text on a web page is viewed.

It is important to understand each value and how each one works. I will also try to explain the pros and cons for each.

CSS Font-size: em

Let’s start with em. Do not confuse this "em" with the <em> tag used to define emphasis.

The em font size is a "relative" value; this means text size is dependant on a default measurement and will size itself accordingly.

By default, most browsers start with a base font size of 16px (pixels) which is the approximately the same as medium text. To ensure your browser is displaying the default text size:

  • Internet Explorer 6 users, choose View>Text Size>Medium
  • Opera users choose View>Zoom>100%
  • Firefox users will choose View>Text Size>Normal

All three browsers should display the same default text size of 16 pixels. Okay, here is where it gets a little technical.

1em is equal to 100% of the default font size. 1.5em would be equal to 150% of the default font size.

Take a look at the CSS rules below: Notice that the numerical value is snug up against the em. Don’t forget the (.) decimal. There could be disastrous results without it!

h1 {font-size: 1.5em;}
h2 {font-size: 1.25em;}
p {font-size: .90em;}

These CSS rules will render all h1 heading text as 150% of the visitor’s default font size. If a visitor is viewing on Windows/IE with medium as the view setting, it will display as 24px. The text for h2 will display as 125% (20px) and paragraph text will display as 90% (14px) or slightly smaller than default text size.

I like using relative values because it gives the visitor some control over how the page is viewed on their browser.

For example, a person who has a hard time reading smaller text visits my Web site. They will probably have their browser set to a larger default size. The page I designed using relative values for font-size will adjust to the visitor’s settings. If the visitors default starts out at 24px, the font-size value of 1.5em will adjust to 36px. Make sense?

CSS Font Size Inheritance

A nested element’s size is dependant on the parent text size, not the actual percentage.

For example, if the <strong> element was defined with a font-size value of 1.5em, its actual size depends on the parent element. If it is contained within a heading tag, it will display 150% larger than the heading element’s size. If contained within a paragraph, it will display 150% larger than the paragraph font size.

Would you like to see a working example? View my font-em.html file. Notice I have defined the em element as 1.4em. I have nested an <em> tag in the <h1> and <p> tags. Notice how the size is adjusted depending on which element is the parent.

While you are viewing this page, enlarge and reduce the display settings on your browser.

  • Internet Explorer users, choose View>Text Size
  • Firefox/Mozilla users, choose View>Text Size
  • Opera users choose View>Zoom

The text will resize itself in relation to the default text size of the browser.

CSS Font-size: %

As you might have guessed, using a % as a value for the font-size property is comparable to using the em value.

h1 {font-size: 150%;}

The above rule will render text as 150% of the browser default.

Choosing between em and % really doesn’t matter. If you desire to use "relative" units for font-size, then which ever you feel more comfortable using is the better choice.

CSS Font-size: ex

Not many designers use ex for font-size. To get technical, an ex unit is equal to the height of the lowercase letter "x" or about half of an em unit.

CSS Keywords xx-small through xx-large

xx-small, x-small, small, medium, large, x-large, xx-large are keyword values for the fonts-size property. These keywords are my favorite to use; they are simple yet effective.

The keyword values are technically described as "absolute" but at the same time, they are very flexible because visitors can adjust their browser display settings; the keyword sizes are adjusted accordingly. If a browser’s settings remain as default, the keyword "medium" will display as 16 pixels.

One downside is not all older browsers are created equal and one might render the values slightly different than the other. A bit of good news is, the modern browsers did get it right, so we are on the right track for the future!

Here are some example CSS rules using keywords: (Notice the hyphen is necessary in several keywords.)

h1 {font-size: xx-large;}
h2 {font-size: large;}
p {font-size: medium;}
strong, em {font-size: small;}

CSS Keywords Smaller and Larger

The font-size values smaller and larger are relative. Similar to em and %, they adjust their size depending on the size of the parent element.

em, strong {font-size: smaller;}

The text inside <em> and <strong> tags will display smaller than the text in the parent tag. Actual size will depend on the size of the parent element.

Another CSS example:

body {font-size: small;}
h1 {font-size: larger;}

The default text size has been defined as small by the body element style. The h1 element is a descendant (child) of the body element, so text within the h1 tag will view larger than "small".

View my font-keywords.html for a working example of both absolute and relative keywords.

Pixels Can Be Perfect …sometimes

The web consists of pixels. Monitor display resolutions are calculated in pixels - for example 800×600 and 1024×724. Graphic images for the web are created using pixel measurements. Pixels are part of web design.

So, it would seem natural to choose pixels as the unit value for font-size as well. The answer is yes and no.

Yes, pixels are the perfect choice, but there are some big problems to consider.

Using pixels for font size disallows the ability to adjust text size in Windows Internet Explorer version 6. Since the majority of web visitors are using IE6, this can be a dilemma, especially where accessibility is concerned.

Other standards compliant browsers (Opera, Firefox) allow users to adjust the text size; that means that no matter which unit of measure a designer uses, a visitor will always have the choice to resize text content.

The good news is, it’s getting better with Internet Explorer 7; the user can utilize a zoom feature to enlarge or reduce the page content. Since convergence to IE7 is still a long way away, pixels for font size might not be the right choice just yet.

h1 {font-size: 24px;}
h2 {font-size: 20px;}
p {font-size: 12px;}

The above rules are self-explanatory. Text in each element will be displayed according to the specified pixel unit.

Notice the px is snug up against the numerical value. Do not add a space (like 12 px) or your style might not render correctly.

CSS Font-size: pt

I do not recommend using pt as a unit of measure for the font-size property for web page viewing. Points can be used for CSS created specifically for print, not the web.

Your display monitor uses pixels, not points, so the transition isn’t always so smooth. Not all browsers render the pt measurement the same and besides, visitors using IE6 are not able to adjust the size for text content when pts are used. It really doesn’t make sense to use them. As you have learned, there are better choices.

Just for the record, here is a CSS example:

h1 {font-size: 20pt;}

The rule above will render all h1 text as 20pt on the page.

Which Size Value To Choose?

Making a choice between all the different size values is confusing, right? Well, welcome to the wonderful world of web design. It is not an exact science by any means, but the future is promising.

As designers we have the freedom to mix size values to suit the situation. I like using relative font-size values when designing, but I have been known to occasionally use px for headings. For my most recent designs, I have found absolute keywords to be the best match. View my font-size.html for examples of a variety of font-size values.

Helpful Web Links

Ready to put all this newly found CSS knowledge to good use?

Exercising Your Fonts With CSS

If you care to practice what you have learned in this tutorial, here is an exercise.

Launch your text editor, and open the template.html file.

Save the file with a new name, and create a simple (x)html page with headings and paragraphs. Add strong and/or em text. Content isn’t important.

Add embedded CSS selectors for each element on your page. Add declarations for the CSS font and color properties learned so far.

  • background-color
  • color
  • font-family
  • font-style
  • font-weight
  • font-variant
  • font-size

Experimentation is the key to learning CSS. After you complete one page design, edit the values for each rule to see how it changes your page in your browser.

Launch the file in a second (and third) web browser to check for any display differences.

Validate your xhtml and CSS using the W3C validation service

You may also experiment with my fonts.html file.

FAQ

When I validate my CSS code, it passes validation, but there are warnings concerning generic fonts. Can I ignore those warnings?

Answer: No, the CSS warning of lack of a generic font should be addressed. When using specific font choices for font-family, the last value should always be a generic font choice.

CSS Example:

body {font-family: Arial, Helvetica, sans-serif;}

When naming three specific font values for the CSS font-family property, do all the fonts have to belong to the same family? Can I mix sans-serif and serif fonts like Verdana and Times?

Answer: Fonts do not have to belong to the same family, as long as you only specify ONE generic font, all specific fonts can be mixed.

CSS Example:

p {font-family: Verdana, Times, Arial, sans-serif;}

I want to learn more about fonts, where can I find a good resource?

Answer: There are lots of great books on typography. I recommend the book The Non-Designer’s Design Book by Robin Williams. In fact, most books authored by her are very good. Searching on Amazon for "typography" will show many other books.

The Non-Designers Design book

Other Typography Resources:

What do you want to learn next? « CSS Validation

10 Comments

  1. Comment by Brad Bowman on June 24th, 2007

    Is there a way to make it so when I apply the tag to some text, that it does not put a couple of blank lines right afterwards? I just used your CSS h1, h2, h3 {font-weight: normal;} and this helped me a bunch.

    Thanks,
    Brad

  2. Comment by debbie T on June 24th, 2007

    Hello Brad,
    Thanks for commenting.

    To change the amount of space under your heading, try this:

    h1, h3, h3 {margin-bottom: -12px;}

    Tweak the amount of px to suit your particular needs.

  3. Comment by Martina on January 23rd, 2008

    I’ve read through your tutorials and I just wanted to say thank you for all this information. Your site is so helpful and gave me a huge jumpstart on my newest project.

    I really appreciate that you’ve gone tho the trouble to explain the basics for those of us who don’t know, and gone the extra mile to provide links to more in-depth sites.

    Thanks again.

  4. Comment by debbie T on January 27th, 2008

    Awe, thank you so much Martina, I appreciate that you took the time to comment!!

  5. Comment by Sophie on April 15th, 2008

    Hiya, great site - i’ve learnt loads. I’ve a question, I want to centrally align my text on the page - I’ve searched on your site and cannot see how to do it? Can you help please? Thanks x

  6. Comment by jay on May 15th, 2008

    I’ve read thru all of your ‘Web Design Made Simple’ articles. I want to commend you on an excellent job in presenting just enough information to allow a beginner to have confidence in writing web pages! Thanks for maintaining this site.

  7. Comment by llewelyn Tudor on May 21st, 2008

    Hi Debbie
    Your course is brilliant. I’ve gone from zero to hero:-). Now where do I go from here? I obviously want to learn more and have done a bit of research.
    I’ve come across this book that I’m thinking of purchasing: Designing with Web Standards (2nd Edition) (Paperback)
    by Jeffrey Zeldman (Author)
    or can you suggest anything better, as everything you’ve suggested has been spot on.
    Thanks for everything.
    Best regards
    Llew Tudor

  8. Comment by debbie T on May 22nd, 2008

    Hey Llew,
    Glad you enjoyed the tutorials. Yes, the Jeffery Zeldman book is very good. Highly recommended.

    I wish you lots of luck with your future studies!!! And thank you for all your nice comments and support!

  9. Comment by debbie T on May 22nd, 2008

    I just updated the sidebar with some advanced web design books. Check ‘em out!

  10. Comment by Helmi Efendi on June 6th, 2008

    i am a student from a college in Indonesia, and this site is very helpfull for learning web. thanks..!

Leave a Comment

If you would like to make an observation or suggestion, please take the time to write a comment. If you prefer to contact me privately, there is a contact form.