12 Beautiful Examples of Web Typography
Varying screen sizes makes designing web typography uniquely challenging. These sites do it wonderfully, in no particular order.
TypeTerms
Supremo does a superb job of presenting beautiful typography in an interactive educational experience. If typography is overwhelming for you, we recommend starting with this gorgeous overview of structural terms. Even if you’re a veteran type designer, you may even learn a thing or two, like:
“Serif” comes from the Dutch word “schreef” meaning “line”.
Fun for the whole family!
The Next Rembrandt
This award winning site by J. Walter Thompson, Amsterdam and Superhero Cheesecake exemplifies the masterful combination of interaction and design, using typography as a primary vehicle.
Impressively, visual hierarchy is mainly defined via typography by using only two typefaces, Garamond (serif) and Gotham (sans-serif). Through a variety of finely tailored animation transitions between pages and individual elements from headers to numerical systems, the designers are able to maintain the high degree of elegance and simplicity necessary for the subject matter.
“We use technology and data like Rembrandt used his paints and his brushes to create something new.” — Ron Augustus, Director SMB Markets, Microsoft
The tech is also pretty cool, but what I’d really like to see is a Facebook profile photo generator :)
Jam3
Jam3 is “a design and experience studio” that takes typography beyond 2D. Their client work itself is truly inspirational, but their own website is a example of a perfect integration of typography on the interactive medium of the web.
Animations are expertly executed in their almost invisible role as user guides, indicating subtle anticipations of site behavior. Distinctive type treatments gracefully guide users through the site with the additional help of bespoke iconography that seamlessly correlates with the navigation.
The result of this high attention to detail is that the content itself (the most important thing for a user to consume) is elevated to its highest possible form.
“Aesthetic decisions are always grounded in real human needs and interactions.”
Almost makes me want to move to Toronto ❤
FOUR32C
I have always admired the boldness and simplicity of FOUR32C’s website, especially the sitemap. The impact of simplicity is universally well-known and as shown here, still highly effective. Don’t mind the fact that there are no serif typefaces anywhere on the site—causing visual context to entirely rely on the use of variations in font weight and abundant use of white space.
This is a brilliant example of a subtractive method where we are afforded a wealth of information about case studies and company culture, without any unnecessary overhead.
In my mind, this approach allows more time for thinking about important things like BBQ recipes and after-work cocktail celebrations :)
A List Apart
A List Apart has been a pillar of the web design community for over TWENTY years. They have always maintained a highly polished editorial design style, putting typography first (or at least a close second to the illustrations!)
I’m not sure what more can be said about this beloved establishment and their unwavering dedication to quality content and design, other than that joining the ranks of A List Apart authors is akin to “making it” for a web designer.
“You keep it by giving it away.” — Jeffrey Zeldman
With regard to their latest website design iteration, I’ll say honestly that I thought my screen was broken at first glance from the oversized logo bleeding off the top of the screen. In any other case I might have taken to Twitter to figuratively throw my computer out the window but in this case, I entirely blame myself on the sole basis of my respect for their contribution to the advancement of the industry.
Looking more closely at the design details, you will find an extraordinary attention to the details that define the medium of the web (e.g., accessibility, usability, progressively enhanced multi-device and multi-platform support, etc.)
A List Apart incorporates much of what is either overlooked or forgotten by today’s designers. Emphasizing function over form, and bucking trends that exclude old browsers and small devices ultimately allows ALA to reach the broadest audience and communicate that which matters most — CONTENT.
Thank you to Jeffrey Zeldman and everyone who has contributed to our collective career advancement by ceaselessly producing incredible content year over year!
Quartz
As an online-only publication, it’s not surprising QZ.com is a pinnacle of functional web-typography. To an obsessive degree, typography must be refined for optimal readability since their entire business model depends on readership.
This site will most certainly fall on the side of function over form but I truly don’t relegate this application as beauty being in the eye of the beholder. There is an absolutely inspirational quality to that which is refined to the highest form of its purpose—in this case, typography, fulfilling it’s original duty: being read.
Work & Co.
Work & Co. is definitely in the top three of this list. I know this post is about typography but they have such a notable navigation system it needs to be mentioned. Though, to a degree, the navigation interface aligns with my thinking about typography in that it is best suited to ferrying information in the least intrusive way possible. That said, Work & Co.’s nav is pushing the boundaries by being so hidden, it’s almost an Easter egg. As you’ll notice—there’s actually NO navigation (you probably didn’t even notice, which is exactly the point.)
The thinking here probably goes something like this: where would a user typically look for navigation links? Answer: top left, near the logo.
Go ahead, head over to the logo and click. I’ll wait.
BOOM. WHAT?
Definitely did not see that coming. But then again that’s intentional.
This inextricably linked identity of bold innovation and bold graphic and typographic treatment throughout allows Work & Co. to employ dramatic departures from typical agency website designs.
Upon further inspection, you will notice that after scrolling down any page on the site, the logo will flip to reveal the “menu” link behind it. I like to think this was strategically done to force more people to scroll down the page first. Readers don’t even have the chance to get distracted by instinctively scanning through the standard F-pattern header nav link items (because there are none.)
The most notably unique page with regard to typography is Facts (shown in the initial screenshot), which leverages dramatically disparate treatments in type size and color contrast to convey the significance of each statistic.
In addition to each case study page feeling hand-crafted, Work & Co. shows what happens when explosive creativity and technical talent can do together.
“Founded in 2013 by a cabal of ex-partners from Huge” — Fast Company
It should be no surprise that they have grown at a fantastic rate (190+ employees in five years!)
Google Web Fonts
Google Web Fonts is simply a joy to use.
I’m not sure if it’s the departure from Google’s omnipresent and increasingly tired material design style, or if it’s just seeing those beautiful fonts in all their glory.
Creating a typographic system for a product that itself highlights other typographic systems, presents quite a peculiar challenge. The strict use of high-contrast red assists in providing visual queues as to which part of the site is interactive vs which part of the site is just on display. The interface otherwise fades into the background and lets the font itself stand on display.
Lastly, as its most distinctive yet subtle design feature, harkening to the highly technical nature of type design, each page feels like it belongs in a manual, almost begging to be printed. It’s as if one could archive every single page into one single, majestic, master reference, proudly shelved next to any respectable designer’s NASA Graphic Standards Manual.
Huge, Inc.
Huge has created one of the most distinctive visual brands in the digital ad industry. On top of that, they follow a few traditional rules of engagement in designing for reading on the web:
- Notable font-size and weight differences
- Obvious link colors and intuitively clickable elements
- Serif body copy
- Muted tones with yet sufficient tonal contrast
Huge is well known for their work in accessibility and this shows in literally every page on their site. From their easily spotted, in-your-face, Avant Garde logotype, to the abbreviated, sarcastic, hipster-culture inspired copy, they communicate heavily through well-refined typographic treatment and copy.
The growth of Huge over the last decade has been a testament to the importance of prioritizing design as a digitally-born company. In fact, several of us are proud to have spent part of our career at Huge and can attest to the quality of work their culture produces.
They also have a fantastic Medium account which you should check out now.
Veinti Dos Grados
This is a stunning example of visual innovation with typography at the heart. Striking color contrasts with a fresh take on parallax via color-masking over type, make an immediate impression. The ambient background animations and async page transitions also produce a nicely distinctive experience.
Despite the somewhat cryptic navigation structure, abusive scroll-jacking, confusing lack of color+link association, and overt Breaking-Bad motif, the site actually looks visually fantastic on every device.
Also impressive are the case study pages. These finally allow the user to freely scroll while still incorporating buttery-smooth parallax animations that maintain context and provide interesting visual differentiation in a sea of companies competing to showcase similar work …like ours :)
Moment Design
The team at Moment Design has been an inspirational force in the product and experience design community for decades, creating innovative work for clients including:
As you can tell, color and typography play a central role on their website. They have challenged themselves (and succeeded!) at utilizing a wide variety of type treatments including both serif and sans serif, varying font weights, all-caps, and color coding.
The result is a friendly, cohesive experience. In the hands of lesser skilled designers, adding color to the mix could easily induce chaos. However color coordination here is executed wonderfully and actually plays a vital role in bringing the site to life.
While they have recently announced their acquisition by Verizon, you may stay up to date with the team by following them here on Medium:
- John Payne, Co-Founder and Managing
- Brendan Reynolds, CEO
- Alexa Curtis, Managing Director
- John Devanney, Managing Director
- Shannon O’Brien, Managing Director
Jenny Johannesson
As award winning sites go, Jenny Johannesson has created an exemplary depiction of precision and style. From her colorful, signature typeface, to a nearly surgical application of responsive design that extends to *gasp* user empathy, Jenny runs the gamut of overt boldness and subtle thoughtfulness and character.
Jenny injects humor with helpful information as seen here when desktop users shrink their screens. The message here does double-duty in preventing a touch-centric (i.e., phone) interface from being presented to a mouse-centric (i.e., desktop) user. The messaging is both light-hearted and helpful without coming across as impersonal and systematic.
I hope this list has been informative and entertaining. Please comment if you have any other sites we should take note of!
Author: Dennis Plucinik,
Founder, ATTCK
About ATTCK: We’re an NYC-based digital agency that specializes in web and native app design and development. We work with companies of all sizes. If you’re looking for an agency to work with, give us a call at (917) 725–0044 or email us at hello@attck.com.
