Nice Web Type

Hey, the site looks broken

If you’re reading this, it means Nice Web Type’s CSS (the visual instructions that make this outline look like a website) is not being applied. This can happen for several reasons. If you’re using Internet Explorer 6 or earlier, or some other old browser like AOL, CSS is off by default. If you’re using a modern browser and you’re still seeing this, please email Tim.

Notes

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.

10 comments

Gonzalo González Mora 24 Jul 2009
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.
James 24 Jul 2009
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…
Tim Brown 24 Jul 2009
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 24 Jul 2009
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.
Philippe 24 Jul 2009
The use off text-shadow on the div class="bb"> results in pretty poor glyph display in the latest WebKit nightly builds.
Philippe 24 Jul 2009
I forgot to mention: OS in my previous comment is OS X 10.5.7.
Martijn 26 Jul 2009
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/" 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=" tim="" brown="">Tim</a>
My guess is the system creating “curly”-quotes is a little too greedy.
Gonzalo González Mora 26 Jul 2009
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 2 Aug 2009
This specimen doesn’t work (ie. it doesn’t fetch the fonts) in Konqueror, whereas the previous ones did.
Tim Brown 2 Aug 2009
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, the site looks broken

Notes

Nice Web Type likes Bello Pro and Proxima Nova

What is Nice Web Type Likes?

10 comments

Add your comment