@font-face: Type on the Web

Role

Website Design
HTML/CSS Development
Content Strategy

For

Personal Project

Demo

Web Typography in Action

@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. 

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 & Explorations

Typography

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.