Line Height, Letter Spacing, Text Alignment
Font height, font letter spacing, and font text alignment attributes allow you to apply some important CSS properties or attributes like default line height, text letter spacing, and text alignment to any of your HTML webpages and website designs created with CSS. This can advance the default preview order of any web development project and preview it in a commercial web browser.
So let us now understand the font height, font letter spacing, and font text alignment properties better by applying them to HTML.
Font line height attributes in HTML web page.
If you want to control and manage the vertical space between text rows in any HTML webpage created with CSS, then you can apply the default line height, text letter spacing, and text alignment properties to any of your HTML webpages. So you can manually manage your text font height with font line height attributes, it improves user reading behaviour in existing web page, and makes simple web page preview more attractive and commercially.
CSS line height example in HTML web page.
p {
line-height: 1.8; /* set manual 1.8 font size of paragraph text*/
}
Line Height Units.
You can use default webpage text line height in different ways as per your webpage text requirement.
Line Height Units Example.
- Unitless line height attributes – line-height: 2;
- Length line height attributes – line-height: 22px;
- Percentage line height attributes – line-height: 200%;
Here you can apply any font unit from above given different line height values to your webpage. In most of the cases unitless line height attributes are used. By using this you can increase your existing font size instantly.
css letter spacing attributes in HTML web page.
You can adjust the character space between webpage text using CSS letter spacing properties in your HTML web page. You can also custom display default space between previewed web page text content in your web page. This improves readability, default preview, and custom text display order in your current web page.
CSS letter spacing example in HTML web page.
h1 {
letter-spacing: 0.09em; /* set the custom heading font size */
}
Letter spacing units in CSS.
You can use default preview text letter spacing in different ways in your web page.
- Length letter spacing attributes – letter-spacing: 3px;
- Percentage letter spacing attributes – letter-spacing: 2%;
- Em units letter spacing attributes – letter-spacing: 0.7em;
css text alignment attributes in HTML web page.
CSS text alignment properties allow you to control and manage the alignment position of text within your webpage container when you are creating text in an existing HTML webpage. By default, you can align webpage text in the usual left, right, center, and justify directions.
CSS text alignment example in HTML web page.
h2 {
text-align: center; /* align heading2 text alignment in center direction*/
}
p {
text-align: justify; /* it align web page text in justify direction */
}
Line height, letter spacing, and text alignment example in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Line Height, Letter Spacing, Text Alignment Example In Css</title>
<style>
body {
font-family: monotype corsiva;
margin: 1;
padding: 10px;
background-color: aqua;
}
h1 {
font-family: arial;
font-size: 2rem; /* it previews heading font size */
font-weight: 800; /* create heading Bold font */
line-height: 1.7; /* add line Tight height */
text-align: center; /* move text in Center alignment */
}
h2 {
font-size: 3rem; /* set heading 2 font size */
font-weight: 700; /* set font weight */
line-height: 1.2; /* set text height space */
text-align: left; /* set Left text alignment */
letter-spacing: 0.09em; /* add text letter spacing */
}
p {
font-size: 2rem; /* set paragraph Font size */
font-weight: 700; /* set Normal weight */
line-height: 1.7; /* add paragraph text line height */
text-align: justify; /* align or Justified text position */
letter-spacing: 0.04em; /* add or set text letter spacing */
color: blue; /* set manual paragraph Text color */
}
</style>
</head>
<body>
<h1>Let Tray Some Font Attributes In Html With Css</h1>
<h2>You Can See the Css Font Attributes </h2>
<p>Explore Font Attributes with Html And Css Styling Attributes</p>
</body>
</html>
Line height, letter spacing, text alignment in html web page, Conclusion.
By manually adjusting the line height, text letter spacing, and text alignment of the text in the above HTML webpage, you can improve the readability of your existing webpage text. Here you can control and manage these CSS attributes as per your web development needs!
