Selecting a suitable body font for a website can be cumbersome, mainly because we always manage to overcomplicate this for ourselves. A few tips and tricks on how one can approach body typography without getting overwhelmed as a KL web design expert:
Function Over Form
First and foremost-most important rule: function over form. Your body font should be both legible and readable. Legibility deals with how well one can differentiate one letter from another.
Readability refers to how comfortably a reader can get through the text. Simply said, your body font should be easily readable and not require more additional exertion by a user than what is normally needed to consume the content.
Your body typography is the quiet guy in the back running the lights; when it’s done well, nobody ever notices it, but when it’s poorly executed, it suddenly becomes loudly obvious.
You have loads of other places on your website for some real show-and-tell with branding through colors, spacing, headings, icons, and placing your logo. Body typography is not where you want to let your personality shine; it might make the content harder to consume.
More: Checkout these cool AI tools for web designers.
Picking a font with too much personality does indeed make the content harder to consume, which is a huge design mistake.
It also might cause some branding issues because if your body font, heading fonts, and other elements are pulling in different directions, the whole design becomes hard to balance. In that case, let’s just say boring is better.
Of course, there are some exceptions where a special body font may enhance the experience; for most of us, it’s better to stick to the basics. From the more technical perspective, select a font with a medium to large x-height.
A big x-height reduces the difference between capital and lower-case letters, hence making it more readable-very important for computer screens. Secondly, your font must have middle to low stroke contrast; the width of the letters should be more regular. This is because fonts with great variations in stroke thickness can be difficult to read at small sizes.
Interesting: Websites to find free commercial use fonts
Shapes of Distinct Letters
The shapes of distinct letters are something else. Use fonts whose letters, numbers, and punctuation are unadorned, straightforward, and easy to distinguish.
Even spacing and distinct shapes enhance readability. Another consideration is flexibility. The font you choose should be available in various weights and styles, such as bold or italic.
You do not want to rely on a single weight or style, since it may cause problems later on in the production process. With all these fonts available, there is no need to constrain yourself to a single choice of font.
Think about your brand’s vibe to help you make your choice between serif and sans-serif. Serif is a bit classier and traditional, while sans-serif is quite modern and simple.
For me, I usually use a sans-serif font because it’s pretty versatile, it looks amazing on screens, and works even when the design calls for something a bit more elegant. You can also balance a sans-serif body font with a serif heading font.
Here are some typefaces I recommend that are free on Google Fonts. “Inter” is my current go-to font. It hits all of the necessary marks, and it looks gorgeous on screen. “Open Sans” is another very functional font with a little more personality than “Inter.”
If you’re looking for something friendlier, “Lato” is a good alternative. For something a bit more basic, one can’t go wrong with “Roboto”, though I would suggest going with “Inter” over “Roboto”.
If you prefer serif fonts, then “Merriweather”, “IBM Plex Serif”, and “Crimson Pro” are great, and “Roboto” also has a serif version called “Roboto Slab”.
More: Discover my web design process
Keep It Simple
Lastly, my main piece of advice is to keep things simple. Don’t overcomplicate your body typography or try to be too clever-you’ll more than likely cause more harm than good.
Once you find a good font or maybe two to three fonts that you work well with, use them.
There is nothing wrong with reusing fonts across projects. No combination of fonts is unique, and sticking with what works will save you time without compromising your design.
0 Comments