Html bold blue text

font-weight

The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

Try it

Syntax

/* Keyword values */ font-weight: normal; font-weight: bold; /* Keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* Numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; /* normal */ font-weight: 500; font-weight: 600; font-weight: 700; /* bold */ font-weight: 800; font-weight: 900; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: revert; font-weight: revert-layer; font-weight: unset; 

The font-weight property is specified using any one of the values listed below.

Values

Normal font weight. Same as 400 .

Bold font weight. Same as 700 .

One relative font weight lighter than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.

One relative font weight heavier than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.

In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the Fallback weights system.

CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000 and introduces Variable fonts, which can make use of this much finer-grained range of font weights.

Fallback weights

If the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered:

• If the target weight given is between 400 and 500 inclusive:
  • Look for available weights between the target and 500 , in ascending order.
  • If no match is found, look for available weights less than the target, in descending order.
  • If no match is found, look for available weights greater than 500 , in ascending order.

  Meaning of relative weights

  When lighter or bolder is specified, the below chart shows how the absolute font weight of the element is determined.

  Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). If a font-family has more weights available, they are ignored for the purposes of relative weight calculation.

  Inherited value	bolder	lighter
  100	400	100
  200	400	100
  300	400	100
  400	700	100
  500	700	100
  600	900	400
  700	900	400
  800	900	700
  900	900	700

  Common weight name mapping

  The numerical values 100 to 900 roughly correspond to the following common weight names (see the OpenType specification):

  Value	Common weight name
  100	Thin (Hairline)
  200	Extra Light (Ultra Light)
  300	Light
  400	Normal (Regular)
  500	Medium
  600	Semi Bold (Demi Bold)
  700	Bold
  800	Extra Bold (Ultra Bold)
  900	Black (Heavy)
  950	Extra Black (Ultra Black)

  Variable fonts

  Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

  For TrueType or OpenType variable fonts, the «wght» variation is used to implement varying widths.

  Note: For the example below to work, you’ll need a browser that supports the CSS Fonts Level 4 syntax in which font-weight can be any number between 1 and 1000 . The demo loads with font-weight: 500; . Change the value to see the weight of the text change.

  Accessibility concerns

  People experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (Thin/Hairline) or 200 (Extra Light), especially if the font has a low contrast color ratio.

  Formal definition

  Initial value	normal
  Applies to	all elements. It also applies to ::first-letter and ::first-line .
  Inherited	yes
  Computed value	the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
  Animation type	a font weight

  Formal syntax

  font-weight =
  |
  bolder |
  lighter

  =
  normal |
  bold |

  Examples

  Setting font weights

  HTML

  p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice "without pictures or conversations?" p> div> I'm heavybr /> span>I'm lighterspan> div> 

  CSS

  /* Set paragraph text to be bold. */ p  font-weight: bold; > /* Set div text to two steps heavier than normal but less than a standard bold. */ div  font-weight: 600; > /* Set span text to be one step lighter than its parent. */ span  font-weight: lighter; > 

  Result

  Specifications

  Browser compatibility

  BCD tables only load in the browser

  See also

  Found a content problem with this page?

  This page was last modified on Jul 26, 2023 by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  CSS Bold – How to Bold Text in HTML with Font Weight

  

  Joel Olawanle

  

  CSS is a powerful tool for web developers. It allows you to style and format HTML content in various ways.

  One common formatting technique is to make text bold using the font-weight property. Bold text can add emphasis to key information, create visual contrast, and improve the readability of content.

  In this article, you will learn how to use CSS to make text bold in HTML using the font-weight property. Whether you’re a beginner or an experienced developer, this article will provide a comprehensive guide to creating bold text in your HTML content using CSS.

  Understanding Font-Weight Property

  The font-weight property is a CSS property used to define the weight or thickness of a font. It determines the text’s degree of boldness or lightness, with higher values indicating a bolder font-weight.

  The font-weight property accepts various values, including numeric and keyword values.

  Numeric values range from 100 to 900, with increments of 100. A value of 400 is considered normal, while a 700 is considered bold. Some commonly used keyword values include bold , bolder , lighter , and normal .

  How to Create Bold Text with CSS

  Creating bold text in HTML using CSS is a straightforward process that can be achieved in several ways. You can choose to use any form of styling, such as inline, internal or external.

  How to Create Bold Text with Inline styling

  You can use inline styling to apply the font-weight property directly to a specific HTML element, like this:

  However, inline styling can make your HTML code cluttered and difficult to maintain, especially when many elements require the same styles.

  How to Create Bold Text with Internal styling

  Internal styling allows you to apply CSS styles within the head section of an HTML document using the style tag, like this:

  This method is useful when applying the same styles to multiple elements on a single page.

  How to Create Bold Text with External styling

  External styling involves creating a separate CSS file and linking it to your HTML document using the link tag, like this:

  The CSS file can contain the styles for all the HTML elements on your website, and you can easily make changes to the styles without modifying the HTML code.

  Best Practices for Using Bold Text in HTML

  While using bold text in HTML can help emphasize important information, it is essential to follow best practices to ensure the text remains readable and accessible.

  Here are some best practices for using bold text in HTML:

  Choosing the right font-weight: When using bold text, it is essential to choose the right font-weight to ensure the text is clear and easy to read.

  While a heavier font-weight may be suitable for headlines, a lighter weight may be more appropriate for body text. It is also important to ensure that the bold text is not too overwhelming and does not detract from other elements on the page.

  Balancing bold text with other formatting options: While bold text can be a powerful way to draw attention to important information, it is important to balance it with other formatting options to create visual hierarchy.

  You can use other styles such as italics, underline, or a different font size or color to distinguish different levels of importance.

  Avoiding overuse of bold text: Overusing bold text can make the text harder to read and detract from the page’s overall design.

  It is important to use bold text sparingly and only where it is necessary to emphasize important information. Avoid using bold text for entire paragraphs or blocks of text, as this can make it difficult for readers to distinguish important information from regular text.

  Testing for accessibility: When using bold text, it is essential to ensure it is accessible to all users, including those with visual impairments.

  Screen readers can have difficulty reading heavily styled text, so it is important to test the page using accessibility tools to ensure the bold text is properly formatted and accessible.

  Conclusion

  In conclusion, using bold text in HTML can effectively emphasize important information and create visual hierarchy.

  By choosing the right font-weight, balancing bold text with other formatting options, avoiding overuse, and testing for accessibility, you can ensure that the bold text remains readable and accessible to all users.

  Thanks for reading and have fun coding!

  Embark on a journey of learning! Browse 200+ expert articles on web development. Check out my blog for more captivating content from me.

  Источник

  CSS font-weight Property

  The font-weight property sets how thick or thin characters in text should be displayed.

  Default value:	normal
  Inherited:	yes
  Animatable:	yes. Read about animatable Try it
  Version:	CSS1
  JavaScript syntax:	object.style.fontWeight=»bold» Try it

  Browser Support

  The numbers in the table specify the first browser version that fully supports the property.

  CSS Syntax

  Property Values

  Value	Description	Demo
  normal	Defines normal characters. This is default	Demo ❯
  bold	Defines thick characters	Demo ❯
  bolder	Defines thicker characters	Demo ❯
  lighter	Defines lighter characters	Demo ❯
  100 200 300 400 500 600 700 800 900	Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold	Demo ❯
  initial	Sets this property to its default value. Read about initial
  inherit	Inherits this property from its parent element. Read about inherit

  Related Pages

  

  COLOR PICKER

  

  

  Report Error

  If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

  Thank You For Helping Us!

  Your message has been sent to W3Schools.

  Top Tutorials

  Top References

  Top Examples

  Get Certified

  W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

  Источник

  Читайте также:  Php system exec разница