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> |
This HTML and CSS code interacting together is explained in the following illustration:
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 Style | Web 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> |
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> |
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> |
| Browser Type | Sample 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!
