UI Components / Typography

The following patterns have been developed to be both fully-extensible and provide the best possible rendering & copy flow in the largest number of contexts possible.

The class selectors defined below require the inclusion of Crossroad's custom library of web-fonts. Click here to learn more about including web-fonts in your project.

By default, all elements will inherit the base font-family Acumin Pro.

As long as you're loading Typekit properly, you shouldn't need to do anything to see this typeface rendering in your application. However, you can selectively apply the .font-family-base selector if you run into any trouble.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

For the lightest possible weight, the .font-family-base-light selector will render the following...

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

When you need to provide emphasis with bolder text, you can apply the .font-family-base-bold selector...

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Condensed fonts can be useful when trying to fit large amount of text into a small space. Use the .font-family-condensed selector to yield the following style output...

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Sometimes, you need even more condensing. We've got you covered with .font-family-condensed-extra selector.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Sometimes in life, you just need a serif. You can use the .font-family-accent selector to depart from the traditional sans-serif typefaces described above.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890