When people are browsing fonts, they need to see summarized details about a type family.

Browsing and filtering through many fonts at once, it's useful to have a glimpse of a family's overall aesthetic, as well as basic information about its features and availability.


Summarize each type family as a family card, to show essential information at a glance.

The shape and size of a family card can change depending on its context and how someone wants to review the families. Family cards in grid view provide lots of visual variety in a small amount of space. Family cards in list view allow more room for each family's sample text, which is helpful for close comparison.

Sketch of family detail view mockup

Each family card should contain a text sample string. The content and presentation of that sample string should reflect any choices the user has made about reviewing the type. Always show the type in black (or dark gray) on a white (or off-white) background.

Each family card should also show the name of the type family, the foundry name, and the number of fonts in the family. This information can be rearranged, but should be present in both grid and list style family cards.

Additionally, information about whether the family is entirely or partly available to use (based on the account of the active, signed-in person) can be included in a small entitlement message.