The Ultimate Guide to Typography Choosing the Right Fonts

However, it’s important to keep in mind that web fonts can slow down the loading speed of your website. Web fonts are fonts that are hosted on a server and downloaded by the user’s browser when they visit a website. Web fonts can be used to create a more unique and visually appealing website, but they can also slow down the loading speed of a website.

How to pick a font is less about specific steps and more about creating the right feel for a design project. Here’s how you do it (with some examples of lovely typography choices). Narrowing down typeface choices based on brand suitability can start with making a list of keywords that represent the brand. From there, designers can search for fonts that include those keywords or synonyms.

Consider Your Font’s History

While the length of your text helps determine which font you select, the size at which you’re setting type is another important factor. At relatively small sizes, up to 16pt, try sans serif options like Roboto, Montserrat and Raleway. One of MyFonts’ best-selling fonts, Sofia Pro is a sans serif typeface with a modern look and geometric lines. Designed specifically to be readable even in very small sizes, it’s perfect for web accessibility, usability, business cards and mobile screens. In this example, the main headline uses a modern geometric sans serif typeface. This font choice helps establish the rest of the design, it pairs well with the Lomography logotype, the camera product photo, and other design elements.

To make this easier, look for a font family with a range of weights, cases and sizes. This type of font pairing will have a subtler effect than one that utilizes two different fonts. The logo template above features only one sans serif font Dosis.

Style

This means that web safe fonts will always display correctly on a user’s device, regardless of whether the user has the font installed on their computer. This highly popular and widely used humanist font was developed in 2005 by Jeremy Tankard for Microsoft. It’s known to work well on screens and displays, making it a good choice for a website. Diastema has a modern, whimsical design that uses long and sometimes joining ligatures.

For example, maybe you want to pair a condensed sans serif typeface with a wider san serif. While they are both the same category of type, they vary in contrast due to their width. choosing fonts for website The second is how you use typography to create a mood or design aesthetic to attract a specific audience. Now that we understand what a typeface and a font are, what is typography?

Choose Fonts That Are Flexible

It’s dark and bold, with hints of white in each letter to slightly brighten up the forefront and add depth. Other than in the logo, you might also be using your brand fonts to design marketing visuals like flyers, posters, business cards, brochures and more. So, there will be different text objects such as headings, subheadings and body text. They make the text in your design look visually appealing while delivering the main message that attracts your audience.

These typefaces are more modern, bold, and great for eye-catching headlines. One of the most popular sans serif typefaces is Arial which is a copycat of Helvetica. When hunting down a font for your project, try out a combination of script, serif and sans serif fonts to create a balanced design. Or, to create a bold sense of contrast, check out these dynamic font duos. A thorough grasp of what each project entails allows designers to better understand which typeface will best suit those needs.

2Type Families02:46

This font, from the sans serif family was designed by Steve Matteson, Type Director of Ascender Corp. It’s considered a very mobile friendly font in terms of readability and is often used in apps. Another mobile friendly font is the Droid font also from the Ascender Corp or the Avenir font designed by Adrian Frutiger and published by Linotype. This classic gothic serif font includes decorative ligatures on capital letters.

• A good rule of thumb is to assign different font faces, sizes, and typographical emphasis (e.g. bold, italic, etc.) to different elements or purposes.
• A font can have multiple weights, such as light, regular, semibold and bold.
• There’s a surprising number of online tools you can use to help you select fonts, such as FontPair, FontSpark, and Better Font Finder.
• And depending on the type of Serif, they can come across as corporate.
• But others have such unique character that suitable combinations are limited.
• Others allow for use in promotional materials but might now allow for use on a product being sold.

Old Style or Transitional serif fonts like EB Garamond or Libre Baskerville, tend to be easy on the eyes for longer reading like news and magazine articles. While it’s possible to use a Humanist sans serif font for long stretches of body text, the safer bet is a familiar serif design that readers can process quickly. For readability, serif fonts were once viewed as more reader-friendly in print, while sans serif fonts as more reader-friendly on screen. But most modern typefaces in both styles can work well in either medium, especially with advances in screen resolutions. Sans serif typefaces do not have serifs (the French word sans, means “without”).

If you’re leaning toward a serif font, opt for something in the old style like Quattrocento, a transitional style like Libre Baskerville, or a slab serif like Arvo. Then the best choice would be something in the humanist or grotesque style like Cabin or Raleway, but even some geometric styles like Montserrat will work. Experiment by trying out a few of these and see what works best in layout. If you want a totally unique, bespoke typeface—and who wouldn’t—it can be expensive and time consuming, so start by reaching out to foundries for quotes. On the bright side, whomever you hire will probably handle many of the concerns listed in this guide. Among your free options, you could always look for a less commonly used web font.

Designers matching two or more scripts for a font must balance separate histories and writing traditions. If you expect to use two different scripts side-by-side, test a few sets of sample text to see if you think the two scripts sit comfortably together. If your principle concern is for a font to remain consistent across the greatest number of scripts possible, consider using the Noto font family (shown above). That’s a matter of the font’s personality, but to some extent personality depends on familiarity. There’s a lot to think about, sure, but some of the most important considerations are the practical and functional features of the project.

Knowing the fundamentals of classic typography is a must-have skill for any graphic designer. But, knowing how to choose the right font can take experience – and a few mistakes along the way. The best part about learning how to pick fonts is the creative opportunity it provides. Mixing and matching typefaces can be a lot of fun and help bring life to projects.