point.comCSS Font Properties
CSS has several properties that can be used to style and control the way text is displayed. These properties include font style, size, weight, family, and more.
selector {
font-property: value;
}
- selector: This is the HTML element you want to style (e.g. p, h1, body)
- font-property: This is the specific font property you want to control (e.g. font-family, font-size)
- value: This is the value that you want to set for the property (e.g. Arial, 16px)
font-family
The font-family property specifies the font that will be used on the text.
p {
font-family: 'Arial', sans-serif;
}
font-size
The font-size property sets the size of the text. You can specify the size using units like px, em, rem, %, or vw.
h1 {
font-size: 36px; /* Set the font size to 36 pixels */
}
p {
font-size: 1.2em; /* 1.2 times the size of the parent element */
}
font-weight
The font-weight property controls the thickness of the text. The values can be normal, bold, lighter, or a number (100–900) to specify more precise weights.
h1 {
font-weight: bold;
}
p {
font-weight: 300; /* Light weight */
}
font-style
The font-style property is used to define whether the text is italic, oblique, or normal.
h1 {
font-style: italic; /* Italic text */
}
p {
font-style: normal; /* Normal text */
}
font-variant
The font-variant property is used to control advanced text formatting, such as small-caps and other variant styles.
h2 {
font-variant: small-caps;
}
font-stretch
The font-stretch property controls the width of the text, such as condensed or expanded.
p {
font-stretch: condensed;
}
line-height
The line-height property controls the spacing between lines of text. It can be set in pixels, em, percentage, or a unitless number.
p {
line-height: 1.6; /* 1.6 times the font size */
}
h1 {
line-height: 50px;
}
letter-spacing
The letter-spacing property controls the space between individual letters in the text.
h1 {
letter-spacing: 2px;
}
word-spacing
The word-spacing property controls the space between words in a text.
p {
word-spacing: 5px;
}
text-transform
The text-transform property is used to control the capitalization of text. It can make text uppercase, lowercase, or capitalize.
h2 {
text-transform: uppercase;
}
p {
text-transform: capitalize;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.5;
}
h1 {
font-size: 36px;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
}
p {
font-size: 18px;
font-style: normal;
line-height: 1.8;
word-spacing: 4px;
}
</style>
</head>
<body>
<h1>Heading Example</h1>
<p>This is a paragraph with customized font properties.</p>
</body>
</html>
Quickly Find What You Are Looking For
OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.
Color Picker
