How to Enhance Readability with Font Sizing
This post will elaborate on the method to enhance the readability with font sizing.
How to Enhance Readability with Font Sizing?
The readability of fonts can be increased by working on various factors. Such as increasing the line length to a slightly larger size. Additionally, use a suitable font family, and use a proper font size. However, to practically learn the enhancement of readability with font sizing, follow the provided steps below:
Step 1: Create an HTML Structure
Start with creating the <div> with the class name “content”. After that, include some content inside the <div> tag:
Step 2: Apply CSS
First, set the “font-size” to “16px” and “line-height” to “1.5”. Furthermore, also set the font for <h1> and <p> tags:
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
}
h1 {
text-align: center;
font-size: 26px;
}
p {
font-size: 18px;
}
Output
Here is an output of the code that is suitable for all screen sizes:
Step 3: Apply Media Query
- First, mention the “@mention” tag and specify the screen size “768px” to the “max-width” property. This screen size will apply to all the screens which have a size equal to or less than “768px”.
- After that, specify the font size for <body>, <h1>, and <p> tags:
body {
font-size: 16px;
line-height: 1.5;
}
h1 {
font-size: 22px;
}
p {
font-size: 14
}
}
Below is an output after applying the media query. The media query was designed for devices that have a screen size equal to or less than “768px”:
Conclusion
To enhance readability with font sizing, first, develop a sense of readability and font sizing. Moreover, understand the different font sizes and font tags. Choose the appropriate font size and then choose the suitable line height. Typically, the line height is 1.2 times the font size. Moreover, choose the font family that is suitable for web content. This article has demonstrated the practical way of enhancing readability with font sizing.
Source: linuxhint.com