Как сделать шрифт bold css

font-weight

Свойство font-weight задаёт насыщенность шрифта: от самого тонкого до самого жирного начертания.

Примеры

Значения относительно родительского элемента:

Значения в цифрах:

Как это понять

Большинство шрифтов имеют два варианта начертания: обычное normal и жирное bold . Их в основном и используют.

Но браузер может отобразить и более тонкие или толстые варианты, если шрифт их поддерживает. Такие варианты задаются с помощью слов lighter и bolder или в условных единицах от сверхсветлого начертания 100 до сверхжирного или «чёрного» 900 с шагом 100 единиц.

Как пишется

Толщину текста можно задать с помощью ключевых слов или числовым значением:

  • normal — стандартная толщина шрифта. Соответствует значению 400. Значение по умолчанию.
  • bold — жирный набор текста. Соответствует 700.
  • lighter — более тонкий вариант, чем в родительском элементе. Например, светлое начертание Light.
  • bolder — более насыщенный вариант, чем в родительском элементе. Например, сверхжирное начертание Extra Bold.
  • 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 — условные единицы насыщенности, где 400 — это стандартная насыщенность текста. Используются редко, так как большинство шрифтов имеют только обычное и жирное написание.

Подсказки

💡 Если всё же решишь использовать цифры, но у выбранного шрифта нет такого варианта насыщенности, то для значений от 100 до 500 браузер выберет стандартный вариант normal , а от 600 до 900 — жирный шрифт bold .

Ещё примеры

Попробуем задать насыщенность сразу разными способами к разным элементам кода:

На практике

Алёна Батицкая

🛠 Большинство современных шрифтов имеет полный набор начертаний. Для более тонкого управления отображением шрифта используются как раз таки цифровые значения для свойства font-weight .

🛠 Относительные значения bolder и lighter не используются почти никогда. Причина в том, что они относительные. Как итог если меняется вес шрифта родительского элемента — меняется вес шрифта ребёнка. Но это, чаще всего, не то что нужно. Совет: используй всегда абсолютный вес шрифта.

CSS Bold: A Guide to Using Font-Weight

Christina Kopecky

To create a CSS bold text effect, you must use the font-weight property. The font-weight property determines the “weight” of a font, or how bold that font appears. You can use keywords or numeric values to instruct CSS on how bold a piece of text should be.

  • Career Karma matches you with top tech bootcamps
  • Get exclusive scholarships and prep courses
  • Career Karma matches you with top tech bootcamps
  • Get exclusive scholarships and prep courses

As developers, in going to layout a website, sometimes we want to draw attention to something. There are a number of ways we can do that. The most basic of way is to increase the font-weight of the text you want to highlight. This refers to making text appear in emboldened.

In this article, we will talk about font-weight, how to set it and give an illustration of the different possible values for the property.

CSS Bold: A Guide

The font-weight property sets how bold text should appear on the screen. You can use either keywords or a numeric value to instruct CSS on how bold a particular set of text should appear.

The syntax of the CSS font-weight property is as follows:

The value of weightOfFont is the weight of the font you want to use for the element to which the style is applied.

The font-weight property accepts a few different values, depending on the font-weight you want to set for a particular element.

The CSS Bold Scale

Think of your font-family as having a scale from 100-1000 on the boldness scale. The higher the number, the bolder the font is.

81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.

Find Your Bootcamp Match

The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.

Start your career switch today

Do some research on your preferred font-family. This will let you be sure the result will be as light or as bold as you would like on your site. Some font-families don’t utilize the entire scale.

The following code illustrates how light and how dark a popular font called ‘Arial’ can get, using both numbers and keywords:

Lighter and Bolder: What do they actually mean?

The main thing that needs to be pointed out here is that lighter and bolder are not a literal translation. Bolder here doesn’t mean “bolder than bold”.

Bolder and lighter actually mean, in this context, how bold or how light they are in relation to their parent element. So when we make a child element bolder, they will be one relative font-weight darker than their parent – same goes for lighter.

The relative font-weights are as follows:

Relative font-weight Actual font-weight
thin 100
normal 400
bold 700
heavy 900

So, we could use the font-weight: bold property to set the font-weight of a paragraph of text to 800. When a child is one relative weight bolder than their parent, it uses the table above to figure out how bold to make it.

For example, say I have a child that has a parent with a font-weight of 400. If I set the value of the font-weight on the child to bolder, the font-weight on the child becomes 700.

  • Career Karma matches you with top tech bootcamps
  • Get exclusive scholarships and prep courses

This is because the child is one relative font-weight darker than the parent. If the parent is already as dark or as light as it can go, those property values won’t do anything.

CSS Font Weight Example

Suppose we are designing a website for The Seattle Stamp Club, a local stamp society. The stamp society has asked us to make the About Us heading on the About page of their website appear in bold. This will draw the visitor’s attention to the heading.

The stamp club has asked us to add a block of text to their website with the history of the club. This block of text should appear in the normal font-weight. Certain phrases, which the club wants to attract the viewer’s attention to, should appear in bold.

We could use the following code to create this block of text, with certain phrases emboldened:

Click the Image of the button in the code editor above to see the output of our HTML/CSS code.

In our HTML file, we have defined a paragraph of text enclosed within <p> tags. We have also enclosed certain phrases within <span> tags, which we are going to embolden in our CSS code.

Next, in our CSS file, we defined a style rule that sets the font style weight of every <span> tag to bolder. This means that the text enclosed within any <span> tag will appear bolder than the parent element.

When we run our code, our paragraph appears with normal font-weight, and the phrases enclosed within <span> tags appear in bold. In this example, the phrases welcomes all and 250 members are enclosed in <span> tags.

Bold Text CSS with Variable Fonts

There are some newer fonts made available to us through the latest Level of CSS Fonts. They are called variable fonts and can take any number between 1 and 1000 as its font-weight. Browser support wasn’t fully implemented until May 2020, so they are fairly new. If you’d like more information about variable fonts, check out this introduction.

Conclusion

In this tutorial, we discussed the CSS font-weight property and how it affects how bold our fonts are.

We learned that bolder and lighter means one relative font-weight away from the font-weight of the parent element. In practice, we saw a range of font-weights to see what the text looks like. You’ll be a pro at styling fonts with font-weight in no time!

Venus profile photo

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

To learn more about coding in CSS, read our guide on how to learn CSS. You can read our guide on how to make bold text in HTML if you want to make your text bold without relying on CSS.

Font-weight

If you have ever done any wordprocessing using e.g. Word you definitely know of the opportunity to use bold, italics and underlined text. When writing CSS, these characteristics are spread over several properties and this is why I have grouped them together into a single chapter.

The font-weight property

The font-weight property defines how bold you text are and there are a lot of possible values; normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, and inherit.

Let’s have a look at the easy-to-understand part — the numerical scale consisting of the numbers 100-900. These values range from lightest (100) to boldest (900).

Here is a rough guide to match the numerical scale with the most common weight terms:

  • 100: Thin, Hairline, Ultra-light, Extra-light
  • 200: Light
  • 300: Book
  • 400: Regular, Normal, Plain, Roman, Standard
  • 500: Medium
  • 600: Semi-bold, Demi-bold
  • 700: Bold
  • 800: Heavy, Black, Extra-bold
  • 900: Ultra-black, Extra-black, Ultra-bold, Heavy-black, Fat, Poster

Here is an example — I’ve used classes to style the two paragraphs differently but you could just as well have used inline style;

As you can see, there is a difference between the two sentences. But you should be aware that most webfonts do not have more than two or three weights, and weight such as ‘light’ or ‘semi-bold’ is rare. The value ‘400’ equals normal and the value ‘700’ equals bold.

Furthermore, most browsers does not render the font-weight correctly and only differentiate between normal and bold — have a look at the following example and you can see the problem for yourself;

If you want to have the opportunity to use more weights, you should have a look at GoogleFonts as a part of their fonts have 3-4 different weights.

The difference between font-weight:bold and font-weight:bolder

What is the difference between font-weight:bold and font-weight:bolder you might ask? The ‘bolder’ and ‘lighter’ values select font weights that are relative to the inherited (parent) font weight where as the ‘bold’ value simply change the font’s weight to bold. This comes in handy if you use a font-family with three or more weights.

Below is an example of how you could use the ‘bolder’ value to emphasize sentences visually. (But before you do this, please have a look at my article about the <em>, <strong>, <i>, and <b> tags over at my HTML5 tutorial!)

As you can see, the sentences highlighted with the ‘bolderText’ class is actually bolder.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *