Results tagged “font” from KPAO

As regular readers of this blog know, I'm a typography aficionado. When I was working with start-ups a few years back, I was heavily pushing SIFR, the Flash-based headline replacement tool. But boy was that a pain in the butt to get working right. Then there was FaceLift, which did text replacement via image files. And then Typeface.js and Cufon, both of which used vector tools to literally draw the custom text letter by letter. In summary, web typography was a mess.

And now? Well, it's still a mess, but not quite as bad as it used to be. The latest versions of all popular browsers now support the @font-face declaration. No more hacks for rendering text in arbitrary fonts. The text is selectable and searchable. There is little (if any) performance hit, and the download hit is only the size of the font.

The biggest problem is browsers all support different formats. IE only supports the obscure EOT format. But give Microsoft credit. This was created over a decade ago, and works in practically any version of IE. Chrome and Safari support TTF and OTF, and Firefox is putting their weight behind yet another standard called WOFF. And still others can only work with SVG files (e.g. Mobile Safari). This is where I draw the line, though; The big 4 browsers are sufficient for me.

Thankfully, a really smart web developer named Paul Irish worked through all of this cross-browser crap, and came up with the optimal way to make @font-face declarations. The downside is you need at least 3 different formats for each font. Thankfully, the fine folks over at FontSquirrel have created this @font-face web tool to generate the different formats for you.

The other thing I learned the hard way: Firefox does not support cross-site font referencing. This is apparently to prevent font piracy, but it's a PITA when you have multiple domains that want to share font resources, or when you're trying to spruce up another site via GreaseMonkey. A simple way to get around this is to embed the font binary into the CSS code:
@font-face {font-family:myCustomFont; src:url(data:font/ttf,base64,A6EA...);}

But even after all of that, I find that these fonts aren't rendered using proper anti-aliasing in all cases. It's very inconsistent, and makes using many fonts impossible. I'm hopeful these bugs will get fixed soon.

For more info, check out this slide deck.

pack my box with five dozen liquor jugs

As you all may have deduced from the recurring font/typography posts here, I'm a bit of a fan. But to this point I've been mostly a consumer of type. I do want to contribute and give back to the community. And I see some pretty big holes that need to be filled.

Helvetica Small Caps
It amazes me that the most popular typeface of all time does not have a small-caps variant. This seems like such a no-brainer to me, and something that would be fairly straightforward to do. I even started it myself, but as I am just learning the tools, it was pretty slow going. I think I ended up doing 2 or 3 characters. And while we're at it, you could do an Arial Small Caps as well.

Tahoma and Lucida Grande Italic
These are UI system fonts for Windows and Mac respectively, and with both are well designed fonts with a bold option, neither have italic versions. And while we're at it...

Helvetica and Verdana true italic
Yes, both of these fonts have "italic" versions, but they are simply mathematically slanted versions of the regular font, aka "oblique". Ugly, and not fitting fonts of this popularity.

Maybe someday I'll get around to doing these projects, but in the meantime, I'm throwing these ideas out there in case any budding (or even experienced) typographers might want to take up the task.

Ah, sweet irony. This article on FontFeed is quite comprehensive, but to summarize:

• Anti-piracy group unveils logo.
• Font used to create the logo is revealed to be licensed fro exclusive by France Telecom. Thus, there is no legal way to use this font.
• Anti piracy group claims a "sketch version" of the logo was accidentally released, and they release a new version.
• It turns out the fonts used in the new logo were licensed on that same day. So clearly they hadn't done any font licensing up until they got caught.
  
• Also, the trademark application for the original logo—submitted two months previous—used the France Telecom font.
• So their story was bullshit. The anti-piracy group got caught pirating, and it was no accident.

I hope France Telecom sues their sorry ass.

I saw Avatar the weekend it came out. In 3D, of course. And it was good. Maybe even really good. Certainly the effects were amazing. As a UI designer, I was really impressed at his vision of 3D projected user interfaces. And the level of detail of everything on the alien planet was staggering. Sigourney Weaver was fantastic in her role. I loved her last line. Totally fitting of a research scientist.

But. There were problems. He nailed the design. He created his own alien language, with grammar, writing, and accent. James Cameron is known for nailing all the details. Which makes it an immense travesty that he chose the Papyrus font for the subtitles. OK, maybe it's a custom version, but the overwhelming similarity makes the origin clear. This is the best he could do? I mean, papyrus is right down there with Comic Sans as an overused, inelegant font whose use says I am a lazy, unimaginative designer who slapped this together in 20 minutes." James Cameron, you wound me, and all of the other typophiles worldwide.

The plot was a mess. Maybe not at the Star Wars prequel level, but certainly not even close to the quality of the original Star Wars movies. The bad guys are so one dimensional, that the irony of them appearing in a 3D movie did not escape me. The physics of the floating mountains was a bit too much for my suspension of disbelief. But the thing that just made me laugh out loud at the sheer lunacy was that a mechanized cyber-suit would have a proportionally sized knife attached for hand-to-hand combat. I could maybe see a blade attachment somewhere on the suit for cutting, but why require the suit to wield it in a hand just like a human? There are so many drawbacks to that design, I can't believe it made it into the movie.

Sure, it was entertaining, but I'm not rushing out to see it again.

I really hate Trebuchet. I really want to like it. After all, it's a humanist font, and those are my favorites. But the lowercase g and the ampersand just grate on me and the lowercase i and j with their crossbars feel cumbersome. I took it upon myself last year to tweak this font to try to salvage it. But here it is a year later, and I'm still not happy.

When posting in the Typophile forum on my Trebuchet project last year, I mentioned that the lowercase g was inspired by the on in Meta. One snarky commenter suggested I simply substitute all of the Meta characters into Trebuchet. So that’s what I did.

Well, not really. What I did was I took my copy of the Meta font and changed the Family Name parameter to Trebuchet MS. Then I deleted the Trebuchet font files from my system and copied in my new font files. The result was simply fantastic. I loved the result.

So of course I didn't stop there. Arial is boring. I replaced it with Myriad. Gentium is the serifed font that replaced Times New Roman. And Consolas is my new monospaced font, replacing Courier New. I even replaced the universally-hated Comic Sans with Mighty Zeo, one of the fantastic options offered by Blambot.
 
When I tried to do the same on my Windows computer, however, it didn't work out so well. The fonts looked awful. Microsoft ClearType is great for optimized fonts, but for other ones, their font renderer is simply awful. I ended up using all ClearType fonts as my replacements (Arial→Calibri, Trebuchet→Corbel, Courier New→Consolas, Times New Roman→Constantia).

Most of the fonts I chose to use have commercial licenses. (I tried to use Delicious as my sans serif font, but I just didn't like it as well as Meta or Myriad.) However, Gentium license does permit redistribution, so here are the modified font files. Just delete all the Times New Roman files out of your system's Fonts folder and copy these in. Enjoy!

Download the Gentium font family to replace Times New Roman

Here in the heart of the enterprise software market, fonts come in two flavors: serif (Times) and sans (Arial). It's hard to make a big visual change in any UI without also making changes to the typography. Luckily, we're moving into an era where alternate type faces are becoming trivial to add to your design.

SIFR and FaceLift are a couple of tools to do this in web pages today, but they're not exactly easy to use. I still can't figure out why SIFR text is showing up tiny in Safari for my site Rated-Best.org. But with the release of Firefox 3.5 and Safari 4, mainstream browsers are now starting to support @font-face. Here's a nice example page using @font-face.

Plus at my company, teams are using Adobe Flex and Air to develop rich apps that span web and desktop, and run on Mac and Windows. This gives us the ability to embed alternate fonts in these rich apps.

This is where Font Squirrel comes in. It's a great resource for designers at companies where you want to explore alternate typography, but you don't want to burn any capital on purchasing font licenses. These fonts are free to use for commercial applications. Check them out, use them in your projects, and if things go well, use that success as a way to move up to a broader palette of paid-license fonts.

OK, I'm a bit late on this one since the election was 6 weeks ago. But I recently watched this video where Sol Sender describes the process of creating Barack Obama's brand and the now legendary "O" logo. And designer that I am, I couldn't help but think, "Why not combine the logo and the Gotham font into an Obama branded version of the font?" So I did.

It was pretty straightforward. I grabbed the 1-color logo from the Obama downloads page. I then used VectorMagic to convert it into a vector. Then I opened Gotham Bold (which was the weight closest to that of the logo) in TypeTool and replaced both the majuscule and miniscule O's with a proportionately-scaled logo.

A bit cheesy, perhaps, but then there have been far worse abuses of the Obama brand.

Update: And just for fun, I created the Obama sez "LOOK..." site.

Dave can't be the only one around here exploring the mysteries of fonts and typography. Presenting the Unicode snowman. ☃

Here's a bigger version for your viewing pleasure:
☃

My main bank account is at Fidelity, which has no local branches. So when I need to get money out of an ATM, I can choose any one I want. As of late, I've been going out of my way to use Wells Fargo ATMs. Why? Because I'm a design geek, and Wells Fargo has recently rolled out a new UI design for their ATMs. (Well, it has been over a year since they started the roll-out, but I only just noticed it.)

Holger Struppek was the lead visual designer on the re-design project and has a great article documenting the process. Of course half the reason I love the new design is because the font they use throughout is Myriad (the same font used by Apple for its corporate brand). It really makes the whole UI feel a lot fresher and cleaner.

So at least for me — admittedly not your typical banking consumer — the commodity world ATMs has been differentiated by good design and it has turned me into a customer. Do you know of any other commodity products differentiating by design? Leave a comment!

Planet Granite just opened a new climbing gym in San Francisco recently. It's in a renovated warehouse in the Presidio, near Fort Point. They left some of the old fixtures in place during the renovation, and as a result there is some gorgeous art deco typography sprinkled throughout.

On the top level, there are some great signs from old P&H mining equipment, as you can see in the photos here. I really loved the ampersand, so I spent some time today recreating it in vector form. Here it is. Click it to download the SVG file.

I finally got fed up with the lowercase g and ampersand in Trebuchet. So I bought a font editor (TypeTool), and fixed these characters. The g now looks a lot like the one in Meta, and the ampersand... well it's not great, but it's OK and was easy to create by modifying the existing one.

In order to avoid any licensing issues, I've retraced all the letters into my own version of the font that I call Catapult. I'm using these versions on my computer now. I've not done the italic faces yet, though. It took me long enough to figure out how to use the tool. As soon as I get around to doing the italics versions, I'll post them all in a package for download.

I finally updated my Rated Best site to use sIFR for the titles and headings. (I'm using various weights of the font Meta.) Getting that working was a real challenge, especially since my blog development environment is all brower-based. Browser-based debugging is a lot like particle physics research. Slam some code against a browser and see what comes flying out. Tweak the code and repeat.

Suffice to say that sIFR is a very fragile technology that requires everything to be just so in order for it to work. I still can't figure out how to get the elements from jumping around as they load, but it's good enough for now. Anyway, let me know if you need help getting it working on your site. I'm apparently an expert at it now.

The other thing I just did was to do a bit of passive promotion. I added an info page on Rated Best to CrunchBase, TradeVibes, AboutUs.org, SimpleSpark, Sphred, and the Facebook product pages. And of course the sIFR examples page. I also submited to FeedMyApp, KillerStartups and Listio. It seemed to work well with AskMeGo, which now has a PageRank of 4. Any other places I should post it to help out SEO for Rated Best?

There are some quality free fonts out there, but one of my favorites is Ugly Qua. It has percolated onto most of the free font sites, but I finally did some digging around last night and found the original source as part of a pirate-themed set.

It turns out the creator — Manfred Klein — is quite the prolific font designer. You could literally spend days digging through all the fonts he created over the years. I'm not really into the Pi fonts, but his text, display, and historical fonts are of impressive scope and quality, especially given the price (free!).

Some other great free type foundries are Larabie, exljbris, and Font Garden.

I've been thinking further about fake small caps after my post on it last week. CSS is part of the problem too, with its font-variant: small-caps property. I did a cursory check, and none of the browsers use the true small caps characters, even when they are built-into the font.

So what we need are freely-licensed small caps versions of all the common web fonts: Helvetica, Arial, Verdana, Georgia, Times, Tahoma, Trebuchet... Once we have that, we just need the browser to use these fonts when font-variant: small-caps is applied. If the browsers don't support it natively, we could write extensions to do it, much in the same way I described my idea for a font-family service.

Surprisingly, there doesn't appear to be any small caps versions of these common fonts (even Helvetica!), except for Tahoma. Although I've had practically no experience creating fonts, creating small caps version seems like a bit easier task than creating a new font from scratch. I might give it a go. Anyone else interested?

Courier is simply a horrible font. It is barely legible with its thin strokes and clumsy serifs.OK, really it's Courier New I have a problem with. Courier isn't quite that bad. But I'm amazed at how many web sites hard-code Courier rather than simply using the browser's default monospace font.

If you don't want to trust the browser's default, at least use higher-quality alternatives Andale and Monaco instead. They are widely available and have been around forever -- Andale as a part of Microsoft's core web fonts and Monaco as a part of every version of Mac OS I've ever used (I started with 6.0.8). Consolas is an even better choice, but it's only on systems running Vista or Office 2007/2008 (or anyone who has downloaded the PowerPoint 2007 viewer, wink wink).

So here's my solution. I created a GreaseMonkey script (inspired by this one) to replace all references to Courier and Courier New to my default monospace font (which is Consolas). Install it from here.

I've been reading The Economist recently. Overall they have excellent page design and typography. But being the detail-oriented designer that I am, I noticed a problem with their headings.

The Economist uses Officina Sans for these headings. Overall it's a great font. However, the lowercase i has a partial serif which causes some problems with several letter pairs. I first noticed it with the ri pair, but it also shows up with ti. You can see it at the right. It doesn't look quite as bad at 72pt, but the problem is exacerbated at body text sizes, where the thin space between the letters becomes muddied.

The crossbar of the first letter runs into the serif of the i, which makes a strange gestalt and draws the eye. I thought about creating a typical ligature where the letters are purposefully joined together, but that didn't look right to me. So I went the other way; I dropped the serif off the i for these ligatures. I think it really improves readability. It even works for other pairs, like rn.

I'd be honored if ITC included this concept on their next OpenType revision of Officina Sans.

According to our logs, my font posts have been some of the more popular on this blog. So that got me thinking: how can I pander to the crowd and create a few more font posts to generate even more traffic? Seriously, it did get me thinking about web fonts again.

The root problem of typography on the web is current model that the browser will only render a font that is installed on the computer. Designers get around this by rendering text as images, but there are obvious scaling, localization, and internationalization issues. SIFR is a great utility for working around this -- and I highly recommend it -- but ultimately it too is a hack and is not very easy to use.

CSS 2 documents the @font-face rule, which allows designers to point to a font file on the web, thus ensuring that anyone viewing the page will see it in the proper font. However, Safari is the only major browser that currently supports this; heck, even Opera doesn't support it. Without support from IE or Firefox, this is bound to be another piece of amusing trivia, but not useful for actual web design.

But that got me thinking... Firefox does have an add-on architecture. One could write an add-on that supported @font-face. Nice, but why stop there? The designer in me wants a new system that will work with all the web sites that are already out there. What I want is a Firefox add-on that makes a list of all the fonts needed on each page, and if they aren't installed on the computer, goes out to the web and gets them. 

Google recently announced their AJAX Libs API, which enables any web developer to link to popular Javascipt libraries and let Google worry about hosting and updating. It's basically a central repository for commonly-used web resources.

So here's my grand vision (1.0): a central server that hosts the most-recent version of all popular open-licensed fonts, and a Firefox add-on that uses the font repository when the required font is not installed in the browser's OS. It turns out we don't really even need support for @font-face, though it would be useful for those who want to use a font that isn't in the central repository.

Update to grand vision (2.0): Actually there doesn't need to be a central repository, just a central index of font files. So all we really need is an open font directory server that lists all of the known ttf and otf fonts out there by name with URLs to them, much like DNS is a directory of IP addresses based on domain names.

Anyone want to take this on? Ping me in the comments if you're interested. Googlers looking for a 20% project, take note!

One of the biggest problems with serif fonts on the web, is they are visually busier than sans fonts. They simply have more complexity and details in their letterforms. But if a web design, it's often nice to have a contrasting font to help communicate different types of information, and using a serif is the most reliable way to do this.

I've found that the italic version of serif fonts are less complex and busy than their normal counterparts, and they are more beautiful too. Plus, there isn't that much italic serif used out there on web pages, so you can create a more unique look simply by going italic. Notice that in this blog I use it for blockquotes:

Passerby were amazed by the the unusually large amounts of blood.

I also use it when UI text appears where content should be, sometimes using my favorite web color for alerts, firebrick:

Sorry, no items matched your search. view all

Times New Roman is actually a quite beautiful italic, and nearly everyone has it. I also really like the new Microsoft font Constantia as a serif (and conversely, I really dislike Cambria). I'm not a big fan of Georgia either; it's a bit too big and clunky for my taste.

Constantia  The quick brown fox jumps over the lazy dog.
Times New Roman  Pack my box with five dozen liquor jugs.
Georgia  Jackdaws love my big sphinx of quartz.

OK, I've been hearing about Web 2.0 and AJAX and Ruby on Rails and Amazon web services etc for too long now. And every one of these new sites I view all still use Arial and Verdana and Times and Georgia to display their text. Boring. These are the same fonts that were around at the start of the web (or very soon after). Microsoft released their suite of core web fonts and that was it. No more progress on the typography front.

I'm not saying Microsoft has to step up again. In fact it's unlikely they will. They've got some beautiful new fonts that shipped with Vista (and to the consternation of the Vista product managers, the latest version of Office as well). But while one can get these fonts freely on the web, they will never be widely licensed for distribution.

But what I don't understand is why others haven't picked up the slack here. There are some really nice free fonts out there (many of which have been featured on Smashing Magazine) that could easily be included in the Firefox distribution—like these for example.

Or how about Adobe? They have amazing reach with both Flash and Acrobat Reader, and they also have an amazing library of typefaces. How about it Adobe? How about picking up the slack here and giving a bit back to the Internet community that made you the powerhouse you are today?

Or Google? They licensed the Droid fonts for their Android phone platform. How about extending use of these fonts to computers as well? They've got plenty of client installs (Google Desktop, Toolbar, Talk, Pack...) they could bundle fonts with.

Ah well, I'm not holding my breath. I'm still going to use SIFR for my designs. And for the love of everything that is beautifully designed, I encourage you all too as well.