Typography in CSS
How to set text boldness with CSS (font-weight)
The `font-weight` property in CSS controls how thick or bold the text appears. You can use keywords like 'normal' or 'bold', or numerical values from 100 to 900 in steps of 100 to set the thickness. A value of 400 is the default (normal), values less than 400 make the text lighter, and values above 400 make the text bolder.
To make paragraph text bold:
/* Makes the text bold */
p {
font-weight: bold;
}
/* Makes the text very bold with a numeric value */
h1 {
font-weight: 700;
}
How to italicize text with CSS (font-style)
The `font-style` property in CSS is used to change the style of the text to italic or oblique, making it slanted or leaning. This is commonly used to emphasize text.
To make text italic:
/* Makes the text italic */
.text {
font-style: italic;
}
Using custom fonts in CSS (@font-face)
The `@font-face` rule in CSS allows you to load custom fonts that are not available by default in browsers. You need to specify the font file location so the browser can download it and apply it to your web page.
To use a custom font called 'Glegoo':
@font-face {
font-family: 'Glegoo';
src: url('//static.site24x7.jp/fonts/Glegoo-Regular.ttf') format('truetype');
}
body {
font-family: 'Glegoo', sans-serif;
}
Setting fallback fonts in CSS (font-family)
The `font-family` property in CSS allows you to list multiple fonts in order of preference. If the first font is not available, the browser will try the next one, and so on. This is called a 'fallback' font.
To set multiple fallback fonts:
/* 'Helvetica' is the first choice, 'Arial' is the fallback */
p {
font-family: 'Helvetica', 'Arial', sans-serif;
}
Adjusting the space between lines (line-height)
The `line-height` property in CSS sets the amount of space between lines of text, making it easier to read. You can specify it using units like pixels (px) or as a number that will multiply the font size.
To set the line height of a paragraph:
/* Sets the space between lines to 10px */
p {
line-height: 10px;
}
/* Sets the line height to 1.5 times the font size */
h2 {
line-height: 1.5;
}
Linking to web fonts in CSS (linking fonts)
You can link to fonts hosted on web services like Google Fonts using the `<link>` tag in HTML. This allows you to use a wide variety of fonts without needing to host the font files yourself.
To use a Google Font called 'Droid Serif':
```html
<head>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
</head>
<body>
<p style="font-family: 'Droid Serif', serif;">This is a paragraph in Droid Serif.</p>
</body>
Favourites
Java
HTML and CSS 
Python
Javascript
TroubleshootingMonitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now
Programming Cheatsheets: Quick Reference for Productivity
Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.
ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now!
Blogs
Learn
Tools