We are a design-centered studio that shares a real passion for typography and all its characteristics: from admeasurement and spacing to hierarchy. That’s why we have a strong focus on offering you enough room to find the right match between the type layer and your unique branding approach.
Pairing fonts together in a manner that makes them look good and complement each other is no easy task (unless you are an experienced designer). Choosing the correct fonts for your website’s design can be the difference between a compelling and attractive website and a dull, ordinary one.
Fonts make a difference in the type of message you want to send to the world and how you present yourself. If you aim to show playfulness, joy, and quirkiness, you can’t settle just with the words; your fonts need to match that. And, when it comes to a website, there are a lot of areas where your text shows up, so a lot more ways to mess things up.
Here are two rules that, if you follow, should place you on the safe side:
- Limit yourself to only a few fonts: it’s best to stick with two fonts, but if you’re feeling ambitious, three is the maximum.
- Always use headings to create hierarchy and coherence within the structure of a page or a blog post.
Have no worries, we’ve put in place the right font controls so you can make your website look the way you want with just a few clicks.
Change the font style and characteristics
Using the Osteria WordPress theme, you can make different font adjustments—change font family, weight, size, set a letter spacing, and choose a text-decoration. Depending on what particular text you’re willing to adjust, there’s a specific path for each one.
In the case of Osteria, navigate to Appearance → Customize → Theme Options, and in the following sub-sections you will find all the available font options:
- Header: set the font for elements like Site Title, Navigation, and Front Page Hero Widgets;
- Main Content: change the Page Title Font, Body Text Font, Quote Block Font, and Headings Fonts (H1→H6);
- Buttons: customize the font for your buttons;
- Blog Grid Items: change the Item Title, Meta, Excerpt, and Footer Font;
- Footer: change the fonts for the Headings and Body text displayed in the footer area.
To help you even more, we developed an automated calculation system to accurately and correctly adjust fonts and sizes for all devices—mobile, desktop, tablets, and everything in between. Thanks to this tool, you can now be certain that your website displays the right font sizes on all gadgets—one worry less. If you want to learn more about our process of creating true fluid web typography and our approach to responsive web design, you can read this article.
Using Premium Fonts
If you want to go even further, you can always appeal to custom fonts. You can quickly make that happen through seamless integration with Fonto, our custom fonts management plugin. For further details on how to use it, you can read this helpful article.