"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 (opens in new tab) 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.
This showcase was originally published in .net magazine (opens in new tab) issue 241.
Like this? Read these!
- Illustrator tutorials (opens in new tab): amazing ideas to try today!
- Great examples of doodle art (opens in new tab)
- Brilliant Wordpress tutorial (opens in new tab) selection
What do you make of this site? Let us know in the comments box below!