You’re reading Nice Web Type likes, a series of CSS @font-face examples and typesetting advice. Follow.
Try Museo and Sans
Here’s a screenshot of how this page looks in Apple’s Safari browser. More about browser support and CSS techniques.
Built with bits from:
You’re reading Nice Web Type likes Bello Pro and Proxima Nova. Both typefaces are available for use on websites from a subscription-based type delivery service called Typekit.
To re-create this example with the same typefaces, sign up for a Typekit plan and follow these steps:
Beautiful, painterly headlines
Script typefaces like Underware’s Bello Pro look gorgeous at display sizes but are not built for extended reading. My inclination is to use an understated sanserif for body text; here, Mark Simonson’s Proxima Nova.
Script for display type, sans for body text. That's a fairly easy call. Mid-size headings, though, are where things get tricky. You have to try stuff and see what looks good.
For example, at first I didn’t think I could use Bello in the h2
s that head these three columns, because the size I have chosen makes it very hard to see Bello’s shapes.
But trial, error, and the will to rethink my assumptions about display type sizing led me to the best available ampersand.
& & & & &
When you’re combining two typefaces, (especially very different ones) stroke thickness can be your ally. Pay attention to the contrast of each face, and adjust your CSS font-size
rules so that thicks and thins throughout the text resonate.
For example, up above, the thin parts of “Beautiful, painterly headlines” are about as thick as the unmodulated strokes of “Chop shop” and “Road warriors.”
When you would rather not adjust size, try playing with the font-weight
and/or color
CSS properties to match stroke widths or affect typographic color. For more on this: Nice Web Type likes Museo and Sans.
As I mentioned, my inclination is to pair fancy display type with body text that is decidedly less fancy.
Proxima Nova is the Clark Kent of sanserif typefaces. Most folks will never know how great it is, sitting right under their noses. Its counters and contrast are great for web resolution, its geometric notes are a refreshing change from the realist sanserifs we web designers are used to, and its hints of humanism jibe well enough with type derived from hand-lettering.
Underware has some beautiful typefaces for body text, including Sauna, which they describe as a typographic mate of Bello. Sauna isn't available (yet?) in Typekit, but meanwhile I’ve found Mark Simonson’s Proxima Nova to be a pleasant alternative.
This type specimen/review makes use of advanced CSS techniques that may not look right in your web browser.
They are supported by at least one popular browser though, and that browser's mojo is advancing our craft faster than you can say, “IE went to Sturgis and all it got was this lousy t-shirt.”
Follow these links to learn more about Safari’s support for CSS gradients, masking, rounded corners, transitions, and multiple background images.
I used several of these techniques, combined, to produce the pure CSS text gradient (no PNGs) you see in the word “Filthy.”
My first impressions of Typekit are, I admit, short on details. Other folks have the details, with screenshots, so go check those out.
What I can tell you is that I made this page using Typekit, and I have made other Nice Web Type likes features without Typekit. My worry was that, as an additional step in my process, referring to a web service like Typekit – in the middle of writing CSS – would be disruptive and complicated. It’s not. It’s easy.
Not only is it easy, it’s a pleasure to flip among apps and find myself at the Typekit interface. If, like me, you carefully select your tools, and your standards for utility and aesthetic harmony sometimes eliminate products and services that your friends seem to love, you will not be disappointed by Typekit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis venenatis orci ut porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi feugiat, libero a aliquam pharetra, velit libero aliquet metus, et condimentum justo arcu ut nisl.
o-Zo