Jump to content

MCA Web Fonts

The MCA website employs the MCA typeface designed by Karl Nawrot.

Notes

CSS Variables

CSS variables are used to define font stacks:

  1. --MCA10: 'mca_u_v.110u', Arial, Helvetica, sans-serif;
  2. --MCA02: 'mca_u_v.102u_1', 'mca_u_v.110u', Arial, Helvetica, sans-serif;
  3. --MCA03: 'mca_u_v.103u_1.5', 'mca_u_v.110u', Arial, Helvetica, sans-serif;
  4. --MCA04: 'mca_u_v.104u_2', 'mca_u_v.110u', Arial, Helvetica, sans-serif;
  5. --MCA06: 'mca_u_v.106u_3', 'mca_u_v.110u', Arial, Helvetica, sans-serif;
  6. --MCA08: 'mca_u_v.108u_4', 'mca_u_v.110u', Arial, Helvetica, sans-serif;

Some additional versions of the typeface may be accessed via the font-weight and font-style properties.

Most high level typeface concerns are handled in the "basic" CSS file.

Fallbacks

All cuts of the MCA typeface fall back to the Ten Unit Alt "Vinyl" cut before falling back to web safe fonts.

The MCA's web fonts are specifically built to fall back to Arial (x-height), but additional customization (letter-spacing and line-height) is required for an exact match and to satisfy general design & legibility concerns.

References

Additional typeface information may be found in the MCA Identity Style Guide.

Ten Unit Alt (Unsegmented "Vinyl" Cut)

The primary web font used for most body text, the vinyl cut is most legible at all sizes.

Regular

The quick brown fox jumps over the lazy dog.

Italic

There are no oblique or italic forms of the vinyl cut. The browser’s faux style is used for most applications.

The quick brown fox jumps over the lazy dog.

Bold

See Medium Weight segmented Ten Unit.

Ten Unit (Segmented Cut)

The vinyl cut typeface is derived from the segmented Ten Unit typeface which shares a family name with the vinyl cut and can be accessed via the font-weight property.

Regular (font-weight: 500;)

The quick brown fox jumps over the lazy dog.

Italic (font-weight: 500; font-style: italic;)

The quick brown fox jumps over the lazy dog.

Medium (font-weight: 700|bold;)

The Medium weight segmented form is used for vinyl cut bold. This is applied to most headings through.

The quick brown fox jumps over the lazy dog.

Medium Italic (font-weight: 700|bold; font-style: italic;)

The quick brown fox jumps over the lazy dog.

Heavy (font-weight: 800;)

The quick brown fox jumps over the lazy dog.

Heavy Italic (font-weight: 800; font-style: italic;)

The quick brown fox jumps over the lazy dog.

Eight Unit

The quick brown fox jumps over the lazy dog.

Six Unit

The six unit cut is often used for `` document headings on [mcachicago.org]().

The quick brown fox jumps over the lazy dog.

Four Unit

The quick brown fox jumps over the lazy dog.

Three Unit

The quick brown fox jumps over the lazy dog.

Two Unit

The quick brown fox jumps over the lazy dog.

The MCA Store employs this cut of the typeface for the logotype.

MCA STORE