Bold

Updated: 02/07/2022 by Computer Hope
Font weights

Bold, bold face, or bold font creates the appearance of darker text by applying a thicker stroke weight to the letters. Using bold text in a body paragraph helps emphasize a remark or comment. For example, this is bold text. If your browser supports bold text, the previous phrase, "this is bold text," should appear noticeably darker. Bold can also differentiate headlines and titles from body paragraphs in the same font size.

How to bold text in a word processor or e-mail client

Bold, italic, underline, and font color options in software

To format text as bold in a word processor or (many) e-mail clients, follow these instructions.

  1. Highlight the text you want to be bold.
  2. Click the B button, which is often next to the I and U buttons for italic and underline, as shown in the picture.
Tip

The shortcut key to make the highlighted text bold is Ctrl+B on the PC and Command+B on Apple computers.

How to remove bold

If you want to unbold or remove bold from bolded text, you would repeat the same steps above for the bolded text.

Note

If you are using a bold font, you need to use the non-bold version of the font (if available) to remove bold.

How to create bold text in HTML

HTML bold tag

With HTML, there are a few different methods of making text appear bold. The most widely used tag is the <b> tag, which means nothing more than changing the style and making the text appear darker. The <strong> tag gives the text structural meaning and importance.

<b>This text should be in bold</b>

or

<strong>This text is important</strong>

  • See the <b> overview for further information on this tag.
  • See the <strong> overview for further information on this tag.
Tip

If you want to bold a heading, paragraph, or other text groups for style reasons, it is better to use CSS to make the text bold.

How to create bold text in CSS

To bold text in CSS, you can use any of the following examples. In the first example, we are surrounding the text we want to be bold with a span tag and then add a style to that tag.

<span style="font-weight:bold">Bold</span>

This method is helpful for bolding specific text that doesn't have an associated CSS class. For text like a heading that always needs to be bold, you can add a CSS rule for the specific HTML tag. For example, if we always want our H2 headings to be bold, we can add the following rule to our CSS code or CSS file.

h2 {
 font-weight:bold;
}

Once this CSS code is added, any page containing this code or points to the CSS file with this code would have bold H2 headings.

Finally, a CSS class can be added to your CSS code or CSS file to apply bold to anything with that class applied. For example, we could add the following class called "bld" to bold text.

.bld {
 font-weight:bold;
}

Once this text is added, we can add that class to any HTML tag. For example, adding the class to a paragraph (as shown below) makes the entire paragraph bold.

<p class="bld">This paragraph of text would be bold.</p>

Other CSS weights of bold

Another nice feature about defining the appearance of bold text using CSS is the ability to define a value of the weight of the bold. For example, instead of using the word "bold," you could add the value "500" for slightly less bolded text. Below is a list of all values supported by font-weight.

100
200
300
400
500
600
700
800
900
bold
bolder
inherit
initial
lighter
normal
revert
unset

Note

If the font family you're using (such as Arial, Verdana, Helvetica, etc.) doesn't support the exact weight specified in your CSS, the web browser uses the closest supported weight. So depending on the font, some of the numerical weights (100, 200, etc.) might look the same. In general, font-weight: 400 (normal) and font-weight: 700 (bold) are always supported.

BIU, Ctrl+B, Font, Italic, Typography terms, Underline