Summary: Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.
Our quantitative usability testing of hidden menus (such as hamburger icons) and visible menus (such as links across the top of pages) reveals that:
Hidden navigation is less discoverable than visible or partially visible navigation.
When navigation is hidden, users are less likely to use navigation.
If people use hidden navigation, they do so later in the task than if it were visible.
Hidden navigationprovides a worse user experience than visible or partially visible navigation does, in both mobile phones and desktop user interfaces. This finding holds true across multiple UX metrics including users’ assessment of task difficulty, time spent on task, and task success.
On desktops, hiding navigation degrades the experience and the navigation discoverability more than it does on the phones.
Hiding the navigation mostly affects content that is not directly accessible through an in-page link.
Why Study Hidden and Visible Navigation
Responsive design has many merits; however, one of its less fortunate effects has been an excessive popularity of mobile-first designs that translate poorly onto larger desktop screens. To be clear, “mobile-first” itself is not the issue. Rather, the issue is taking sufficiently good mobile designs and porting them to desktops where they do not work as well. Mobile-first should not equal mobile-only.
(Obviously, there’s a general principle here: if a design technique is intended to span platforms X and Y, then an uncompromising X-first approach will make Y an afterthought and harm users on Y. As explained in our course on Scaling User Interfaces, to design for X and Y, you need to consider the strengths and needs of both and adapt the two versions of the website accordingly.)
Hidden navigation, such as the hamburger menu, is one of the many patterns inspired by mobile designs. Screen space is a precious commodity on mobile. To meet the challenge of prioritizing content while still making navigation (and other chrome) accessible, designers commonly rely on hiding the navigation under a menu — often indicated by the infamous hamburger icon. Like a cheap fast food chain, it got designers addicted to its convenience, and now serves millions each day, both on mobile devices and on desktops.
While our qualitative user testing has repeatedly shown that navigation hidden under a drop-down menu is less discoverable on the desktop, we wanted to measure the size of this effect in a quantitative study and assess the relative impact of hidden navigation on the desktop versus mobile. To do so, we partnered with WhatUsersDo (a company specializing in remote usability testing) to run a study with 179 participants who completed tasks on 6 different sites, both on smartphones and desktops. The results of this large study are reported in this article. An additional article includes our detailed research methodology and images of the menus tested.
Measures: Navigation Usage, Content Discoverability, Time, Task Difficulty
To determine the effectiveness and usability of the different menus, we ran usability tests on the desktop and mobile versions of 6 different live websites with different types of navigation designs. Here are the types of navigation that we considered:
Hidden navigation: the main navigation links were placed under an icon (such as the hamburger) or button and required an explicit user action to be displayed.
Visible navigation: the main navigation links were shown in a visible navigation bar and could thus be seen by a simple glance without needing any prior action.
Combo navigation: some of the main navigation links were visible and some were hidden under a menu.
Note that, for mobile devices, we did not fully test the visible-navigation condition. (Visible navigation is less common on mobile devices, and, due to other constraints in our study, we were not able to include this condition.) We tested the hidden and combo navigation conditions on mobile.
We wrote 2 simple tasks for each website. Some tasks could be completed without the use of the general site navigation, while other tasks required the use of navigation (or search). Here’s an example of a task: “Go to http://www.bbc.com and see if there is any information on nature or wildlife you are interested in. Once you find a particular article that is interesting, please say which one it is.”
To measure the effectiveness of these designs, we collected 5 metrics:
Navigation use: whether participants used the navigation links at all
Time to navigation: the time from the beginning of the task until the first use of the navigation in that task
Task difficulty: participants’ assessment of task difficulty
Content discoverability: whether participants were able to discover the content on the site
Task time: the time it took people to complete the tasks
The first 2 metrics are related to navigation usage, while the last three refer to the quality of the user experience.
(More on different types of UX metrics and how to collect and analyze them in our full-day course Measuring User Experience.)
Navigation Usage: Hidden Navigation Used Less and Later in the Task
To quantify the navigation usage, we looked at (1) navigation use: whether navigation was used during a task; and (2) time to navigation: the time from the beginning of the task until the moment when the navigation was used. (We only counted time to navigation if the navigation was used.)
These metrics tell us whether the navigation is helpful and also whether it is easy to discover. If the navigation is salient, you’d expect it to be used more and sooner than if it was hard to discover.
Our tasks did not direct participants to use the navigation, search, page links, or any other interface features. Rather, people could use whatever they wanted in the interface to do the task. We assumed that if navigation is visible and seems helpful to users, they will click it; if not, they will try other things. Thus, we recognize that not clicking a menu can simply reflect that users perceived something else to be a better choice, and not that they did not notice or recognize the menu.
For example, on certain pages and tasks, an in-line link may have high information scent — think of looking for a movie on a newspaper site: if the first headline that you see on the page is exactly about that movie, chances are that you’ll pick it without using navigation or search.
Our results indicate that, across both these measures, hidden navigation was significantly less discoverable than visible or combination navigation:
Both on mobile and on desktop, people were significantly more likely to use the navigation when all or some of the navigation options were visible (that is, in the visible and combo conditions).
Navigation usage as a function of device type (desktop, mobile) and navigation type (visible, hidden, combo) (We did not test sites with only visible navigation on phones.)
On desktop, people used the hidden menus only in 27% of the cases, while they used visible or combo navigation almost twice as much: in 48% and 50% of the cases, respectively.
On mobile people used the hidden navigation in 57% of the cases, and the combo navigation in 86% of the cases — 1.5 times more.
We ran a mixed-effects logistic regression and found that these differences were statistically significant. This result is not surprising: when (all or some of) the navigation options are visible, they are more salient to users. If nothing else, the screen footprint of visible or combo navigation is larger than that of a menu represented by just an icon or a label, so people will notice it more.
2.People were significantly more likely to use the navigation (whether hidden or partially visible) on mobile than on desktop.
There are many potential explanations for this finding:
Navigation on mobile (whether hidden under a menu or partially visible) takes a larger proportion of the screen space than on the desktop, simply because the screen is smaller. Thus, people are more likely to notice it and use it. Indeed, on the desktop we witnessed many sessions where people did not even see the menu icon. Some test participants even said that the sites with hidden navigation didn’t have a menu.
Because hidden navigation is more common on mobile than on desktop, people may be more familiar with it and more likely to think of using it.
Mobile pages tend to require more scrolling, have less content visible above the fold, and sometimes be slower to load, so people may resort to using a menu instead of looking on the page and exploring whether there is any content that matches their interest. On the desktop, page-load speeds are high and the larger screen offers a better preview of the content of the page. (In other words, the interaction cost of accessing a desired piece of information is higher on mobile than on the desktop.)
Typing is harder and more error prone on mobile, and people may be more likely to prefer navigation instead of searching, when the navigation is available.
On both desktop and mobile, when the navigation was hidden, it took participants longer to use it than when it was visible or partly visible. Our mixed-effects generalized model showed that this result was marginally significant (p <0.1).
On the desktop, it took participants 5–7 seconds more to use the navigation when it was hidden. On mobile, that difference was smaller (about 2 seconds). (We did not test sites with only visible navigation on phones.)
Although the numbers seem to indicate a device effect (that is, that participants were faster to use the hidden navigation on mobile than on desktop) or an interaction (that is, that the impact of hidden navigation was higher on desktop than on mobile), these effects were not statistically significant.
An additional few seconds spent may seem petty, and we agree that it will not be the difference between a fine and a terrible user experience. But in those few moments the user may begin to experience frustration and self-doubt. Add on a few more seconds and the user may abandon the task, or at least the menu.
Hidden Navigation Leads to Worse User Experience
The other 3 metrics that we collected focused on the quality of the user experience:
Content discoverability. Our tasks were fairly simple and gave users a fair amount of freedom (e.g., “Find a technology article that interests you”), so people were actually able to complete them most of the time. However, given the focus of our study, we used a more nuanced measure of success (content discoverability) that took into account not only whether people completed the task, but also how they completed it. Thus, content discoverability measured whether users were able to find the content they were looking for by using navigation (and not search) in those cases when the content wasn’t directly linked from the homepage.
Task-difficulty rating. At the end of each task, we asked participants to rate how easy or difficult the task was on a scale from 1 to 7, with 1 being easy and 7 being difficult. The task difficulty is a subjectivemetric; it measures users’ self-reported assessment of the task. It usually reflects their overall experience in using the site, so a high estimated difficulty rating will indirectly indicate actual difficulty in locating the navigation and navigating through the site.
Time on task. This metric represented the time it took participants to complete the task, whether successfully or not. A menu can add or decrease task time, if it is easy or difficult to find, open, or use, so longer task times also reflect the added interaction cost due to a less usable navigation.
Our findings show that, across all 3 different metrics, hidden navigation significantly decreases user experience both on mobile and on desktop.
1.Both on mobile and desktop, the content discoverability was significantly lower when the navigation was hidden. This measure showed a more than 20% drop in discoverability on sites with hidden navigation, compared with sites with visible or combo navigation. In other words, visible or combo navigation made people more likely to complete the task successfully and without relying on search.
The content discoverability for hidden navigation was lower than for other types of navigation for both mobile and desktop. (We did not test sites with only visible navigation on phones.) Although content discoverability on mobile tended to be slightly higher than on desktop, this difference was not statistically significant.
Hidden navigation led to significantly higher difficulty ratings than visible or combo navigation:the difficulty rating showed a 21% increase in the hidden-navigation condition compared to visible, and 11% increase when compared to combo navigation. This result is consistent with our other findings and strengthened the conclusion that hiding navigation makes it harder for users to complete their tasks. Visible navigation was ranked as least difficult, most likely because it was easy to discover and users could immediately scan the navigation options and select one of them. The other navigation types hide navigation options and increase the interaction cost.
Task difficulty, as rated by users, saw a 21% increase in the hidden navigation condition, compared to the visible navigation condition. The increase over the combination condition was only 11%. (These numbers represent aggregated data over both mobile and desktop.) In this chart, lower numbers indicate a better user experience.
Users took significantly longer to complete tasks on sites with hidden navigation than they did on sites with visible or combo navigation on both desktop and mobile.
On the desktop, people were at least 39% slower when the navigation was hidden (compared with the visible or combo conditions).
On mobile people were 15% slower when the navigation was hidden (compared with the combo condition).
Average task times were higher for the hidden-navigation condition both on mobile and on desktop (We did not test sites with only visible navigation on phones.)
Differences Between the Desktop and Mobile User Experience
In the first section of this article, we reported that mobile users were significantly more likely to use the navigation than desktop users (see Figure 1). Here we discuss desktop–mobile differences related to the user-experience metrics.
1.Hidden navigation is more likely to reduce content discoverability on desktop than on mobile. In other words, when users had to discover content that required the use of navigation, they were more likely to fail on the desktop than on mobile. Moreover, the drop in success was greater when the navigation was hidden. This result can also be explained by desktop users’ increased propensity to use search: search is more salient (most of the time) on desktop and users may be more inclined to use it when a path to the content is not immediately apparent.
2.Desktop users were faster than mobile users (when combining all types of navigation) On average, mobile users took 12% more time to complete the tasks. This result is not surprising: due to the small screen and the narrow communication channel between the user and the device, getting the same content on mobile usually requires more interaction.
Why Hidden Navigation Is Less Effective
Why does hidden navigation have these effects? Throughout the article, we hinted at several answers:
Low salience: A small icon is harder to notice on a large screen size (and even on a smaller mobile one).
Low information scent: The menu icon or label doesn’t usually tell people what’s inside it, so they have no idea if they’ll find what they need by clicking on it.
Extra work: To figure out what’s inside the menu, people must expand it. That increases the interaction cost for users and makes them less likely to do it, or, if they do it, they may take longer.
Lack of standards: Hidden navigation is implemented in different ways by different sites. Some sites use it, some don’t. On mobile, patterns are starting to form, but on desktop there is a lot of variability and inconsistency in the placement and the labeling of hidden navigation.
Low familiarity: Especially on desktops, hiding navigation is not a common pattern and people may not expect to find global navigation under an expandable menu. Some people may also still be unfamiliar with the hamburger icon that is frequently used for such menus. This low familiarity is exacerbated by the lack of standards which reduce long-term learnability (as further discussed in our course on The Human Mind and Usability, learning is facilitated by repeated exposure to the same pattern.)
Of these 5 points against hidden navigation, only the last one might decline in future years. Hypothetically, increased design standardization could also occur (which would also increase familiarity), but our experience observing the web design evolve over the decades doesn’t make us optimistic that strong design standards will emerge anytime soon. The 3 biggest points of low salience, low information scent, and extra work will always be a curse on hidden navigation that will reduce its usability.
Navigation Recommendations
What are the takeaways of this research for your next design project?
Desktop: There is plenty of screen real estate for displaying navigation options, and we recommend:
Do not use hidden navigation (such as hamburger icons) in desktop user interfaces.
Instead display the top-level navigation options, usually across the top of the page or down the left side.
Mobile: For phones, there is no hard-and-fast rule. But our general recommendations are:
If your site has 4 or fewer top-level navigation links, display them as visible links.
If your site has more than 4 top-level navigation links, the only reasonable solution is to hide some of these. We did find that the usability penalty imposed by hidden navigation is very present on mobile, but it is smaller than on the desktop. Thus, we recommend making this design tradeoff because the usability of an expandable navigation menu is far better than that of alternative designs.
Provide in-page links to important information on your site, or use other methods of supporting the hamburger (or some other hidden) menu.
If you’re learning web design from zero and want to significantly improve your typography chops, then this article is written for you. We will cover typefaces, fonts, typographic anatomy, hierarchy and how to choose typefaces. You will learn enough to become dangerous in no time.
Topics
As is usual for these comprehensive guides, we’ll be covering a significant amount, including:
The famous 95%
Typefaces vs. fonts
Typographic Classifications
Typographic Anatomy
Spacings
Punctuations
Hierarchy
Choosing Typefaces
The Famous 95%
Web design is 95% typography! There is no web design without type. So why not improve your web design skills by applying solid typography? There is a rich world full of letters to explore, a world which has been handed down by generations of creative people working with graphic and type design. Another amazing rabbit hole to dive into.
In the early days of web design it tried to follow ideas of graphic design, especially how books, magazines and newspapers were laid out and designed. These days, designing for the web has matured and does not follow these concepts as closely as it once did. Responsive web design is one example where design clearly matured beyond the print world in many, many ways. The flip side is that this also led to more complexity—something which seems to be ever-increasing. Far from being threatening, this is very exciting and the possibilities are not only growing, but the options today are already vast and cool. The web has grown up—quite a bit—and the future seems bright!
Communication
Type is more effective than anything else when conveying your message on the web. Sure, graphics can support and enhance it, icons too, but communicating to your users happens mostly via the written word—in contrast to the advertising world, where images and graphics can convey whole stories a lot easier, even without using much written language at all.
On the web, we are talking about pages, websites, and most of all interfaces. Dealing with mostly graphical elements for these has proved difficult, often ineffective, ambiguous and not fit for the mass market.
This example from Dropbox shows that the graphics alone don’t achieve the same level of communication and when alone are ambiguous at best.
Typefaces vs. Fonts
“Typefaces” are collections of letters, numbers and punctuation marks that form sets of styles for an alphabet. Think of typefaces as being a family of type whose members share common design choices but can vary in weight and styles. Bodoni or Gotham, for example, are typefaces.
“Fonts” are considered to be a subset of a typeface. They are the physical (or digital) character sets of a particular typeface in one particular weight and style. Open Sans Light is a font; a file you use on your system.
The subject of classification for typefaces is much vaster than one might think at first—especially the subclassifications. The essentials to start out with are quick to get a grip on though, let’s look at a few classifications that you absolutely need to know.
Serif Typefaces
Serif typefaces are named after the little extensions, decorative details, at the end of some strokes: serifs.
Serif typefaces are the oldest we will discuss in this article. This isn’t an exact science but arguments can be made that they go back as early as Romans carving letters into stones, using the Latin alphabet. There is also one interesting theory that says that they are a result of using chisels when carving stones and were an artistic choice due to the tools used to create a better end result.
Serifs are often used for longer pieces of text like body copy. The evidence on their being “easier to read” is inconclusive, nevertheless, this argument often comes up. They work well in an old school and classic environment, but can equally work well in a modern setting if used properly.
Serifs are nevertheless an excellent choice for headers as well. The headers used by The Washington Post are a perfect example of using a serif to convey a certain style of tradition and quality, while the sans-serif body copy makes it look modern whilst remaining highly readable.
Sans serifs rose to popularity in the 1920’s. They were designed to look modern, industrial and machine-made; ideal for the advertising industry and the Art Deco movement of the time.
In the past, they were often used for typewriters to make sure enough contrast was created on the page. In the early days, typewriters had a harder time displaying printing letters consistently on a page; doing so was dependant on the pressure and the freshness of the ink and such. A slimmer serif was less effective for machine typesetting. The early advertising industry also needed something new and attention-grabbing, so made heavy use of slabs.
“Script” typefaces often emulate the look of hand-written text, imitating varying thickness and fluidity. Their appearance is more casual and informal, often giving the feel of something hand-crafted and personal. Scripts are typically very decorative and rarely used for longer paragraphs of text (hopefully).
As the name suggests, each letter and punctuation character of “monospace” type occupies the same horizontal width. The other typefaces we’ve covered so far all have characters of variable widths; these are known as proportional typefaces.
Typewriters, early computers, and terminals heavily used monospaced type. Hardware of the time did not accommodate the needs for the variable widths of other type families. Today’s text editors for writing code still offer monospaced fonts by default. Nothing speaks “hacker” more clearly than code written in monospace. In the last few years it has also become a lot more popular among designers.
Now let’s go over some of the most important anatomic features of type.
We won’t worry too much about the minutiae here, your job as a designer is to get creative with the typefaces themselves, not recite every tiny detail of how they are composed. It’s all about what you do, what you achieve when you put typefaces to “work”. So my advice is simple, understand and memorize the basics, have fun, play around with the typefaces and soak it in over time. There is nothing wrong with not knowing every single detail about type anatomy! On the other hand, maybe I’m overly pragmatic about this. You decide!
The median on the other hand is the ceiling for most lowercase letters.
X-Height
The space between the baseline and the median is what we call the x-height. This can be seen as being equal to the height of the lowercase letter “x”, hence its name. The greater the x-height a typeface offers, the more readable it will be at lower sizes. Most of the text we read in the western world is comprised of lowercase letters, and as most of the distinctive characteristics which allow us to recognize letters and, therefore, words, can be found in this region, x-height heavily influences readability.
This extra space gives a font a bit more opportunity to let its character shine through. We tend to read in jumps and consume letters quickly and subconsciously. So more x-height is good for body copy because long paragraphs of text can get tiresome if the eyes have to work harder to decipher the alphabet. Sections like titles where you will generally use larger font sizes and shorter amounts of text anyway, can get away with less than optimal x-heights. You have more room for artistic choices that imply a certain mood or character without affecting the reading experience of your users too badly.
Ascender and Descender
The ascender is that part that stretches above the median, whereas the descender is the part of a character which extends below the baseline:
Counters are areas that are partially or fully enclosed. Think of an “o” or an “a”. The “a” for example has two counters: one that is partially, and one that is fully enclosed. Typefaces with larger counters are usually also good for readability because the details have more room to be explicitly shown. So look for typefaces with large x-heights and larger counters if you are interested in giving users a good reading experience.
Spacings
Let’s now examine a few different types of spacing when dealing with typography.
Line Height
Line height is the space between two consequent baselines. In print, it’s very important to create a consistent vertical rhythm—the baseline grid—a mini grid system for type on a page. On the web, this kind of precision is notoriously difficult to achieve.
Responsive environments make applying baseline grids even less appealing, so arguably your time might be better invested in more pragmatic matters.
A good line height for paragraphs on the web usually lies between 1.3–1.6 (which is proportional to the font size). Titles can and should be a bit tighter. A good benchmark to keep in mind is that readers should be able to jump to the start of the next line easily. You don’t want to burden users with some sort of mental overhead, needing to look concentrate as to where they should continue to read when they reach the end of a line of text.
Varying degrees of line height can also (bizarrely) impact the color of your text. Tighter line heights appear darker since the micro whitespace between lines of text is reduced—and vice versa of course. Finding a balance so that text that looks coherent, light and readable is your goal while adjusting this spacing. Read the text, use real text not dummy ipsum and see how it feels. Is it a good reading experience? This should be at the forefront of your mind—always!
Line Length / Measure
Both these terms mean the same thing: the number of characters on a single line of text. A good measure for designs on the web lies between 60–85 characters. Line length and line height are somewhat symbiotic and depend on each other. The more line length a paragraph needs, the more line height should be incorporated.
If it looks too cramped or too stretchy, adjust it until it’s readable and “feels” right.
Kerning
Kerning referred to adjusting the varying micro whitespace between individual letters. This is differently conceived by every type design, complying with the needs of each letter. A lowercase “o” might occupy less space than a lowercase “t’ for example. On the web this is tedious to adjust while the practice of kerning is very prevalent in the print industry.
On the web it is possible to apply kerning by relying on the data baked into the fonts themselves. This is a feature which can be triggered with the CSS text-rendering or font-feature-settings properties. Bear in mind that support is far from widespread at this point.
Letter Spacing / Tracking
This refers to the consistent spacing between all of the letters in a group. It does not target individual letters like kerning, but is instead a uniform adjustment that spans across the entire affected text passage, resulting in more or less density and texture.
When you use larger pieces of text, for titles for example, a little bit of negative letter spacing can go a long way. You don’t want to create the impression that the text is drifting apart. As with kerning, when typefaces are designed to be consumed at smaller font sizes, the letter spacing might need these little nudges since the original kerning was considered differently.
Punctuation
Quotation Marks
Use real quotes. Period!
The other “quotes” that are often used are actually straight quotes—which should be used for inches and feet. Apostrophes and single quotes also have their real counterpart. Yes, you need to do some finger kung-fu on your keyboard to get them, but the end result is worth the effort. Read more:
An ellipsis refers to the three dots that can easily be mistaken as three single periods. The difference is that they have more spacing between each period. You can use extra space to the left and right, it’s up to you to decide.
Use this when you want to omit content—words, phrases,lines, paragraphs or parts of quotes. It’s a placeholder to indicate that you left out some text.
Hyphen
There is no need for extra spaces around hyphens. Their main purpose is to link words together, like fine-art, 8-year-old and such.
They are your only choice for prefixes and suffixes as well. You should also use them if you need spell out a word: T-U-T-S-P-L-U-S. Spanning time and distance is also part of their repository:
03:45-04:00 p.m.
1938-1945
For these ranges you can also use the en dash.
En Dash
The en dash takes its name from the length of the lower-case letter “n”. It is a little bit longer than a hyphen and is used for ranges of values as well as for implying relationships like master–student. Or for emphasis.
Em Dash
The em dash is again a little bit longer, the size of the upper-case letter “m”. They should be used to emphasise a pause of thought and indicate that a sentence is unfinished. Both dashes can appear a little bit thinner than a hyphen—usually. Please don’t use two hyphens in cases where en or em dashes are more suited. Neither version of dashes requires an extra space around it.
I know, these punctuation details don’t sound all too dashing, but this basic knowledge of how to use them properly should be important for you if you like designing with good typography in mind. It also might seem trivial to have three sorts of dashes you can choose from because they look really similar, but on the other hand, a lot of care and consideration has been poured into these over the years and we should respect the work of designers who came long before us. It is their hard work and pioneering that makes it so easy to build upon today. Paying attention to these details is a small price to pay for standing on the shoulders of giants.
Hierarchy
It is important that you convey a strong hierarchy within your typography. Why? Because as we established at the beginning of this piece, the type on the page make for roughly 95% percent of your design. If you have weak hierarchy within your text, you won’t have a snowball’s chance in hell of creating strong hierarchy in your overall design.
Typography offers you multiple ways to give your users visual anchors to navigate your site the way you want them to. Through emphasis you can let them know what is most important and what they should pay attention to first. Here are a few ways to strengthen your work in that department:
Color
If you don’t have much color on a page, elements which do have color really stand out. As always, less is more. As the examples below only use color sparingly the effect is very strong—even without increasing the size or additional white space.
Increased relative font-size will always draw attention to certain elements. The thing I like about varying font sizes is that you can easily create visual “anchors” the reader can use to jump around on a page. The only caveat is that you really need to be consistent with the use of font sizes for particular elements. You can’t change it up at will all over the place. That would most likely weaken your designs much more than having uniform sized text.
Give important typographical elements room to breath. If they are surrounded by empty space they are emphasised simply by that. Newcomers seem to shy away a bit from using much space between elements. In print this can be costly, but on the web you get this stuff for free. Play around, watch out what other designers come up with and steal on occasion. No magic and no rocket science though. Just a little experience is all you need—eventually you will develop a good gut measure.
An extensive typeface family will give you plenty of weights to choose from. In many of the examples above you can see various weights for different purposes at work. For me, this is not something I jump to right away and usually try the other tools to create hierarchy first. But this is a matter of taste, whatever works best for you and your designs.
In the screenshot from the Dropbox “about” page you can see that the names have a different weight than their titles. A very basic technique for creating emphasis.
Italics
Italics are great for secondary or tertiary information in running text (or emphasis, of course). The example below makes good use of them for displaying an address.
When you choose more than one typeface for your work (best to avoid choosing more than two) it becomes critical that these typefaces themselves create some sort of hierarchy through their contrast. On the one hand they should be easily distinguishable from each other, and on the other hand not too unrelated. There are a few good guidelines for selecting typefaces; the next chapter will bring you up to speed on that one.
Keep in mind that all of the above rules only shine if you use them consistently. If you change things up too much, your hierarchy will be weakened significantly. If all of this is completely new to you, head over to my article about visual design principles to get you up to speed. All of the aforementioned will make a lot more sense after that.
We have tons of typefaces to choose from these days. And not only that, we have tons of services that want to help us with that. It can take a while to get a sense what’s out there actually. But to me, that is entirely a good thing. Web typography has come a long way, not only in terms of the ecosystem, but in terms of what browsers let you do these days.
When deciding which typefaces you want to use, I’d recommend that you first of all focus on the readability and style that you want to convey in your designs. The tone and the message are also important since type has a huge influence on this through its various characteristics. If you can manage to do all that, you will set yourself apart from the rest of the herd pretty significantly.
Advertisement
Pairing Typefaces
Make sure that you create good contrast between the paired choices. Typefaces that look too similar can end up looking confusing and affect your visual hierarchy negatively. Bigger typeface families also have the benefit of having tons of options to vary the one example. That way you can only use one typeface without looking boring.
If you want to go further than that then pairing a sans serif with a serif typeface is the best place to start—the most reasonable actually. This can lead to a stronger and more interesting contrast that you can use to your advantage—stylistically.
Use your choices consistently. Avoid switching the typefaces for body copy and headers all over the place. Decide which one is best for readability and which one is best for conveying a style, while grabbing the readers attention, and stick to that.
Some type designers have created serif and sans serif versions of the same typeface. These are supposed to work together neatly. When your typeface has a matching sibling you might find a fitting contrast baked in from the start.
If you pair two typefaces, aim for strong visual differences between the two. Keep it subtle if you want, but it should be at least noticeable—even to the fast eye. In that regard, pairing two sans serifs or two serifs can be tricky.
While you look for visual distinctions, you also want to watch out for some sort of common trait. Something that can bind the two different typefaces together. Their visual structure, the way their letters are designed could share common ideas. Similar counters and similar skeletons of their overall letters, for example. That ties them together even more skilfully. A similar structure or geometric design will help with that for sure.
On occasion, steal! When you find combinations that you like, try them out yourself and see what you can do with them. Learning through imitating the work of others is fine.
Final Thoughts
Typography lacks hard laws to guide your decisions. To me that is a good thing. In many regards, typography is subjective, but readability might be the one constant you should always focus on first and foremost. Take all the ideas and concepts we’ve covered with a grain of salt and see them as starting points for your own creative explorations.
There is a lot of room to infuse the web with better typography. It is such a great tool to enhance communication and I feel it is culturally precious knowledge that was handed down to us over many generations of hard work and exploration. It’s fantastic how you can influence the tone of written language with it.
