Skip to main content

Typography site gets a radically responsive redesign

Mark Simonson opener

Type meister Mark Simonson has the website his fonts deserve

Type designer Mark Simonson had maintained his site for over a decade, prior to a responsive web design emphasising his typography design catalogue.

"Mark has a background in graphic design and lettering, but with the success of typefaces like Proxima Nova and the Filmotype series, he needed to showcase his fonts online better," explains Trent Walton, founder of agency Paravel who designed, prototyped and built the site frontend.

To feature the type on the fonts page, transparent specimen PNGs are displayed on top of colourful, rounded-corner links. Home and detail pages take advantage of the nth-of-type() selector to control grid units at various viewports.

"We went with a simple layout to stay out of the letterforms' way," Walton adds. Monochrome image specimens helped keep file sizes low, and the team used Sass and SMACSS guidelines to organise CSS workflow.

Mark Simonson 1

Mark Simonson 2

Mark Simonson 3

This showcase was originally published in .net magazine issue 241.

Like this? Read these!

What do you make of this site? Let us know in the comments box below!