1. Technology

Changing Font Attributes

Learn to Use CSS to Change Font Attributes

By

FF Kievit by Mike Abbink
FontFont/Flikr/CC BY 2.0

Fonts and CSS

CSS is the most effective way to adjust the fonts on your web page. You can control the font family, size, color, weight, and many other aspects of the typography.

Font properties in CSS are one of the most common ways to make your page more distinctive and unique. It is easy to change the color, size, and even face (the font itself) of your text with CSS font properties.

There are three parts to a font:

  • color
    This is the color the font will display as on the screen.
  • size
    This is how large or small the typeface will render on the screen.
  • face
    This is the font family, what is often referred to as the actual font.

Font Colors

To change the color of the text, simply use the CSS color style property. You can use either color names or hexadecimal codes. As with all color on the web, it is best to use browser safe colors.

Try the following styles in your web pages:

<span style="color: #ff0000;">this font is colored red</span>
<span style="color: #0000ff;">this font is colored blue</span>

Colorizing the Web
Using Browser-safe Colors

Font Sizes

When you set the font size on the web you can set it in relative sizes or be very specific using pixels, centimeters or inches. However, the more exact font sizes are meant to be used for print and not for web pages, where everyone who views your website might have a different resolution, monitor size, or default font setting. Thus, if you choose 15px as your standard size, you might be unpleasantly surprised to see how large or small your font renders to your customers.

I recommend you use ems for font size. Ems allow your page to remain accessible no matter who is viewing it, and ems are meant for screen rendering. Leave your pixels and points for print rendering. To change your font size, put the following style in your web page:

<span style="font-size: 1em;">this font is 1em</span>
<span style="font-size: .75em;">this font is .75em</span>
<span style="font-size: 1.25em;">this font is 1.25em</span>

Deciding on Font Sizing in CSS

Font Faces

The face of your font is what many people think of when they think “font.” You can declare any font face that you would like, but remember, if your reader doesn't have that font installed their browser will try to find a match for it, and their page will not look as you intended.

To address this problem you can specify a list of face names, separated by commas, for the browser to use in order of preference. These are called font stacks. Keep in mind that a standard font on a PC (such as Arial) might not be standard on a Macintosh. So you should always view your pages with a minimally installed machine (and preferably on both platforms) to make sure that your page looks as designed even with minimal fonts.

One of my favorite font stacks is <span style="font-family: arial, geneva, helvetica, helv, sans-serif;"> This set is a sans-serif font collection and while geneva and arial do not look terribly similar, they are both fairly standard on Macintosh and Windows computers. I include helvetica and helv for customers on other operating systems such as Unix or Linux that might not have a robust font library.

<span style="font-family: geneva, arial, helvetica, sans-serif;">this font is sans-serif</span>
<span style="font-family: times, 'Times New Roman', serif;">this font is serif</span>

What is a Font?

More Font Resources

Read the Most Recent Articles from Web Design at About.com.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. Web Design
  5. Principles of Design
  6. Fonts
  7. Changing Font Attributes - Use CSS to Adjust Your Fonts

©2014 About.com. All rights reserved.