Nice Web Type

Nice Web Type is one place for web typography, following experiments, advancements, and best practices in typesetting web text. Handcrafted by Tim Brown, Type Manager for Adobe Typekit.

Nice Web Type likes Bello Pro and Proxima Nova

Well, I had a blast making my third web type specimen/review for you: Nice Web Type likes Bello and Proxima Nova. Besides seeing a filthy new CSS technique (a pure CSS text gradient – no PNGs), you’ll find my thoughts about (and examples of) mixing script display type with more understated body text, using the best available ampersand, and the latest CSS browser support from Apple’s Safari browser.

You’ll also find my small description of using Typekit as part of the service’s technology preview. I used Typekit fonts to make this example (Bello Pro from Underware and Proxima Nova from Mark Simonson).

If your browser doesn’t support @font-face, you can view this screenshot of the rendered page.

What is Nice Web Type Likes?

Nice Web Type readers know that I have recently called for more thoughtful critique of typeset text on the web. Examining combinations of web type is a good way to start, and “Nice Web Type Likes” is what I’m calling my series of specimens/reviews.

The first specimen/review I published was Nice Web Type likes Graublau Sans with Lucida, and in that post you can read more about why I started Nice Web Type Likes.

  • Gonzalo González Mora

    The specimen looks lovely. I tried it on Firefox 3.5.1 and Safari 4.0.2 (Win) but the anti-aliasing is pretty bad. In Firefox it looks REALLY bad (I use ClearType on) and in Safari it’s ok, but it should be a little lighter (I set it on Light under the font smoothing preferences).

    Another thing I noticed is that the “Filty” heading is chopped at the bottom, weird.

  • Proxima Nova renders okay in FF 3.51 (win) but looks like s**t in Safari 4 (win).

    Additionally descenders on Bello Pro (all pt sizes) are cut off in FF 3.51 (win) and Safari 4 (win).

    Awesome example of TypeKit though, wish it worked better on the windows based browsers…

  • Gonzalo and James: thanks! Regarding the rendering, you may be interested to read what Typophiles think.

    As for the lopped-off descenders (and sometimes more), I heard the Typekit folks are already working on it.

  • mcloki

    Descenders broken in Safari Mac. So Typekit is a no go.
    Typekit is still a work in progress, but it shows promise.
    Keep up the good work. I really like the Nice Web type series.
    Reminiscent of those great type specimin posters of olde.

    If i had time I’d love to try to make one.

  • The use off text-shadow on the div class="bb"> results in pretty poor glyph display in the latest WebKit nightly builds.

  • I forgot to mention: OS in my previous comment is OS X 10.5.7.

  • The descenders (or bottom parts of the lettering) that are cut off can—atleast in my WebKit Nightly—be brought into view by selecting the text.

    When I select the text and the content beneath it WebKit will also select (or at least highlight) the padding/margin in between. When doing this missing parts of the letterforms that should’ve been there in the first place are rendered.

    Far from perfect and I too would wish to see this fixed but it will enable us to see them on the type example by Tim already now.

    On a whole different issue, I noticed when placing the above link that we can’t bind title attributes to links. I wrote the following:
    <a href="http://nicewebtype.com/&quot; title="Tim Brown">Tim Brown</a>
    This was rendered by Firefox (at least in the preview) as:
    <a href="http://nicewebtype.com/%E2%80%9D%20title=&quot; tim="" brown="">Tim</a>
    My guess is the system creating “curly”-quotes is a little too greedy.

  • Gonzalo González Mora

    Thank you very much for your links, Tim. I have really no idea about the technical aspects on creating a typeface and I have some doubts regarding that and the ClearType rendering; I think I will ask them in the Typophile thread.

    Thanks again!

  • Divide

    This specimen doesn’t work (ie. it doesn’t fetch the fonts) in Konqueror, whereas the previous ones did.

  • Philippe, thanks for the heads-up. I’ll have to grab a nightly build and see what you see – I would hate to lose the text-shadow trick.

    Martijn, yikes! This comment form does have a few problems. Eventually I hope to have time to improve it. Meanwhile, sorry for the strange behavior. Thanks for telling me about the problem though – I’ll be able to reference your comment as I code.

    Divide, thanks! I’ll let the Typekit folks know.

  • Hey, just wanted to say I am enjoying the reviews in your series “Nice Web Type Likes.” It takes discussion to improve and grow, and I think you are creating a perfect atmosphere for that!

  • The use of Type kit is really wonderful and the specimen looks fabulous. It is good that you examined the combination of web type from the thoughtful critique. It was really an intelligent idea. Your description on using the Type kit is easy to understand and I am thinking to work more on it for some innovations. I will let you know the updates of my work on it under this thread only.

Twitter: @nicewebtype
Dribbble: timbrown

Combining Typefaces

 

I wrote a small book about combining typefaces. Buy it for less than the cost of a fancy beverage.