@font-face: Type on the Web is a single page responsive website that showcases web typography and different web fonts. @font-face is designed to be informational and demonstrate the ways web fonts can be used. It is built on a set of distinct sections that form a cohesive layout. 


Website Design, HTML/CSS Development, Content Strategy


Personal Project

Built around blocks

@font-face was built around a series of responsive blocks and units that work together to form a single cohesive layout across different devices. The design is informational and is focused on the typography. Each section is rendered with HTML5, CSS3, and web fonts. These blocks include text blocks, sliders, lists, videos, and more.

Sketches and explorations


All live type on @font-face is rendered with web fonts. The primary typeface used in @font-face is Brix Sans, a clean and readable sans-serif typeface- used in headings and body coy. Throughout @font-face, other fonts are used is well, including Source Code Pro, Erato, and Playfair Display. 

Across devices

@font-face is responsive and scales to different sizes – from desktops, laptops, tablets, and mobile devices.