A Wealthy Type Case

Next to all this ‘responsiveness’ there is much – almost feverish – excitement about using non-standard (that’ll be ‘Not Web Safe’, then) Web Fonts. Again, as on the subject of media queries, there are many sound sounding articles written on the subject. (Okay okay, I will never mention that again!)
Curiously I looked at both Typekit and Google Web Fonts.

Browsing the Typekit website I noticed the ‘Try before you buy’ option, or as they say, a ‘Try it for Free’ service with a very limited Trial Library Access. Nice, so I immediately picked the Museo Sans for a starter. The font you are looking at right now. Very stylish, if I may say so.

Notice the small “Fonts from T”-button in the right bottom corner, linking to ‘my‘ Typekit, holding mentioned Museo Sans and the playful CarbonType, the latter for the h1 Site Title, at this moment.

Typekit promises and delivers a fast and easy set up:

  • create a Typekit account
  • create a kit (your choice of fonts)
  • embed 2 lines of code to install the javascript
  • assign CSS selectors to the different fonts in the Typekit Editor.

I am thinking about upgrading to the Portfolio Plan very soon.

Google Web Fonts offers a different approach.
Just go there,

  • pick a font,
  • copy a line of code to link to (or import, or there’s some Javascript as well, where the Google Api calls the AJAX webfont.js) a specific stylesheet and
  • add the font to your CSS selector(s).

HTML:

<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);

CSS:

font-family: 'Gloria Hallelujah', cursive;

And at Google Web Fonts too, you can start your own Collection. Fast and free.

Listing both methods may look a bit superfluous – just go visit the sites, right? – but it shows in one quick glance how easy it is to build out your very own rich Type Case.

And of course there is the @font-face CSS rule, already supported by Netscape 4 and Internet Explorer 4 ages ago. Another way of allowing web designers to use fonts not installed on end user machines.
Well, I guess designers will start using the Font Services more and more. Quite Rightly So.

Here’s Google’s Gloria Hallelujah in action:

“One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.” *

*) It is nice to notice Google is displaying the first paragraph from Franz Kafka’s 1912/1915 Erzählung/Narrative ‘Die Verwandlung’:

“Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheuren Ungeziefer verwandelt. Er lag auf seinem panzerartig harten Rücken und sah, wenn er den Kopf ein wenig hob, seinen gewölbten, braunen, von bogenförmigen Versteifungen geteilten Bauch, auf dessen Höhe sich die Bettdecke, zum gänzlichen Niedergleiten bereit, kaum noch erhalten konnte. Seine vielen, im Vergleich zu seinem sonstigen Umfang kläglich dünnen Beine flimmerten ihm hilflos vor den Augen.”

Some further reading (on Typography, not on Franz Kafka):

Comments are closed.