Publish 26 Mar 2022
What is a good font size for a website?
Large font sizes are legible to more people. Small font sizes allow you fit additional text within narrower widths. Each extreme has advantages, but if a visitor cannot read the words, page design is a failure.
The problem with choosing a default font size is that it has become relative to the amount of pixels on various digital displays. During the beginning of the internet, displays had 72 pixels per inch. That nicely corresponds to the analog 72 points per inch. Now displays can have in excess of 300 pixels per inch.
Although there is no official ADA-enforced minimum size font for websites, at least 16px font for the body text is a general recommendation. If you specify font size only in points, the size will vary widely across multiple displays—being too small to read on most. Specifying pixels is not much better unless you use responsive text sizes.
Another thing to keep in mind is that corrective lenses alter text size on an individual basis. Reading glasses can enlarge text, making font size subjective.
Viewport Width
One responsive method is to set text sizes with a vw (viewport width) unit. Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm. The variable-size subhead of this article is marked accordingly:
<h2 style="font-size:3vw;">What is a good font size for a website?</h2>Resize the browser window to see how the font size scales. You get a gradual font reduction as a browser window width reduces. Defining your entire site with viewport width fonts will likely overflow tables and columns with specific widths. So identify where it might be appropriate.
Responsive Media Queries
Media queries maintain a specific font size until reaching a specific screen width. It can then get larger or smaller, as specified within your cascading style sheet. You are not limited to two font size changes, nor are you limited to div tags.
/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}This website increases the size of body copy for better legibility on smaller devices. The change is not as smooth as the viewpoint width method, but it provides greater control over what happens at different widths.
Javascript Font Enlargement
Many sites (like this one) also include a user-selectable font size option. Visitors can click to enlarge and improve legibility. Ours is a simple enable-on-click plus sign that floats to the right of blog headlines. It only affects main text within the body of the blog. Other scripts permit progressive enlargement and reduction. Include the following script at bottom of the article page template within the body area.
<script>
function changeStyle(){
var element = document.getElementById("article-body");
element.style.fontSize = "110%";
}
</script>Style CSS accordingly:
@media screen and (min-width: 767px) {
.circle-text {
float: right;
width: 20px;
height: 20px;
line-height: 19px;
border-radius: 50%;
margin-top: 8px;
color: #b8aa8b;
border: 1px solid #b8aa8b;
font-size: 17px;
text-align: center;
-webkit-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.circle-text:hover, .circle-text:active {
color: #f7faf9
background: #b8aa8b;
border: none;
-webkit-transform: scale(115%);
transform: scale(1.15);
}
}Then add button where desired.
<div class="circle-text"><button type="button" onclick="changeStyle()">+</button></div>An em space is the width of a lowercase m in the current font and size. Hence, it is inherently a relative measurement (1.5em). An appropriate use is for margin or padding with responsive font sizes. Scaling font sizes by percentages is also a good responsive technique.
