CSS Font-Weight
Introduction
The CSS font-weight property is used in web development to control the thickness and boldness of text on a webpage. It defines the weight of the text, which can vary depending on the font family used by the browser.
This property is crucial in typography as it allows designers and developers to have better control over the visual appearance of text and highlight important elements.
Purpose of font-weight property
The main purpose of the font-weight property is to control how thick or thin characters appear on the screen or in print. It's a versatile tool for text formatting, offering a range of values to adjust the boldness.
The available font-weight values depend on the font family used by the browser. Some font families offer a wider range of weight options, while others may provide only a few predefined choices.
Syntax and Property Values
The CSS font-weight property offers multiple values to control the weight and boldness of text, following a specific syntax.
Syntax
font-weight:
normal/lighter/bolder/bold|/<number>/inherit/ initial/unset;
Property Values
Normal: The default font weight with a numeric value of 400, representing the standard weight for the chosen font family.
Lighter: Makes the font weight lighter than the parent element by considering the existing weight of the font family.
Bolder: Increases the font weight compared to the parent element, making it heavier while considering the current font weight of the font family.
Bold: Specifies a bold font weight, with a numeric value of 700.
Number: Sets the font weight using a numeric value, ranging from 1 to 1000.
Initial: Resets the font weight to its default value.
Inherit: Inherits the font weight from the parent element, making the child element's weight match its parent.
Unset: Resets the font weight to either its default or inherited value, based on inheritance rules.
How to Use Font-Weight in CSS
Applying Font-Weight to Elements
The font-weight property can be applied to specific HTML elements in CSS to adjust the thickness and boldness of the text. This allows you to create different text styles and emphasize certain sections of your content.
Example1: Font-Weight for paragraphs
p {
font-weight: 400; /* Sets the font weight to normal (400) for all paragraphs */
}
In the example above, the default font weight, typically normal (value 400), will be applied to all paragraphs (<p>) in the HTML content.
Example2: Making Headings Bold
h1, h2, h4 {
font-weight: 600; /* Sets the font weight to bold (600) for h1, h2, and h4 headings */
}
This CSS rule sets the font-weight of <h1>, <h2>, and <h4> elements to bold (typically 600), making these headings appear bold.
Example3: Custom Font-Weight for Specific Class
.my-custom-text {
font-weight: 700; /* Applies a font weight of 700 to elements with the class "my-custom-text" */
}
In this case, the font weight will be 700, giving the text a medium weight style.
Example4: Font-Weight with other properties
h4 {
font-weight: 600; /* Sets the font weight to 600 for h4 headings */
font-size: 25px; /* Sets the font size to 25 pixels for h4 headings */
font-family: "Helvetica Neue", Arial, sans-serif; /* Applies the specified font family to h4 headings */
/* Additional CSS properties can be added here for more detailed text styling */
}
In this example, the font-weight, font-size, and font-family properties are used to style the <h4> headers, creating a consistent and unified typographic style for those elements.
Setting Global Font-Weight
In CSS, you can use the body selector to set a global font weight for the entire document or a specific section. By applying the font-weight property to the body element, you ensure that all text on the webpage has a consistent weight.
This approach is useful for maintaining a uniform visual design across your website.
Example1
body {
font-weight: 300; /* Sets the overall font weight for the document to 300 */
}
In this example, the font-weight property is set to 300 for the body selector, which represents the normal font weight. This ensures that all text elements within the <body> tag have a consistent and standard font weight.
Example2:Combining Global Font-Weight with other Selectors
body {
font-weight: 400; /* Sets the font weight to 400 for the entire document */
}
h1 {
font-weight: 700; /* Sets the font weight to 700 for all h1 headings */
}
p {
font-weight: 300; /* Sets the font weight to 300 for all paragraphs */
}
This example sets a global font weight of 300 for the entire document, while applying different weights to specific HTML elements. The <h1> headers will use a bold weight of 700, and the <p> paragraphs will use a lighter weight of 300.
By using the body selector to set a base font weight, you can control the overall appearance of text across your website.
Combining with Other Properties
The CSS font-weight property can be combined with other text-related properties to create well-designed and visually appealing typography.
Example1: Combining with Font-Family
p {
font-weight: 400; /* Sets the font weight to 400 for paragraphs */
font-family: "Helvetica Neue", Arial, sans-serif; /* Applies the specified font family to paragraphs */
}
Here, all paragraphs (<p>) are assigned a lighter font weight of Font-Size400. Additionally, a specific font family is set for paragraphs, affecting both the font weight and overall appearance of the text.
Example2: Combining with Font-Size
h2 {
font-weight: 500; /* Sets the font weight to 500 for h2 headings */
font-size: 29px; /* Sets the font size to 29 pixels for h2 headings */
}
This example sets both the font weight and size for <h2> headings. The font size is 29 pixels, and the font weight is 500, giving it a medium-bold style. This combination creates visually striking and attractive headlines.
Example3: Combining with Line-height
blockquote {
font-weight: bold; /* Sets the font weight to bold for blockquotes */
line-height: 1.6; /* Sets the line height to 1.6 times the font size for blockquotes */
}
In this example, blockquotes have their font weight set to bold and their line height adjusted to 1.6 times the font size.
Example4: Combining with text-decoration
a {
font-weight: 600; /* Sets the font weight to 600 for anchor links */
text-decoration: underline; /* Underlines anchor links */
}
For anchor links (<a>), a font weight of 600 is set. Additionally, the text-decoration property underlines the links, making them more noticeable and easier to identify.
Best Practices for Using Font-Weight in CSS
Accessibility Consideration
When using the font-weight property in CSS, it’s important to consider accessibility to ensure that your text is readable and usable by all users, including those with visual impairments.
Readability and Contrast: Ensure that there is enough contrast between the text and background. For users with limited vision or color blindness, a font weight with sufficient contrast makes the text easier to read.
Refrain from Overusing Bold Text: While bold text can highlight important points, use it sparingly to avoid overwhelming readers and making it difficult to identify key information.
Semantic Meaning: Use font weight to convey the content’s importance. For example, use bold text for headings to distinguish them from body text and indicate their significance in the hierarchy.
Responsive Design: Adjust font weight for different screen sizes to ensure readability on all devices. What works well on a large screen might be hard to read on smaller ones.
User Preferences: Respect the user's operating system or browser settings for font weight. Your website should adapt to user preferences for font weight.
Test with Screen Readers: Use screen readers to verify that users who are blind can distinguish between different font weights. Ensure that emphasis is communicated effectively through screen readers.
Font Pairing: Choose font pairs carefully to avoid combinations that may affect readability or create distracting visual patterns.
WCAG Guidelines: Follow the Web Content Accessibility Guidelines (WCAG) to ensure your web content is accessible to all users, including those with disabilities.
Examples
<!DOCTYPE html>
<html>
<head>
<title>Font Weight Property</title>
<style>
body {
font-family: sans-serif;
}
p.one {
font-weight: normal; /* Normal font weight */
}
p.two {
font-weight: lighter; /* Lighter font weight */
}
p.three {
font-weight: bolder; /* Bolder font weight */
}
p.four {
font-weight: bold; /* Bold font weight */
}
p.five {
font-weight: 1000; /* Extreme font weight */
}
p.six {
font-weight: initial; /* Initial font weight */
}
p.seven {
font-weight: inherit; /* Inherits font weight from parent */
}
p.eight {
font-weight: unset; /* Resets to default or inherited value */
}
</style>
</head>
<body>
<p class="one">Normal property value</p>
<p class="two">Lighter property value</p>
<p class="three">Bolder property value</p>
<p class="four">Bold property value</p>
<p class="five">Number property value</p>
<p class="six">Initial property value</p>
<p class="seven">Inherit property value</p>
<p class="eight">Unset property value</p>
</body>
</html>
