Note: We will be using font-family: Helvetica, Arial, sans-serif for this demonstration. Here are some examples of various font-weight values: What this means is that when a weight is specified for which no face exists, a face with a nearby weight will be used. Most font families actually have only a few weights available. Not every web font, or “font family” was originally built with an array of bold variations. What You Need to Know About Using Numerical ValuesĪlthough 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. Using numerical values for instance, allows even greater control over the level of intensity of the Bold text.
You can always use the traditional “bold” value to bold text, but there are other ways of displaying Font Weight. This HTML and CSS code interacting together is explained in the following illustration: Udacity is where you can learn about font weight
We will make the font weight “bold.” How to Make Text Bold in CSS If you want to try this yourself, copy the code and paste into a text editor such as Notepad or Notepad++. 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. What is Font Weight?įont weight is the “value” placed on your font that will determine how bold or light your text will appear. 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.