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.

Now you try: Bello and Proxima Nova

Now that Typekit is no longer invite-only, I’ve released downloadable files for Nice Web Type likes Bello and Proxima Nova. Sign up for Typekit, grab my example files, and go.

Filthy

Instructions for putting it together

Under “Road Warriors”, there’s a step-by-step list of things to do/download. When you’ve gathered everything you need, organize your files like this:

/Bello and Proxima Nova
  /css
    /reset.css
    /960.css
    /text-bello-and-proxima-nova.css
  /images
    /bello-thumb.jpg
    /bike-chrome.jpg
    /red.gif
  /index.html

See that file, text-bello-and-proxima-nova.css? That’s part of our example’s zipped HTML + CSS. Use that instead of the text.css file that comes with 960.gs. Next, make sure your Typekit kit has Proxima Nova assigned to the HTML body element selector and Bello Pro assigned to the h1 and .bello selectors, like this:

Typekit kit with Bello Pro.

Paste your Typekit embed code into index.html, just below the link tags like this:

<link rel="stylesheet" type="text/css" media="all" href="/font…
<link rel="stylesheet" type="text/css" media="all" href="/font…
<link rel="stylesheet" type="text/css" media="all" href="css/t…

<script type="text/javascript" src="http://use.typekit.com/wea…
<script type="text/javascript">try{Typekit.load();}catch(e){}…

That’s all there is to it.

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.

See also

  • Your blog is great.Thx for the nice tips and keep up postings.

  • The headline type looks good. The rendering of the Proxima Nova text is terrible (Windows, Firefox). This is, as Si Daniels put it, the ‘elephant in the room’ that no one is talking about: fonts look different in different browsers and on different platforms, and once one strays beyond well-hinted TrueType the quality can vary immensely. A font that looks good in one browser on one platform may be almost unreadable elsewhere. This is something that would-be web typographers are going to need to anticipate and test.

    The so-called ‘web safe’ fonts like Verdana are safe not only in being installed on almost all computers, but also safe in the sense of being readable under a wide variety of different rendering systems and browsers, i.e. they are safe in a way analogous to web safe colours.

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.