Changing Font Attributes

Learn to Use CSS to Change Font Attributes

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.

  • color
  • font-family
  • font-size

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:

this font is colored red
this font is colored blue

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:

this font is 1em
this font is .75em
this font is 1.25em

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 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.

this font is sans-serif
this font is serif