How many fonts to use on a website

With the increase in platforms and responsive design becoming much more prevalent looking at these issues is not as simple as it used to be.

Good article. I wish I could find a copy of the video because it was a well-rounded discussion. Haha found it! It was an audio presentation with slides from a typographica SXSW forum ! I would recommend it as a good starting point for anyone who wants a good snapshot of what matters in web typography and how to start.

My practice when designing web site is to use 2 font families and variations with italic, bold, different letter spacing etc. Everything over 3 font families is overkill for design. I try to stick to two or at max three different fonts.

It really depends on how well the fonts work together. Designs that pass extreme conditions are ready for full user access. There are a lot of things to consider when designing for the screen, and as technology and products advance, the conditions to design will continuously shift. However, when it comes to typography, there are certain things that seem to always hold true.

Typography in web design is similar to print design but requires certain considerations to ensure legibility on all screen types. Typeface, type size, color, line height, and letter shapes are some of the factors within typography that must be carefully balanced to provide a pleasant reading experience. Fonts that are best for reading on screen are ones with distinctive and open letterforms. Proxima Nova, Georgia, and Fira have characteristics that make it easy to read on various screen displays.

The font size on a website should be responsive to the screen size that displays it. In general, a font should be pt on a mobile screen, pt on a tablet, and pt on a desktop computer screen. Factors like type size, line height, and line length should also be considered. Good typography, like good design, is invisible. The primary purpose of typography is to communicate a written message.

Type should be designed to be legible and provide a pleasant reading experience. Factors like type size, line height, and line length are elements of typography that should always be considered. A website should keep the number of fonts to a minimum—no more than three in total. When a site has too many fonts, the user can become disoriented with so many shifts in the visual design. The chosen typefaces should have a variety of weights and styles that can be used strategically in the UI design.

Subscription implies consent to our privacy policy. This guide will tell you everything you'll need to know to get started with website typography. Speaking generally, typography determines how text looks to the reader, how the words literally appear on a page or screen. For our purposes, it helps to hone in on just the text that we see on websites. Additionally, web typography encompasses both how we design the look of the text itself — fonts, colors, and styling — as well as how we present the text on its respective web page.

All of these details matter, since they amount to a comfortable reading experience for as many visitors as possible. A typeface is a specific look and feel applied to a set of alphabetic and numeric characters.

Not exactly. A font is a particular instance of a typeface. Every font within a typeface has a specific weight i. Put another way, a typeface is the broad style category for a set of specific fonts — this is why a typeface is also sometimes called a font family.

The distinction between font and typeface is small, but important as we start to explore web typography practices more in-depth. A serif is a small ornamental projection off the main stroke of a letter.

Fonts with this styling are called serif fonts. Image Source. There are other font styles too — script is another style used on the web, though much less common than serif and sans-serif style fonts. Script fonts are designed to replicate the varied and often fluid strokes created by handwriting. Script is a harder style to read than serif and sans serif, and should be used only for special cases, like prominent headings and fancy party invitations.

Kerning is the horizontal space between two specific characters. Fonts can have smaller or wider kernings to improve legibility and avoid awkward gaps. Common fonts have specific kernings for every pairing of adjacent characters, so all letters fit together snugly.

Like kerning, tracking also describes the spacing between letters. However, tracking denotes the overall spacing between letters of in an entire line or block of text, rather than just two particular letters:. Tracking is another typographical detail to get right for legibility. We can tell if a line of text is spaced too widely or looks a bit too squashed.

Again, the right amount of leading helps readers navigate text — too much or too little is awkward to read. Most web pages, especially text-heavy ones, break content into sections by topic.

These sections are signified and labeled by headings. The order of text from most prominent to least prominent comprises the hierarchy of the page. Hierarchy is crucial for making pages easily navigable and digestible.

Readers should be able to jump to whichever section is relevant to them by looking at headings alone. Typography works to imply hierarchy with different font sizes, font weights, font styles, and perhaps different fonts or typefaces altogether. For example, a typical blog post hierarchy starts with the title text a. Finally, we reach the body text, which might be the smallest but contains the content readers want. Realistically, there's no reason to use more than three fonts, in any piece of design not just the web that's it, no more, sorry.

One for your headings and one for body copy. When you add in bold and italics we're already looking at 4 variants of each, so that's more than enough to play with.

While there aren't really any definitive rules, it's best to keep that third font out of the picture and stick to two. Can you really justify introducing another font into the mix for your sub headings? Probably not but sometimes. Now I'm not going to go away and cry in a corner if you use three, but you should really try to stick to two.

Every decision should have a rationale behind it.