Typography site gets a radically responsive redesign

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.

Colourful links

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.

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

Like this? Read these!

• Illustrator tutorials: amazing ideas to try today!
• Great examples of doodle art
• Brilliant Wordpress tutorial selection

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