Mort Modern type specimen site

mort teaser 1

Mort Modern type specimen site

Riley Cran’s Mort Modern type family was his most comprehensive retail typeface release to date. Building on our experience building the Moriston and Escafina type specimen sites, we sought to make the site an even more cohesive piece of the visual identity for the typeface.

The site, alongside the printed Mort Magazine, and a social media campaign, demonstrates some of the possibilities of the typeface, all with a consistent visual voice.

This was noticed both by graphic designers interested, and by web designers and developers in the site itself, all as a way to get them more interested in typography, and this specific typeface. This included designers like Jeffrey Zeldman, Una Kravets, and Kirill Zakharov of Unsplash:

After working on Mort Modern for many months, Riley has understandably shifted his focus to new projects, but the site is still showcasing his hard work to new audiences.

Specimen from the Mort Modern website.

A double-sided site

One of the design elements of the Mort Modern site was a series of double-sided cards that showed a specific details of the typeface on one side, and a more graphic demonstration on the other.

I wanted to translate this same idea to the site, by making (nearly) the entire site flippable. On one side, you get the Mort Modern article, based on the print design for Mort Magazine. On the other, you get the type specimens and interactive tester that show the typeface in use.

Flipping the site on smaller screen sizes.

When there’s enough room on larger screens, we switch to a two-column layout that shows everything at once.

Later on, I open sourced a generic version of the custom React Flipcard component:

This React component imposes as few custom CSS styles as possible, so developers are still free to build conditional layout changes they might want, like the two column down to one flippable column layout the Mort Modern site required.

The dropcaps

Building on the Mort Magazine print design, the article sections are highlighted by dynamic dropcaps that change as you scroll through the article.

One of the dropcap sections, changing as a reader scrolls past the section

OpenType features

The OpenType features in the typeface are highlighted with individual, editable explainer sections, demonstrating the amount of consideration in the typeface, and explaining what those features actually are for graphic designers that may or may not be familiar with them.

The OpenType feature tester for Fractions.