What is the best CSS font size for your website?
What is the best CSS font size for your website?
7 minutes to read | 11.13.2020
TL;DR Font size is how big or small the characters of text will appear on a screen, and determines how well users are able read your content. If your font size is too small, it will be too hard to read, but if it's too big, it might not look right on the many different screen sizes. To find the best font-size, start with a small number (12px, then work up from there (14px, 16px, 18px, 20px), and see what works best with your design. Use em to scale your titles along with your font size.
Sign up for free to share your own content!
*
*
*
Remember back in college or high school when you’d go to write a research paper and it had to be in Times New Roman at 12 point font? Yeah, same, and I don’t miss it one bit. When web design first became something that anyone could pick up, most people chose to set their font at 12px. Is this a reference to writing old papers in high school? Probably not. A 12px font wasn’t all that bad considering the web was a lot different back in the day. You could really only access a website through a desktop’s browser, so small fonts looked good on the big (back when 15 inches was big) screens with low resolution. In 2021, there are just too many different devices with too many different resolutions out there to use such a small font, yet I still sometimes stumble upon websites with this size. I’m still young and have good eyesight, but even I struggle to read the content on those sites. I couldn’t imagine how the people who aren’t as fortunate feel trying to read the content. One thing is for sure - 12px is an extremely small font. We don’t want your visitors to have to press their phone up against their nose just to read your website, do we? So, let’s leave 12px to the research papers and find out what the best font size for your website is. Why is CSS font size important? Font size is important because it is how people will read your content. If it’s too small, your content won’t be legible; if it’s too big then it may not fit right on people’s screens. Font size is usually measured in pixels, or px. A pixel is an extremely tiny piece of a puzzle that, together with many more pixels, create your computer’s display. The pixel has gotten smaller and smaller over the years and probably will continue to do so. For example, the iPhone 12 has 2,962,440 pixels on its screen, the iPhone 6 had 1,000,500 pixels, and the iPhone 4 was at 153,600 pixels. We’ve had quite a journey so far. Today, there are many devices with many different sizes and resolutions, meaning a pixel isn’t the same size on every device. That means a 12px font size might look larger or smaller on your phone than your friend’s phone. On top of that, there are a lot more people that have access to the internet now. Some of these people are young, some older, some with good eyesight, some with bad eyesight, some that wear sunglasses, and others. A good font size will alleviate strain on people’s eyes while they read your content. - Our visitors don’t want to squint, so how do we find the perfect font size? How to find a general CSS font size You need to find a font size that will look good no matter what screen size and resolution your visitor is using. - Just like when finding the perfect line height, we are going to start with a small font size first. We need a starting point, so we’re going to start with 12px, even though I just told you to forget about it. From 12px we are just going to adjust it by 1 or 2px each time until we find a font size that looks good with our site. As you are picking a font size remember that font family matters. Fonts are designed by different people, so consistency is a luxury. Sometimes 18px in one font family looks like 14px in another. We recommend trying your font size on a few different font families just to see the difference. Here are some examples of font sizes:
Here is 12px in Nunito and 12px in Georgia Here is 14px in Nunito and 14px in Georgia Here is 16px in Nunito and 16px in Georgia Here is 18px in Nunito and 18px in Georgia Here is 20px in Nunito and 20px in Georgia
Depending on the font family, we don’t go below 16px in 2021, and have used 20px on some websites we’ve designed, including this one! It’s all about what looks good on your website, though! Finding a title’s CSS font size Titles are a bit larger than the general font size because they are important and we want our visitors to notice and read them. Unlike the general font size, where we really only need one size for the entire website, we usually have a few different titles for different purposes. For example, on Ninth Digital we have a really large font size for a main title, a slightly smaller size that we use as a subtitle, and another size for titles of sections inside posts. Your website may have even more. When trying to find a good size, we recommend scaling the title based on the font size. Using em we can multiply the general font size by whatever number we want to scale the title by. If we have a font size of 18px and we want our title to be twice the size, we wouldn’t set our title size to 36px. We’d actually want to set our title size to 2em. That way, in the future, if you end up increasing or decreasing your general font size, your titles will automatically scale along with it. It’s a lot easier to change just one number! Let’s look at some examples of title sizes:
Here is 12px - at 1.25em - at 1.5em - at 2em Here is 14px - at 1.25em - at 1.5em - at 2em Here is 16px - at 1.25em - at 1.5em - at 2em Here is 18px - at 1.25em - at 1.5em - at 2em Here is 20px - at 1.25em - at 1.5em - at 2em
What about font size on mobile devices? Sometimes a font size looks really good on a desktop or tablet, but doesn’t look that great on a mobile device. Mobile devices usually have less pixels going across the screen, so a bigger font size means that far less words can fit in one line. Depending on your website’s font size, you may have to decrease, or increase, your font size on mobile. - To do this, we need to create a media query, which are certain CSS rules that only apply to your website when the media query’s condition is met. Here’s how we can handle font size on mobile devices:
stylesheet.css
body { font-size: 20px; } @media screen and (max-width: 824px) { body { font-size: 18px; } }
Now, any screen that has a width of less than our breakpoint, ‘824px’, will now have its font size set to 18px. Of course, you can change ‘824px’ to any number you’d like. You can even have multiple breakpoints. If you used our method of scaling your titles with your font size, your titles will automatically change size when the screen is less than ‘824px’ wide. You won't have to add each title's CSS class in the media query. Well-known brand’s CSS font sizes Let’s take a look at a couple of well known brands and see how they handle font size. Airbnb - The vacation rental marketplace mainly uses a 16px font size on desktop. On mobile, it may lower down to 14px depending on your device. Medium - The online publishing platform uses a 21px font size on desktop, while lowering the font size to 18px on mobile devices. Twitter - The social media platform uses a 15px font size for its Tweets. The Guardian - The daily online newspaper uses a 17px font size on desktop, and it remains the same on mobile. Summarize CSS font size is important for both legibility and aesthetics. For font size, too small can be unreadable and hard to focus on, while too big can make your content just as hard to read and may lead to unwanted design behavior. - When trying to find the perfect font size for your website, we recommend starting with a small number and working up from there. Instead of hard-coding, or giving your titles an exact pixel size, scale them along with your font size by using em. Depending on what font size you choose, you may have to increase or decrease it on mobile. Don’t forget to share this with all your web design friends!
Share this with your friends
Recent Posts
What is the best word count for a blog post to rank high in Google?
What is the best word count for a blog post to rank high in Google?
Internet Marketing | 2 minutes to read | 01.08.2021
Part of SEO and ranking high in the search engine results is word count. Should your blog posts be short? Medium? Long? What's the optimal word count for blog posts?
Creating basic hover animations for links, buttons, and gradients in CSS
Creating basic hover animations for links, buttons, and gradients in CSS
Web Design | 8 minutes to read | 12.22.2020
Animations can bring your website to life, as well as give your design a touch of flair, but we don't want them to be crazy. Here's how to make basic hover animations with CSS.
View all posts