CSS Font Properties: A Comprehensive Guide to Styling Text
Contents
CSS Font Properties
Learn about CSS font properties and how to style text using font-family, font-size, font-weight, and more.
Understand their impact on typography and improve the visual appeal of your web pages.
CSS Fonts refers to the CSS (Cascading Style Sheets) properties and rules used to define the appearance and characteristics of fonts within a web page. CSS provides several font-related properties that allow developers to control the typeface, size, style, and other aspects of the text displayed on a web page.
Some of CSS font properties:
How to use CSS font-Family ?
font-family:
This property specifies the preferred font family or list of font families for text. It allows you to define a fallback font in case the user’s system doesn’t have the first choice font.
For example:
p {
font-family: Arial, sans-serif;
}
Example: complete code in html
1)open notepad Text editor to cerate HTML file the the write the following code
<!DOCTYPE html>
<html>
<head>
<title>Font Family Example</title>
<style>
p {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p>This is a paragraph with custom font family.</p>
</body>
</html>
2)Save the file from : File menu >> save >> text.html
3)open: text.html file by any web browser to see the following result :
Another method:
By using :External CSS file (styles.css):
1)create HTML file:test.html
<!DOCTYPE html> <html> <head> <title>Font Family Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>This is a paragraph with custom font family.</p> </body> </html>
2)create CSS file :
styles.css:
p {
font-family: Arial, sans-serif;
}
In each of these examples, the font-family property is set to Arial, sans-serif, which means the browser will try to display the text in Arial font if available.
If Arial is not available, it will fall back to a sans-serif font. You can specify multiple font families separated by commas to create a fallback chain in case the browser doesn’t support the first choice font.
3) open test.html file by any web browser to see the same result
How to use CSS font-Size property ?
font-size:
It sets the size of the text. You can specify it in absolute units (e.g., pixels) or relative units (e.g., em or rem). For example:
h1 {
font-size: 24px;
}
Example: complete code in html
<!DOCTYPE html>
<html>
<head>
<title>Font Family Example</title>
<style>
p {
font-family: Arial, sans-serif;
}
h1 {
font-size: 24px;
}
</style>
</head>
<body>
<h1> heading 1 </h1>
<p>This is a paragraph with custom font family.</p>
</body>
</html>
Another method:
font-size: complete code in html
To apply the font-size property in HTML, you can use inline CSS, a <style> block, or an external CSS file.
Here’s an example of how you can use the font-size property in different ways within an HTML document:
1)create HTML file :by notepad text editor
<!DOCTYPE html> <html> <head> <title>Font Size Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>This is a paragraph with custom font size.</p> </body> </html>
2) create External CSS file (styles.css):
styles.css:
p {
font-size: 16px;
}
In each of these examples, the font-size property is set to 16px, specifying that the text within the <p> element should be rendered with a font size of 16 pixels. You can use other units of measurement such as em, rem, pt, vh, vw, etc., depending on your requirements.
How use CSS font-weight property ?
font-weight:
This property defines the thickness or boldness of the text. Common values are normal and bold, but you can also use numeric values ranging from 100 to 900 for finer control.
For example:
p {
font-weight: bold;
}
Example: complete code in html
<!DOCTYPE html>
<html>
<head>
<title>Font Family Example</title>
<style>
p {
font-weight:bold;
}
</style>
</head>
<body>
<p> I am a bold weight</p>
</body>
</html>
How to use CSS font-style property ?
font-style:
It sets the style of the font, such as italic or oblique.
Common values are normal, italic, and oblique.
For example:
p{
font-style: italic;
}
complete code example:
<!DOCTYPE html>
<html>
<head>
<title>Font Family Example</title>
<style>
p{
font-style: italic;
}
</style>
</head>
<body>
<p> I am a bold weight</p>
</body>
</html>
How to use font-variant property ?
font-variant:
This property controls the appearance of small-caps text.
The values can be normal or small-caps.
For example:
p {
font-variant: small-caps;
}
Complete code example:
<!DOCTYPE html>
<html>
<head>
<title>Font Family Example</title>
<style>
p {
font-variant:small-caps;
}
</style>
</head>
<body>
<p> I am a small caps</p>
</body>
</html
How to use CSS line-height property ?
line-height:
It defines the height of a line of text, which affects the vertical spacing between lines.
It can be set as a unitless number, a specific length, or a percentage.
<!DOCTYPE html>
<html>
<head>
<title>Font Family Example</title>
<style>
p {
line-height: 1.5;
}
</style>
</head>
<body>
<p>i have a line-height = 1.5 i have a line-height = 1.5i have a line-height = 1.5i have a line-height = 1.5i have a line-height = 1.5i have a line-height = 1.5</p>
</body>
</html>
For example:
p {
line-height: 1.5;
}
These are just a few examples of CSS font properties.
There are more properties available, such as text-decoration, text-transform, and text-shadow, which can further modify the appearance of text on a web page.
Another method:
font-weight: complete code in html
To apply the font-weight property in HTML, you can use inline CSS, a <style> block, or an external CSS file.
Here’s an example of how you can use the font-weight property in external CSS file:
1)create html file :text.html
<!DOCTYPE html> <html> <head> <title>Font Weight Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>This is a paragraph with bold font weight.</p> </body> </html>
2)create External CSS file (styles.css):
styles.css:
p {
font-weight: bold;
}
3) open test.html by any web browser
1-In each of these examples, the font-weight property is set to bold, which means the text within the <p> element will be displayed in bold.
2-control the font weight with more granularity.
For example, font-weight: 700; would be equivalent to bold.
Another method:
font-variant: complete code in html
The font-variant property is used to control the appearance of small-caps text in HTML.
Here’s an example of how you can use the font-variant property by using external CSS file:
1)create html file :test.html
<!DOCTYPE html> <html> <head> <title>Font Variant Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>This is a paragraph with small-caps font variant.</p> </body> </html>
2)create External CSS file (styles.css):
styles.css:
p {
font-variant: small-caps;
}
Explanation:
1-In each of these examples, the font-variant property is set to small-caps, which means the text within the <p> element will be displayed in small capitals.
2-This property is commonly used to give text a stylistic effect where lowercase letters are replaced with smaller versions of the corresponding uppercase letters while maintaining the same height.
Another method:
line-height: complete code in html
To apply the line-height property in HTML, you can use an external CSS file.
Here’s an example of how you can use the line-height property in using external CSS file:
1)create html file:test.html
<!DOCTYPE html> <html> <head> <title>Line Height Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>This is a paragraph with custom line height.</p> </body> </html>
2)create External CSS file (styles.css):
p {
line-height: 1.5;
}
Explanation:
1-In each of these examples, the line-height property is set to 1.5, which means the text within the <p> element will have a line height of 1.5 times the font size.
2-This property controls the spacing between lines of text and can be specified as a unitless number, a specific length value, or a percentage.
If you change:
line height=2.5
Font size =20px
How to use css font-style property in html?
font-style: complete code in html
To apply the font-style property in HTML, you can use inline CSS, a <style> block, or an external CSS file.
Here’s an example of how you can use the font-style property in different ways within an HTML document:
Inline CSS:
<p style="font-style: italic;">This is a paragraph with italic font style.</p> <style>
block within HTML:
<!DOCTYPE html>
<html>
<head>
<title>Font Style Example</title>
<style>
p {
font-style: oblique;
}
</style>
</head>
<body>
<p>This is a paragraph with oblique font style.</p>
</body>
</html>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Font Style Example</title>
<style>
p {
font-style: oblique;
}
h1{
font-style:italic;
}
h2{
font-style:normal;
}
</style>
</head>
<body>
<p>This is a paragraph with oblique font style.</p>
<h1>I have italic font style </h1>
<h2> I have normal font style </h2>
</body>
</html>
Another method:
By using: External CSS file (styles.css):
1)create html file:test.html
<!DOCTYPE html> <html> <head> <title>Font Style Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>This is a paragraph with italic font style.</p> </body> </html>
2)create css file
styles.css:
p {
font-style: italic;
}
In each of these examples, the font-style property is set to italic, which means the text within the <p> element will be displayed in italic style.
You can also use font-style: oblique; to apply an oblique font style.
How to use font- stretch property ?
font-stretch: complete code in html
The font-stretch property in CSS is used to control the width or condensedness of a font.
However, it is important to note that the font-stretch property has limited browser support and may not be fully supported in all browsers.
As of my knowledge cutoff in September 2021, it is not widely supported.
If you still want to apply the font-stretch property, you can use the following example code:
Inline CSS:
<p style="font-stretch: condensed;">This is a paragraph with condensed font stretch.</p> <style>
block within HTML:
<!DOCTYPE html>
<html>
<head>
<title>Font Stretch Example</title>
<style>
p {
font-stretch: condensed;
}
</style>
</head>
<body>
<p>This is a paragraph with condensed font stretch.</p>
</body>
</html>
Another method:
By using External CSS file (styles.css):
1)create html file : test.html
<!DOCTYPE html> <html> <head> <title>Font Stretch Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>This is a paragraph with condensed font stretch.</p> </body> </html>
2)create css file:
styles.css:
p {
font-stretch: condensed;
}
Please keep in mind that browser support for the font-stretch property is limited, and its effect may vary across different browsers.
It is recommended to check the current browser compatibility before using the font-stretch property in production.