Readable Web » Web Typography

In Web Design, The Narrow Column Is King

Richard Fink — Sat, 10 Mar 2012 17:01:29 +0000

Get used to it. Learn to live with it. Make it work for you.

Check this out: Re-Thinking The Mobile Web
It takes a good twenty minutes to get through but it’s worth it. Even if you are already familiar with the pitfalls of trying to accommodate all the different screen sizes out there. Maybe especially if you’re already familiar with the pitfalls.

My friend Jerry Maddox – Professor of Art and teacher of New Media Design at Penn State is totally on the right track. He’s obsessed with finding the absolute minimal one-column layout with as little CSS as possible. Something that can be committed completely to memory, preferably. Here’s the latest iteration featuring the same text and CSS using each of 5 free open-source web fonts of high visual quality.

A Free RasterBRIDGE® Web Font: Puffbuddy Light

Richard Fink — Wed, 29 Feb 2012 20:03:46 +0000

What you see above is a screen shot taken on Windows XP.
It looks smooth and clean, right?
Unlike most so-called ‘web fonts’, all RasterBRIDGE® Web Fonts are specially prepared to look as good in Windows as they do on the Mac,
and on the iPad,
and on the iPhone,
and on the Kindle Fire, and so on and so forth.
Before we ship, we test the font in a wide variety of browsers on all major platforms and devices.

As a RasterBRIDGE® Web Font, Puffbuddy Light will remain balloony, buoyant, and jolly in any browser, on any platform.
Download it here and spread the word. Enjoy.

What’s The Font Got?

Puffbuddy Light features the HTML Basics+ Character Set. That means you get all the important HTML character entities, a full complement of spacing characters and you’re covered for the following languages:

• English, Spanish, German, French, Italian, Portuguese, Irish, Finnish, Icelandic, Norwegian, and Swedish.

RasterBRIDGE® Web Fonts Stay Small and Load Fast

RasterBRIDGE® Web Fonts are specially compressed to stay small and load fast. The Puffbuddy Light TTF font file weighs in at only 41 kb, the Woff at 28kb, and the EOT at 26kb. A whole font for the size of a small image!
And did we mention that, for the “price” of those 28 kilobytes compressed, the HTML Basics+ Character Set also covers these languages, too:

Basque, Albanian, Gaelic (Irish), Gaelic (Manx), Gaelic (Scottish), Luxembourgish, Afrikaans, Haitian_Creole, Indonesian, Javanese, Estonian, Fijian, Filipino/Tagalog, Afar, Bislama, Breton, Chamorro, Comorian, Faroese, Gilbertiese/Kiribati, Kinyanwanda, Kirundi, Luba/Ciluba/Kasai, Malagasy, Malay, Marquesan, Ndebele, Oromo, Palauan/Belauan, Quechua, Romansh, Sango, Sesotho, Setswana/Sitswa, Seychellois_Creole, SiSwati/Swati/Swazi, Somali, Sotho, Swahili, Tetum, Tok_Pisin, Tongan, Tsonga, Tswana, Tuvaluan, Uzbek/Usbek, Walloon, Xhosa, and Zulu.

¡WOW!
Ett stort värde. Ein großer Wert. A mikils virði. Yon gwo valè. Një vlerë e madhe.

Practical Font Design, Third Edition

Richard Fink — Thu, 01 Dec 2011 17:29:12 +0000

Practical Font Design
3rd Edition

In Digital Publishing you need to co-ordinate your efforts with many people. Web designers, developers, server techs – the list goes on and on – and the more you know about how those people go about their work, the better off you will be.

With fonts, the “collaboration” might take the form of a purchase, or a free download, or just a link to the font in your HTML. But there is a font-maker somewhere on the other end of that transaction. And the more you know about how that font came to be, the better off you’ll be. And unlike a lot of things in today’s fast-paced environment – where it’s hard to separate the side-shows from the main attractions – a knowledge of fonts and how they’re made won’t be obsolete in just a few years. Changes in font technology come at a snail’s pace, and what changes do come, are incremental. So what you learn about fonts will pay dividends for as long as you live. Really.

Have A “Practical” Christmas

David Bergsland’s Practical Font Design is now in its Third Edition. It’s greatly improved in many, many ways from the Second Edition. (Bergsland not only listens to reader feedback, but he acts on it, too.) It’s still the only book of its kind, and it does a simple thing: it tells you, in a friendly and to-the-point manner, how one experienced font designer and teacher – David Bergsland – goes about his work. It’s a must-buy for font designers. It’s a should-buy for any web designer, graphic designer, or anybody involved with digital publishing.
Not much interested in the technical details? – It’s worth the price just for the “history of type” section and as a flip-through reference. If you’ve ever used Adobe Illustrator or CorelDraw, you already know more than you necessarily need. And a demo download of FontLab Studio – the professional level font editor referenced in the book – is available for Mac and Windows free.

Here’s a little piece to give you an idea of the tone:

“My plan is to go through my decision making process so you can do the same as you develop your fonts. There is no right or wrong here. All you have to guide you in the process is your personal sense of style – what’s right and wrong.”

Practical Font Design, The Links:

Amazon Print and Kindle

Lulu PDF

Lulu Paperback

David Bergsland sells his fonts at:

Hackberry-Fonts

And blogs here, dispensing technical tips and helpful font-making tools:

Hackberry-Fonts Blog

Extensis Brings Google Web Fonts Straight Into Photoshop

Richard Fink — Mon, 07 Nov 2011 23:42:10 +0000

Extensis, the company behind the WebINK web font service, today announced a plug-in that brings Google Web Fonts straight into Photoshop.

Free And Open-Source Fonts Served Alongside The Proprietary, In A Surprising Twist

Since launching the WebINK web font service, Extensis has concentrated on building a library of fonts drawn from the proprietary type community, building on long-standing relationships developed through Extensis’ other font and design products: Suitcase Fusion (a desktop font manager) and Universal Type Server (a server-based font library and font license manager for workgroups).
But they haven’t left it at just being another service operating in the shadow of (now Adobe) Typekit – as services like Fontdeck, WebType, and others have done. From day one, I’ve personally seen them strive to find new ways to meet the needs of web designers with innovative software tools that, in combination with their hosting service, make the use of a font service – as opposed to shopping the web for suitable fonts and then self-hosting – a much easier and useful proposition. They’ve continuously shown up at the major web conferences to promote, of course, but also to watch and learn and listen. What’s sets them apart is that they turn around and act on that knowledge in creative ways.

Riding Piggy Back On Google’s Web Font Initiative

[A developing story... more analysis, riding in on piggy-back, is on the way...]

Amazon Moves To HTML5/CSS3 For New Kindle, Leaves Mobi Format Behind

Richard Fink — Fri, 21 Oct 2011 15:50:10 +0000

Some folks I know are waiting for E-Pub to magically arrive and provide a comfy transition from print to screen. But anybody who’s looked into that closely knows it’s a fairy tale.

Ain’t gonna happen, and here’s the latest nail in the E-pub coffin:

Kindle Format 8

The List of Features Includes @Font-Face

Here’s a list of supported features on the way:
List of supported HTML tags and CSS elements

(Note to Amazon: It’s HTML Elements (but I’ll accept “tags”) but definitely not “CSS elements” CSS Properties, it is.)

Steve Jobs Role In Typography By Computer

Richard Fink — Mon, 17 Oct 2011 16:21:37 +0000

A few weeks ago, my eye doctor said to me, “I only know of two people who know anything about fonts, you and Steve Jobs.” Seemed Dr. Patel was re-doing his web site and had questions about the qualities of Trebuchet MS. But the line about Jobs raised an eyebrow, naturally, and it was as I suspected – Dr. Patel had read Jobs’ commencement address to the Stanford graduating class of 2005, the relevant portion of which follows:

“Reed College [where Steve Jobs enrolled for awhile] at that time offered perhaps the best calligraphy instruction in the country. Throughout the campus every poster, every label on every drawer, was beautifully hand calligraphed. Because I had dropped out and didn’t have to take the normal classes, I decided to take a calligraphy class to learn how to do this. I learned about serif and san serif typefaces, about varying the amount of space between different letter combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way that science can’t capture, and I found it fascinating.
None of this had even a hope of any practical application in my life. But ten years later, when we were designing the first Macintosh computer, it all came back to me. And we designed it all into the Mac. It was the first computer with beautiful typography. If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts. And since Windows just copied the Mac, it’s likely that no personal computer would have them.

Setting The Record Straight

A lot of people know that Benjamin Franklin did research on electricity. The silhouette of Franklin in a lightning storm with his kite flying and key dangling is emblazoned on the average American’s brain: the rugged individualist in pursuit of a dream, no matter the danger. But what almost nobody knows is that Franklin’s work on electricity was as a part of a team of co-equals. And that his signature was only one of several others’ that appeared upon publication of that work. But Franklin had the fame and got the credit. Sound familiar? History is a single-sentence thing.

A lone eagle, as an icon, works great. A flock of geese, not so much.

FinksLinks: Pre-Approved For Your Reading Pleasure

Here’s a couple of articles to help put it all in perspective:

The Impact of Steve Jobs on Typography

Steve Jobs and Type: Connecting the Dots

And here, on Typophile.com, a bit of additional insight, debate, and perhaps a few ruffled feathers: Steve Jobs 1955-2011

Adobe Announces Acquisition Of Typekit

Richard Fink — Mon, 03 Oct 2011 19:43:00 +0000

It’s fair to say that those close to the development of Web Fonts expected Typekit to be acquired by somebody. Well, today somebody did.

Adobe Buys Phonegap And Typekit for Better Web Tools

The Typekit Blog Announcement

And Adobe’s press release: Adobe Acquires Web Typography Innovator Typekit

A good thing? A bad thing? An inconsequential thing? Who knows?

A Nice Use Of Web Fonts In Mainstream Media

Richard Fink — Fri, 09 Sep 2011 00:16:10 +0000

There’s a nice use of web fonts at the New York Times. (Just remember to clear your cookies to keep on reading past their twenty page a month limit.)

Titled The Reckoning , it’s a link and teaser page for a group of stories about 9/11.

Very tasteful and dutifully solemn.

Definitely not cheesy.

We don’t want cheese.

Worth a look. Really. Except for the upper case “G” with a pimple on its chin. Is this some kind of slick reference to Lincoln? Or Lincoln’s well-documented love of pizza? We’ll probably never know for sure.

ttfautohint – Support Web Typography

Richard Fink — Wed, 10 Aug 2011 14:10:43 +0000

There is a very promising open source tool by developer Werner Lemberg called ttfautohint which promises to make it a lot easier for font designers and also web designers working with free, open-source, and public domain fonts to get them looking good on Windows. Even the early versions have some experts in font software sitting it up and taking notice.

Help Improve Web Typography with ttfautohint is a quick and entertaining video explaining the problems ttfautohint is trying to solve.

Send Money

I’m kicking in a few bucks, and you should, too.

A Webfont Specimen Page Free For Download

Richard Fink — Sun, 10 Jul 2011 15:53:36 +0000

Tim Brown of Typekit put together a webfont specimen page awhile back. Originally introduced in Tim’s article for AListApart: Real Web Type in Real Web Context, and it does give a real nice view of a font in a variety of contexts.

I’ve incorporated a modified version of it into my suite of web font test pages. And, for those who might find it useful, you can take a quick look at it here, and download it here.

The Modifications

There’s two main differences between my version and Tim’s:

For test pages, I like to keep everything – the HTML, CSS, JavaScript, and even images – contained in a single file. As my webfont test pages have evolved, I’ve just found it simpler this way. At least to me. So everything is in one .htm file. The two images from the original – used for background – are included as Data URIs in the CSS. The only downside is that those images won’t show up in IE6 or 7: a situation that doesn’t bother me because nearly all the functionality remains intact and my IE testing is usually done on IE8. (IE6, 7, and 8 all require EOT, and Windows GDI is the rendering engine for all, and I’ve yet to see a font problem appear in IE6 or IE7 that didn’t show up in IE8.)
The @font-face syntax has been updated to use the “Fontspring”, single declaration syntax.
See: Further Hardening of the Bulletproof Syntax and Best Practices for Serving Webfonts to IE9 on the Fontspring blog for more information.

Pause Before You Say “IE Sucks”

An interesting glitch appeared while I was working on this. When displaying the font Ultra from Google Webfonts, there was a strange difference between IE8 and Chrome. In IE8, the glyph “j” was clipped off on the left like this:

But Chrome rendered the entire glyph and allowed the part that IE clips off to extend outside the bounding box to the left:

In both cases, it’s not what you want.
Which browser is doing the technically correct thing? And more importantly, what’s causing it? Since the clipped “j” in IE was more of an eyesore, the kneejerk response for most developers would be, I think, “Goddam IE! Again!”. But after opening the Ultra font in a font viewer, the real source of the problem revealed itself.
In the font itself, the position of the left sidebearing of the “j” was the source of the problem:
You can see that the font itself “clips” the “j”. (And this may or may not show up depending upon the layout.)

Over the past eight months I have cracked open many hundreds of fonts, one after the other. And I can tell you firsthand that even on carefully made fonts, stuff like this happens a lot. Ultra was designed by Brian J. Bonislawsky of Astigmatic who’s very experienced. But even so, stuff happens. So, before you go blaming the browser, if you’re using a webfont, remember that a new variable has been added to the mix – and the source of what seems like “buggy” behavior is just as likely to be there as anywhere else. Just what web developers needed, a new complication!

Some Cool Tools That Came Into Play

The CSS for Tim Brown’s page was originally in three separate CSS files. I brought them together within a single style tag using a nifty free tool – CSS Mixer – which allows you to select a bunch of CSS files, concatenate them into a single file, and minify the code using the Yahoo User Interface Library. After that, it’s cut and paste. Very handy. There is also a tool by the same developer, Sam Beauvois, for concatenating and minifying JavaScript named JS Mixer. (They’re .NET executables for Windows only. No Mac or Nix versions unfortunately.)

That’s it. Pay it forward.