Typography & Spacing Analysis
An evaluation of non-standard fonts, typographic hierarchy, and the effective use of the CSS Box Model in modern interface design.
1. Typography & Fonts
Apple (SF Pro)
Enhances the site. This non-standard custom font is clean, modern, and highly legible even at small sizes. It gives the site a premium, high-end feel that matches their brand.
Vogue (Vogue Serif)
Enhances the site. It mimics the elegant look of a traditional print fashion magazine header, adding an instant feeling of luxury and sophistication.
The New Yorker (Adobe Caslon)
Enhances the site. It looks like a classic literary journal. The distinct serif lettering makes long articles very comfortable to read online.
2. Spacing & The Box Model
Effective: Google
Uses massive amounts of "white space" (padding and margins) around the central search box. This forces the user's focus onto the search bar instantly without any distractions.
Effective: Dropbox
Generous margins between blocks of information give the text room to "breathe," making it easy to understand what the product does as you scroll down.
Ineffective: Wikipedia
Lines of text stretch completely across large screens due to narrow margins, making it difficult for the reader's eyes to track naturally to the next line.