css - HTML

An Introduction to HTML/CSS Font Weight

In this introductory tutorial on HTML/CSS font weight, we will explore some easy to use, creative applications to further enhance the text on your web page.

What is Font Weight?

Font weight is the “value” placed on your font that will determine how bold or light your text will appear. There are many “values” that you can use that provide a great deal of flexibility towards creating the font weight that works best for how you want to display your text.

Displaying HTML Font Weight

If you want to try this yourself, copy the code and paste into a text editor such as Notepad or Notepad++. We will make the font weight “bold.”

How to Make Text Bold in CSS

<!DOCTYPE html>
<html>
<head>

<style type=text/css>

/* Styles */

p {
    color: red;
    font-weight: bold;
    font: 18px Arial, Helvetica, sans-serif;
}

</style>
</head>

<body>

<p>Udacity is where you can learn about font weight</p>

</body>
</html>

This HTML and CSS code interacting together is explained in the following illustration:

HTML and CSS interaction displayed in code

The result on your web page is this. Notice the BOLD text.

Standard vs. Numerical Values for Font Weight

You can always use the traditional “bold” value to bold text, but there are other ways of displaying Font Weight. Using numerical values for instance, allows even greater control over the level of intensity of the Bold text.

What You Need to Know About Using Numerical Values

Although there are in actuality the following numerical values that you can use to define the “boldness” in your displayed text: 100, 200, 300, 400, 500, 600, 700, 800, and 900, the actual result is going to be determined by what font you use in your CSS.

Not every web font, or “font family” was originally built with an array of bold variations. Most font families actually have only a few weights available. What this means is that when a weight is specified for which no face exists, a face with a nearby weight will be used.

The numerical values are as follows:

  • 100 – Thin
  • 200 – Extra Light (Ultra Light)
  • 300 – Light
  • 400 – Normal
  • 500 – Medium
  • 600 – Semi Bold (Demi Bold)
  • 700 – Bold
  • 800 – Extra Bold (Ultra Bold)
  • 900 – Black (Heavy)

Here are some examples of various font-weight values:

Note: We will be using font-family: Helvetica, Arial, sans-serif; for this demonstration.

CSS StyleWeb Output
font-weight: bold;
font-weight: normal;
font-weight: 200;(lighter than normal)
font-weight: 400;(same as “normal”)
font-weight: 700;(same as “bold”)
font-weight: 900;(this is the maximum)

What you can do with web fonts is endless as you will see as we continue to explore all realms of possibilities. In future blog posts on this subject, we will explore more advanced, cutting-edge areas of font-weight development for the web.

A Matter of Style

Use Case Scenarios

When it comes to style, there will be times when you want to either make your text stand out or make it less noticeable. 

Making your font text less dramatic can have a pleasing effect on the eye when you want to showcase words in your web page that hint at almost being subliminal. 

For instance:

<!DOCTYPE html>
<html>
<head>

<style type=text/css>

/* Styles */

p {
    color: gray;
    font-weight: 100;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
}

</style>
</head>

<body>

<p>Udacity is where you can learn about font weight</p>

</body>
</html>

The web result of using the numerical font weight of 100 would look like this:

Now if you want to emphasize the point of your message, enhance your font weight with a higher number.

For instance:

<!DOCTYPE html>
<html>
<head>

<style type=text/css>

/* Styles */

p {
    color: gray;
    font-weight: 900;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
}

</style>
</head>

<body>

<p>Udacity is where you can learn about font weight</p>

</body>
</html>

The web result of using the numerical font weight of 900 would look like this:

Working with Different Browsers

In the world of web creation, different browsers can at times yield different results.

Let’s test this out. We will use the following code for the sample:

<!DOCTYPE html><html><head>
<style type=text/css>
/* Styles */
p {    color: orange;    font-weight: 900;    font-size: 16px;    font-family: Arial, Helvetica, sans-serif;}
</style></head>
<body>
<p>Udacity is where you can learn about font weight</p>
</body></html>
Browser TypeSample Yield
Google Chrome
FireFox
Microsoft Edge
Internet Explorer

As you can see, there are slight variations in how the text displays, but at least for this example, the differences are not significant. With correct use of the CSS Style to enhance the font text, we were able to control the output, helping to assure consistency within four different browsers.

Outro:  (Where to Next?)

This introduction to font weight should provide a starting point for further inquiry into the unlimited creative aspects that HTML offers. We will continue to explore other areas of HTML design in the next blog. We hope this introduction has piqued your interest and inspired you to explore further and dive deeper into the world of web design.

Enroll in our Intro to Programming Nanodegree program today!

Start Learning