A MaxiBestOf font guide
A good font shortlist should help you choose. Start with Source Sans 3 for interfaces, Freight Text for editorial copy, or IvyPresto Display for a heading with some drama. Then try them with your own words.
These are 12 Adobe Fonts we would reach for across different kinds of web design. Each pick has a use note, a pairing to try, and a link to the official specimen. Think of the list as a starting point for your project.
Choose the job before you choose the typeface. Try a quiet font for reading and a more expressive one for a short title.
| Use | Start with |
|---|---|
| Interfaces and navigation | Source Sans 3 or Acumin |
| Sans serif body text | Proxima Nova or Degular |
| Serif body text | Source Serif 4, Freight Text, or Minion 3 |
| Expressive headings | IvyPresto Display, Bely, or Roc Grotesk |
| Formal script accents | Bickham Script |
Start with the body text options, then explore the display and script picks. Open each Adobe specimen to compare its current styles and language support.
Sans serif · Interfaces and body text
Start here when the words need to do most of the work. Source Sans 3 was designed for user interfaces. Try it for navigation, forms, and longer paragraphs. It is a useful first choice for a site with several kinds of content. Give the headings a clear size change if you want more contrast.
Sans serif · Quiet branding and editorial layouts
Try Neue Haas Grotesk when you want a restrained, direct voice. It suits a layout where photography, spacing, and scale carry the character. Adobe offers separate Text and Display families. Use the Text family for paragraphs and small labels. Try Display for larger headings, then compare the two at the sizes you plan to use.
Sans serif · Branding with a softer voice
Degular would be one of our first stops for a brand that should feel approachable. Its shapes add character without asking every heading to become a graphic. Try it across a portfolio, studio site, or product page. The family includes Text and Display versions. Compare those versions in a full layout before you settle on one.
Sans serif · A consistent style across a large site
Acumin is worth trying when you would rather use one family well than keep adding fonts. It has a broad range of weights and widths. Try a regular width for body copy, then a condensed width for a compact heading. Keep the number of styles you load small. A large family is a set of options, not a reason to use them all.
Sans serif · Product pages and everyday reading
Try Proxima Nova when you want a familiar, clean starting point. Its design combines geometric shapes with a less rigid feel. We would start with it for a product page that needs clear headings and comfortable body copy. If the result feels too expected, change the scale and spacing before you reach for another family.
Serif · Articles and longer reading
Source Serif 4 would be our starting point for a publication with a lot to say. It has optical sizes for different text sizes. Try a text style for articles and a display style for headings. Pair it with Source Sans 3 if you want the navigation and reading text to feel related. Start with the paragraph settings, then work outwards.
Serif · Editorial body copy
For a warmer editorial voice, try Freight Text. We would consider it for essays, interviews, or a brand story that needs room to breathe. This is the text member of the Freight family. Keep it on your shortlist for paragraphs, then compare it with a quiet sans serif for navigation. Let the contrast come from their roles and proportions.
Serif · Books, essays, and detailed content
Minion 3 is a good place to start for a traditional reading style. The family has several optical sizes. Try it for a journal, an archive, or an article with notes and captions. We would give it generous line spacing and a controlled line length. Test the italic as well as the regular style if the writing uses frequent emphasis.
Display serif · Large editorial and brand headings
IvyPresto Display is a pick for a heading that should set the mood. Its contrast between thick and thin strokes suits large type. Try it for a magazine cover, a cultural project, or a short brand statement. Pair it with a quieter body font and give the heading space. Use the separate IvyPresto Text family if you want to explore longer reading.
Serif and display · Expressive headings with related text styles
Try Bely when you want a serif with a more assertive personality. The family includes text styles and a separate display style. We would try the display style for a short title, then compare the text styles for the supporting copy. This is a useful route for a small editorial site where the typography should do some of the illustration work.
Sans serif · Bold titles and compact display type
Roc Grotesk would be a good place to play with width. The family includes condensed and wide styles. Try a wide style for a short, emphatic title or a condensed style when the composition needs a taller rhythm. Start with one strong heading. Keep the supporting text calm so the page still has somewhere for the eye to rest.
Script · Invitations and short formal accents
For a formal script, try Bickham Script. It has calligraphic forms and alternate characters. We would use it for an invitation, a short sign-off, or a small part of a brand identity. Give it space and keep the wording brief. Pair it with a simple sans serif for the details. Test the actual names and words before you choose the swashes.
Give each font a role. Try these combinations with a heading, a full paragraph, navigation, and a button. Adjust the size and spacing before you decide whether the pair works.
Publications and content-heavy sites
Try Source Serif 4 for articles and Source Sans 3 for navigation, captions, and controls. Start here if you want the two fonts to feel related. Use size and spacing to make each role clear.
Studios and editorial portfolios
Try a restrained sans serif heading over a warmer serif paragraph. Let the sans serif handle navigation too. Compare the apparent size of both fonts; the same CSS size does not guarantee the same visual size.
Culture, hospitality, and brand stories
Give IvyPresto Display the large headings and let Proxima Nova handle the paragraphs and practical details. Keep the heading copy short. Check that the contrast still works when the layout becomes one column.
Small publications with a strong voice
Try the Bely display style for the title and Source Sans 3 for the supporting text. Keep other decorative choices modest. You can also try Bely text styles when you want to stay within one family.
Posters, events, and campaign pages
Try a strong Roc Grotesk heading with a quieter Freight Text paragraph. Choose the heading width for the composition. Test real event names and dates before you commit to a condensed or wide style.
For more combinations, use our font pairing guide and real website examples.
For a client site, create the web project in the client’s Adobe account. Follow Adobe’s web font setup guide and its client website licensing rules.
We would choose between them based on the typeface and the project’s needs. Adobe Fonts has a free Basic library and a larger library for eligible paid plans. Adobe’s plan table lists the access and app use for each plan.
Google Fonts provides open-source fonts that you can download and host yourself. Try our Google Fonts guide if that fits your project. Compare the actual families, styles, and language support you need.
Adobe renamed Typekit to Adobe Fonts in October 2018. Adobe Fonts is the current name of the service. Older tutorials and some web font URLs still use the Typekit name.
Adobe’s Typekit announcement ↗A free Adobe account includes the Basic font library. Eligible paid plans include the full library. Font access and supported apps depend on your plan. Check Adobe’s current plan table before you choose a subscription.
Adobe Fonts plans and requirements ↗Sign in with the same Adobe account on the Fonts website and in the Creative Cloud desktop app. Add the family on Adobe Fonts. Install it through Creative Cloud if needed, then select it in your app’s font menu. Your plan must support font use in that app.
Add fonts to desktop apps ↗Adobe’s service installs fonts through Creative Cloud for supported desktop use. It does not provide font files for self-hosting. Use Adobe’s web project embed code on a website. For self-hosting, get files with a suitable licence from the foundry or an authorised distributor.
Some families are also available outside the service. For example, Adobe releases Source Sans 3 under an open-source licence.
Adobe web font licensing ↗Adobe Fonts permits personal and commercial work, including logos, under its licence. You can deliver finished artwork with embedded or outlined type. A client who needs to edit the text needs their own font licence. You cannot send the font files with the project.
Adobe font licensing ↗Yes. The client must use their own Adobe subscription for the web project. Add the fonts through that account and use its embed code on the site. Adobe web fonts have no monthly pageview limit.
Adobe’s rules for client websites ↗Subscription fonts stop being available for live text in apps. Websites that use those subscription web fonts fall back to other fonts. Finished PDFs, images, and outlined text can stay in use. To keep editing text with the same fonts, you need a current font licence.
Adobe’s subscription and font licence rules ↗