Typography is a term carried-over from the time of print, it refers to the style of the text on your website or other materials. Having great typography means your content will look good and be more readable. If you lack in typography skills, you website and content can really suffer. Poorly chosen fonts and styling can turn readers away, whereas top notch typography can engage users and give your company a good face. Read these steps and tips for making stunning and elegant, top notch typography on your website.
Setting the Tone and Mood
The first thing you should do to make sure your typography is top notch is to determine the overall tone and mood of your website. Educational and informative sites may have a serious tone, making highly decorative typography inappropriate and off-putting. Websites for events or entertainment can use comical, whimsical and decorated texts to help set a light mood or tone. Review your content and target audience to know which tone you are looking to set so that you can enhance it with the right typography.
Picking a Primary Font
There are nearly infinite choices when it comes to fonts for your website. The best pool of fonts to choose from however, is Google Fonts . That’s because they work well on any browser and ensure your visitors see your content as you intend them to. Plus, there are plenty of choices within the realm of the highly-popular Google Fonts database; over 800 font-families in all.
Most websites will look best with sans-serif fonts. Serifs are the small lines that hang at the ends of each character: Sans- meaning without. Using sans-serifs fonts will make sure your text doesn’t get pixelated and blurry if scaled to larger sizes, this is especially important if you’re using responsive templates.
To get started, try popular web fonts like Open Sans, Futura, Helvetica, Verdona, and Arial. Times New Roman is good for more formal texts, and informative websites. For a more classic and retro look try the Google Font Old Standard TT. If you have a tech-based or modern website Droid Sans may work best for you.
Sometimes you will need more than one font your website. This can happen if you quote large blocks of text, use segregated frames with distinct content, or simply want to embellish headers and other limited texts.
Make sure your secondary font matches your primary font in mood and tone. It should also match as far having serifs or not is concerned. Try to space it out from your primary font so that it doesn’t look mismatched or cluttered.
You should keep embellishments to a minimum. Try just using the decorative effects included in your font pack at first. If you need to spruce your text up a little more then add some drop caps. Drop caps can be tricky but luckily, if you have WordPress Hosting, you can install a drop caps typography plugin to automate the process. Other website may need to utilize CSS and HTML to install drop caps or typographical embellishments.
Reviewing your Typography
To make sure your typography is top notch, you should read through every word of text on your website. This will help you determine if the reader’s eyes are going to tire or strain with smaller fonts. You can also check for clashing tone and font scenarios, such as a serious or legal section on a fun or lighthearted website. Such cases may be a good place for secondary fonts.
The last thing you need to check for is that the typography on your website is properly sized. It’s not uncommon to have to guess-and-check font sizes to see what works best. Make sure the headers are distinctly larger than your main text, so that users can more easily skim your content. Titles and logos should be the largest font on your website, and legal print, mundane details, or copyright information can be condensed and out of the way with a small font size.
The best way to make sure your typography is top notch is to use a tried and true typography plugin. For web designers with WordPress hosting, this is as simple as making a few clicks. A good place to start is the Google Typography Plugin for WordPress, which makes it easy to install any Google font on your website. Another great plugin for typography is the Simple Pull Quote Plugin that lets you instantly highlight blocks of text and transform them into pop-out quotes.
Implementing these tips will ensure your typography is top notch. Reviewing your own text and using fonts that speak to your context and theme will give you an added typographical effect. Knowing what to avoid, what speaks to your audience, and which font sizes and styling characteristics to use will better the appearance of your website or other project.
Originally posted on May 18, 2017 @ 3:21 pm