9 posts with tag “typography”

The typography of Sacha Baron Cohen’s “Who Is America?”

I couldn’t help but notice how jarring the titles for Showtime’s “Who Is America?” are, but I couldn’t put my finger on why. It’s clearly some condensed extra bold, which are often pretty ungainly, with some exceptions (Futura Bold Codensed, of Nike fame). My first thought was that it might be something like Calibri or Tahoma, some unsightly humanist sans that was even possibly manually stretched.

I Googled around for a screenshot of the titles, and what I found instead was a lot of promotional material that primarily does use Futura Bold Condensed:

(And Arial Bold, unfortunately.)

I can’t help but wonder if the designers behind the titles in the aired show were trying to mimic Futura Bold Condensed, but either weren’t able to or didn’t know they weren’t using the same typeface.

I admit I had to look it up, but the typeface they are using is Abadi Condensed Extra Bold. Why this typeface? After a little more Googling I learned that Abadi is included in several Microsoft products.

What isn’t included in most Microsoft products? Futura Bold Condensed.

Leave a Comment

The New Ubuntu Maverick System Font

When Mark Shuttleworth announced the rebranding of Ubuntu, it seemed nobody noticed that he mentioned a new system font was being developed. Currently Bitstream Vera Sans is the default (if I’m not mistaken), appearing on menu bars, title bars, buttons — pretty much everywhere. I’ve always thought it has served its purpose well, and was frankly a little worried that they wouldn’t get the new system font right. Type design is extraordinarily tricky.

Now however details are starting to emerge. OMG! Ubuntu! describes how to get a bootleg copy of it. And at UDS back in May, Bruno Maag gave a session entitled “Making Beautiful Fonts” in which he elaborated on the creation of the new font. There is now video of that session, as well as the slides, which were sadly not included in the frame.

My first impression is that it feels a bit too stiff, rigid, and tech-y. Of course there’s no way to tell until you use it on your desktop. Reassuring, however, that they’re giving it proper italics.

One Response

Web Typography in Ubuntu: Part 1

One of the first things a careful observer will likely notice about a fresh Ubuntu install is the distinctly odd appearance of their favorite websites. The cause for this is that, although Ubuntu ships with a fair selection of fonts, they aren’t properly assigned as aliases to the proprietary fonts that most websites call for; Helvetica and Arial have a perfect cousin in FreeSans, yet are substituted with Liberation Sans by default, the latter of whose stemmed “1” and barred “J” (among other things) is a dead giveaway. Likewise, Verdana is also substituted with Liberation Sans, when DejaVu Sans is a much closer fit. Then there’s Times New Roman, Lucida Grande, Baskerville — none of which is adequately mimicked.

Several of these fonts are better served by some Ubuntu defaults, and still others — Gill Sans, Optima, Caslon, Tahoma, and more — have decent substitutes just waiting in the repositories. Typography plays a greater role in user experience than I think most people working on Ubuntu realize, and it should be a goal of 10.10 to elevate this part of the OS as much as possible. This requires just a few extra kilobytes in packages and some changes/additions to the files in /etc/fonts/conf.d/. In a subsequent post I’ll be cataloging what those changes should be.

Continue reading

6 Responses

Liberation: The New Arial sans-serif Substitute in Jaunty

One of the first things I noticed after booting into Ubuntu 9.04, Jaunty Jackalope, is that Google Reader and Gmail looked a bit off. I quickly realized they were both using different sans-serif fonts than they had previously (Nimbus Sans), despite Firefox’s preferences having Nimbus set as the default sans.

I knew that Google isn’t so great with their stylesheets, in some cases declaring a font-family of just “Arial,” with no “sans-serif” backup in the font-stack (which would, of course, let Firefox substitute in whichever default sans the user had set – in my case, Nimbus).

I also knew through playing around with ~/fonts.conf that Linux allows you to define substitutions for different font names. It was my hunch that there was something new about Jaunty (which has been praised for its better presentation of text) that defined Liberation Sans – the font I determined I was looking at – as the preferable substitute for Arial.

After looking around a bit I found the culprit in /etc/fonts/conf.avail/30-metric-aliases.conf. Around line 182 you should see the beginning of a section devoted to the Microsoft typefaces, and shortly under that (around line 186), the line:

<family>Liberation Sans</family>

Just above that, insert the following line:

<family>Nimbus Sans L</family>

Reboot your system, and when you’re back up, Ubuntu should now replace any calls for Arial with Nimbus Sans.

Of course, this should only be done if you prefer Nimbus Sans. It’s been claimed that Liberation Sans is better hinted than either Nimbus or FreeSans, and from the looks of things, it is. Still, I just prefer Nimbus. That serif on the upper-case ‘J’ in Libertine especially bothers me.

I still love Linux Libertine as a Times substitute, however.

One Response

Ubuntu, Font Hinting, & You: A Cautionary Tale

This post was written regarding Ubuntu 8.10, Intrepid Ibex.

This isn’t the first time I’ve encountered hinting; I’ve seen it before in GIMP, even when I was using it in Windows, this font rendering option that was inexplicably on by default, and resulted in horrible kerning and misshapen letterforms. I don’t claim to know a lot about the technicalities of hinting, but everything I do understand about it agrees that it is meant to improve the shapes of letters. If this is the case, somebody is doing something very, very wrong. I haven’t seen a hinted font that looked anything other than sickly and disheveled.

I’ve complained before about the typography in Ubuntu, but my contention then was with the fonts that were in use by default, not with the way they were rendered. What I didn’t realize at the time is that the rendering is the bulk of the problem.

applicationsmenuI found this image on the Ubuntu site, and I am still in disbelief that they choose to represent themselves with font rendering like this. Look at that capital ‘A’ and ‘V’; look at the way that lower-case ‘l’ towers over its neighbors, nothing more than a single-pixel-width vertical line; look at the kerning in the ‘Rem’ of ‘Remove’ – it’s no wonder Ubuntu has about a 2% worldwide market share. They expect people to want to look at that every day of their lives? I know these are relatively subtle details, but their effects are subliminal and, I believe, psychologically hazardous.

~/.fonts.conf

Of course, when it comes to Linux, for every problem there are a few dozen solutions – or one very, very complicated solution. GNOME, the default desktop for Ubuntu, arrives with a “Font Rendering Details” dialog box in its appearance settings, to placate the mouth-breathing philistines who need a GUI to get things done. And it doesn’t really help much. I knew I’d have to get my hands dirty in ~/.fonts.conf, this XML file that is capable (and only capable) of incredibly fine-tuned font tweaking.

[Fonts are] the #1 reason why Linux hasn’t seen any significant adoption on the desktop/laptop yet. Robert Scoble

The trouble, as is the case with most Google results you get when looking for help with Linux, is that there is a glut of quick fixes, blocks of code directed towards one specific person and their specific system, that they are then told to paste into a file or save into a directory, with little to no explanation about why this solution is going to work. Or there’s the technical documentation that isn’t geared towards users. There’s no middle ground (unless you count the occasional, skeletal wiki that hasn’t been updated since 2004).

Only after looking at countless ~/.fonts.conf examples was I able to glean what was going on inside them. The full power of this file allows you to target with amazing precision any variant or size of any font your system might display and give it its own unique properties; but there are really only three(ish) of these properties that you need to know about, and I am going to explain them here.

antialias

Anti-aliasing is the trick that makes your pixels not look like pixels. You’ve noticed this when you’ve seen poorly resized images with jagged edges – they’re not properly anti-aliased. Similarly, if fonts are not anti-aliased, they look like black Tetris pieces on a white background. Anti-aliasing is going on all the time without you knowing about it, and you’d really have to make an effort not to have it, but it’s worth putting in your ~/.fonts.conf file for good measure. You’ll want to apply it to all fonts on your system, so the syntax would be:

<match target="font">
 <edit name="antialias" mode="assign">
  <bool>true</bool>
 </edit>
</match>

You can probably figure out what these things mean, but I will link to a complete manual for ~/.fonts.conf syntax at the end of this post.

rgba

This one is a matter of personal preference, I guess. I don’t see how anybody of sound mind could stand to have pink, beige, and turquoise pixels sprinkled around the edges of their letters – the result of “sub-pixel rendering” – but I guess the argument is that it allows them to be sharper. Whatever.

Trust me when I say that things look best if you tell ~/.fonts.conf to disable sub-pixel rendering, which is done like so:

<match target="font">
 <edit name="rgba" mode="assign">
  <const>none</const>
 </edit>
</match>

If you happen to be schizophrenic, or colorblind or whatever, then yes, fine, you can turn on sub-pixel rendering by changing none to rgb, to reflect the composition of your monitor’s subpixels (which are almost certainly in the order Red-Green-Blue, from left to right). Have fun scratching your eyeballs out.

rgba=rgb

rgba=rgb

rgba=none

rgba=none

Admittedly it would be nice if there were some antialiasstyle property you could set to antialiasslight or something, to lighten up those gray pixels a little bit.

hinting / autohint / hintstyle

Put it on my tombstone: Turn Off Hinting. I’m begging you. If somebody tries to tell you that this is a matter of preference, they are lying to you, and are not your friend, and are probably banging your girlfriend. If you leave hinting on, Georgia will not look like Georgia, Lucida will not look like Lucida, and Nimbus will not look like Helvetica.

hintstyle=hintnone

hintstyle=hintnone

hinting=true, autohint=true

hinting=true, autohint=true

Here is how you Turn Off Hinting®:

<match target="font">
 <edit name="hinting" mode="assign">
  <bool>false</bool>
 </edit>
 <edit name="autohint" mode="assign">
  <bool>false</bool>
 </edit>
 <edit name="hintstyle" mode="assign">
  <const>hintnone</const>
 </edit>
</match>

Alternatively, if you positively demand more “crispness” from your fonts, even at the expense of aesthetics, you might want to give slight hinting a try. From the above code, change hinting and autohint to true, and hintstyle to hintslight:

hintstyle=hintslight

hintstyle=hintslight

That’s it, roughly speaking. It’s my understanding that some specific fonts do look better if specifically targeted and adjusted with maybe slight hinting. But that’s for another day. If you do as I’ve instructed, things will be so much better for you. Leave a comment if you want my PayPal address.

This post would not have been possible without the help of these sites:

  • ArchWiki: I know nothing about Arch Linux, but this wiki page has a lot of good info.
  • fontconfig.org: the most complete and recent ~/.fonts.conf reference I’ve found.
  • Ubuntu Wiki: contains an example of a very comprehensive (if dated) ~/.fonts.conf file. Study it and learn how to do other stuff.
  • The Masterplan: another sample ~/.fonts.conf file, and the only other one that I know of that turns off hinting and subpixel rendering.

34 Responses