Adobe  I/O Adobe Typekit

Browse fonts

Choosing type for a project is hard when there are many options.

Typekit offers thousands of fonts. Trying to find the right one by browsing through the entire selection is like trying to find a needle in a haystack. Plus, it affords no opportunity to truly learn about type as you browse.

By offering tools for narrowing down the overall selection of fonts, we can make it easier to find type that is good and appropriate. We can also help people refine their sense of typeface qualities that fit certain needs.

Therefore:

Help people choose type by providing a font browsing interface that affords separating typefaces into smaller, logical groups, and offers ways of easily reviewing many typefaces at once.

Sketch

If it makes sense for your style of integration, the highest level of separation is the ability to narrow the scope of available fonts, by collection and browse mode (scope group).

Next, allow people to refine the selection of fonts within a given scope by searching for typefaces (search filter), sorting family cards by different criteria (card sort chooser), and filtering based on a variety of typographic classifications, properties, and glyph support aspects (filter menu).

Give people tools to review scoped and filtered typefaces at a glance. This way, after they have narrowed things down by browsing, they can evaluate a handful of fonts quickly. By modifying the sample text string, as well as resizing and reshaping this sample text, people can better decide which fonts to study in more detail (review group).

As you incorporate these things into the font browsing interface, make sure that the active group of fonts remains the most prominent visual element in the view. Show up to 16 family cards at a time (family card), with grid and list view options. Use pagination with previous/next buttons so people can handle deep selection results in an organized and predictable way.

Grid and list view

When someone selects a typeface, offer more details about it specifically (family detail view).

Finally, including the Adobe Typekit logomark is required.