In our guide to the best fonts for websites, we summarized the key characteristics to look for:
One of the reasons why serifs are heavily preferred in literature and newspapers is because of legibility. The serifs (feet) at the tops and bottoms of the characters make it easier for readers to distinguish between similar-looking characters like the uppercase “I” and lowercase “l”, so there’s no slowing down due to comprehension issues.
If you’re designing a page with over 600 words, it wouldn’t be a bad idea to use a serif in the body text for this very reason.
That said, if you find a sans serif with distinct letterforms (even without the serifs), don’t be afraid to experiment. We have some examples of how to use sans serifs in both body and header placements below.
One of the reasons why san serifs were long thought to be a better choice than serifs for online text was because of their high readability. However, studies have shown that there’s little difference in how quickly or easily people can read serif vs. san serif texts — at least at smaller sizes.
As screen resolutions have vastly improved over the years, typographers have been able to create font faces in both styles that are equally as readable. As the NNG explains:
“The old usability guideline for online typography was simple: stick to sans-serif typefaces. Because computer screens were too lousy to render serifs properly, attempting serif type at body-text sizes resulted in blurry letter shapes.”
While other font types — like overly decorative ones — may be too difficult to read outside of large header text, designers have a lot of options in terms of how they style the text on a page with serif and san serifs.
What you should be more cognizant of, then, is the sizing and spacing of your characters instead as that does have an effect on readability and legibility.
There are some web designers who are reluctant to use typefaces like Helvetica or Times New Roman because of how overused they are. However, font selection and pairing aren’t about how you feel about your website’s typography, it’s about how comfortable your visitors are in reading it.
So, there’s no shame in choosing classics if they get the job done.
Select font types and fonts with styles that align well with your brand. For example, serif fonts come off feeling more traditional and serious as opposed to cursive fonts which tend to be more quirky and fun.
You can tell visitors a lot about your brand just by choosing the right kinds of fonts to begin with.
Don’t lose sight of these rules as you move onto the next step of designing with typography: