designstudiohoogl.blogg.se - How to make an attribute not inherit font size

This comes in handy if you use a font-family with three or more weights.īelow is an example of how you could use the 'bolder' value to emphasize sentences visually. 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. The difference between font-weight:bold and font-weight:bolder

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 value '400' equals normal and the value '700' equals bold.įurthermore, 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 To travel is to live - H. 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. Here is an example - I've used classes to style the two paragraphs differently but you could just as well have used inline style Īs you can see, there is a difference between the two sentences.

900: Ultra-black, Extra-black, Ultra-bold, Heavy-black, Fat, Poster.

400: Regular, Normal, Plain, Roman, Standard.

100: Thin, Hairline, Ultra-light, Extra-light.

Here is a rough guide to match the numerical scale with the most common weight terms: These values range from lightest (100) to boldest (900). Let's have a look at the easy-to-understand part - the numerical scale consisting of the numbers 100-900. 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. When writing CSS, these characteristics are spread over several properties and this is why I have grouped them together into a single chapter. Word you definitely know of the opportunity to use bold, italics and underlined text. If you have ever done any wordprocessing using e.g.