Hi. I'm Andrew

Filed under: typography

See all posts on posterous with this tag » 

Revised Font Stack | A Way Back

Media_httpwwwawayback_pjyrb

Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts.

Filed under  //   bookmark   typography  

Comments (0)

Linux Font Equivalents to Popular Web Typefaces

Like Windows & OS X, Linux does type too

I’ve been a Linux user for some time now, and Linux is my platform of choice both at work and at home. My distribution of choice is Ubuntu not because it’s the most popular, but because I’ve tried a wide variety of Linux versions, and Ubuntu works the best for me. I say this because I’m going to focus on the fonts that ship by default with Ubuntu, so there may be some discrepancy among distributions.

While the list of Web safe fonts we have come to know and love is relied heavily upon, it can be very beneficial to include similar default Linux fonts in your font-family as well.

Read the rest of this post »

Filed under  //   bookmark   fonts   linux   typography   webdesign  

Comments (0)

10 wonderful fonts you can embed with Cufon

Fertigo


» Get it

 

Delicious


» Get it

 

Tallys


» Get it

 

Museo Sans


» Get it

 

CA BND Bold WEB


» Get it

 

League Gothic


» Get it

 

Chunk


» Get it

 

Flaminia Type System


» Get it

 

Junction


» Get it

 

Andika


» Get it


Exactly what you needed? Yep. This collection by Cats Who Code is truly a gem. Previously I bookmarked creative ways of using Cufón. Now, these font collection are perfect for you to get started with Cufón without having to worry about legal issues with type/font licensing. :)

Filed under  //   cufon   typography  

Comments (1)

40 Creative Uses Of Cufón Font Replacement

Cufón has been growing in popularity among designers as an alternative to sIFR. I have personally used it on a couple website designs for clients now, and I have to say, it’s a great tool to add creativity to your website without cluttering it with a huge amount of image tags.

I went through the interwebs and scoured for hours upon hours (ok, maybe just 2) to find a showcase of some of the creative uses of the Cufón font replacement in action. Below are those websites. If you know of one (or you own one), feel free to drop a comment and let us know. :)

The Visual Click ↓

The Visual Click

Press 75 ↓

Press 75

Newlife Uniting ↓

Newlife Uniting

IceArt ↓

IceArt

International Rugby Association ↓

International Rugby Association

Phoenix Web Design ↓

Phoenix Web Design

view more via spyrestudios.com

Filed under  //   cufon   modernweb   typography  

Comments (1)

13 Websites with Inspirational Typography

Media_httpdesignblurb_jhuib

 

Filed under  //   bookmark   inspiration   style   trends   typography   webdesign  

Comments (0)

Getting Started with Typekit

The easiest way to use real fonts on the web

And here's my Demo using Bodedo Typeface

 

Filed under  //   bookmark   modernweb   typography  

Comments (1)

So you think you can tell Arial from Helvetica? Quiz

You got that one right! You answered 19 out of 20 questions correctly. Try Again? Be sure to visit the blog to share your score and
learn more about Arial and Helvetica.

Helvetica Arial

 

Wow. 19 correct answers out of 20 questions. I use two simple techniques on spotting the real Helvetica. It's the horizontal terminals of the letters and the letter form itself. :) Pretty cool ha?

Filed under  //   arial   bookmark   helvetica   quiz   typography  

Comments (1)

A better font rending in Ubuntu

I've been tinkering quite often ever since I upgraded from a Firefox 3.4 to Firefox 3.5 in Ubuntu Intrepid version 8.10. I wasn't satisfied as to how the fonts are being rendered. So I've searched for solutions or a workaround. I was glad that I found a tutorial via kilobitspersecond.com. I thought it was the best workaround available that the Web has to offer for Ubuntu users but I'm still wasn't satisfied of the output.

And Just recently, I've searched for a different solution and found this via linuxtidbits.wordpress.com. A workaround that's quite overwhelming when looking at the code for .fonts.conf file. But when I tried using it, for the first time I was satisfied of the rendering output both in Firefox 3.5 and the desktop system.


Here's the code I've used for ~/.fonts.conf script thanks to linuxtidbits.wordpress.com

<?xml version='1.0'?><!DOCTYPE fontconfig SYSTEM 'fonts.dtd'><fontconfig> <!-- General Settings --> <match target="font" >  <edit mode="assign" name="rgba" >   <const>rgb</const>  </edit> </match> <match target="font" >  <edit mode="assign" name="hinting" >   <bool>true</bool>  </edit> </match> <match target="font" >  <edit mode="assign" name="hintstyle" >   <const>hintslight</const>  </edit> </match> <match target="font" >  <edit mode="assign" name="antialias" >   <bool>true</bool>  </edit> </match> <match target="pattern" >  <edit mode="assign" name="autohint" >   <bool>true</bool>  </edit> </match> <match target="font" >  <edit mode="assign" name="lcdfilter">   <const>lcddefault</const>  </edit> </match> <!-- set dpi --> <match target="pattern" >  <edit mode="assign" name="dpi" >   <double>88</double>  </edit> </match> <!-- consolas and inconsolata appear fuzzy --> <match target="font">  <test compare="eq" name="family">   <string>Consolas</string>  </test>  <edit mode="assign" name="hintstyle">   <const>hintmedium</const>  </edit> </match> <match target="font">  <test compare="eq" name="family">   <string>Inconsolata</string>  </test>  <edit mode="assign" name="hintstyle">   <const>hintslight</const>  </edit> </match> <!-- hintmedium for small fonts, reduces fuzziness --> <!-- pretty sure this doesn't work --> <match target="font">  <test compare="less_eq" name="pixelsize">   <double>11</double>  </test>  <edit mode="assign" name="hintstyle">   <const>hintslight</const>  </edit> </match> <!-- calibri jaggedness --> <match target="font" >  <edit mode="assign" name="embeddedbitmap" >   <bool>false</bool></edit> </match> <match target="font">  <test compare="eq" name="family">   <string>Arial</string>  </test>  <edit mode="assign" name="hinting">   <bool>true</bool>  </edit>  <edit mode="assign" name="hintstyle">   <const>hintfull</const>  </edit>  <edit mode="assign" name="autohint">   <bool>true</bool>  </edit>  <test compare="less" name="weight">   <const>medium</const>  </test> </match> <match target="font">  <test compare="eq" name="family">   <string>Impact</string>  </test>  <edit mode="assign" name="hinting">   <bool>true</bool>  </edit>  <edit mode="assign" name="hintstyle">   <const>hintfull</const>  </edit>  <edit mode="assign" name="autohint">   <bool>false</bool>  </edit> </match></fontconfig>

Update: December 1, 2009
Thanks to @wilmon. If you happen to just let the font spacing/kerning to use the normal or default space, just comment out the following code block as seen below:

<!-- <match target="font">  <test compare="eq" name="family">   <string>Arial</string>  </test>  <edit mode="assign" name="hinting">   <bool>true</bool>  </edit>  <edit mode="assign" name="hintstyle">   <const>hintfull</const>  </edit>  <edit mode="assign" name="autohint">   <bool>true</bool>  </edit>  <test compare="less" name="weight">   <const>medium</const>  </test> </match> -->

And here are my screenshot font rending output. See the detailed comparison with or without using the /~.fonts.conf code. Spot the detail in spacing and the redish and greenish color surrounding the font/letter forms. See what screenshot is much more readable.

(download)

~.fonts.conf code courtesy via linuxtidbits.wordpress.com

Filed under  //   firefox   fonts   howto   typography   ubuntu  

Comments (9)

Ubuntu, Font Hinting, & You: A Cautionary Tale · kbps

~/.fonts.conf

Of course, when it comes to Linux, for every pro­blem there are a few dozen solu­tions – or one very, very com­pli­ca­ted solu­tion. GNOME, the default desk­top for Ubuntu, arri­ves with a “Font Ren­de­ring Details” dia­log box in its appea­rance set­tings, to pla­cate the mouth-breathing phi­lis­ti­nes 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 capa­ble (and only capa­ble) of inc­re­dibly fine-tuned font tweaking.

[Fonts are] the #1 rea­son why Linux hasn’t seen any sig­ni­fi­cant adop­tion on the desktop/laptop yet. Robert Sco­ble

The trou­ble, as is the case with most Goo­gle results you get when loo­king for help with Linux, is that there is a glut of quick fixes, blocks of code direc­ted towards one spe­ci­fic per­son and their spe­ci­fic sys­tem, that they are then told to paste into a file or save into a direc­tory, with little to no expla­na­tion about why this solu­tion is going to work. Or there’s the tech­ni­cal docu­men­ta­tion that isn’t gea­red towards users. There’s no middle ground (unless you count the occa­sio­nal, ske­le­tal wiki that hasn’t been upda­ted since 2004).

Only after loo­king at count­less ~/.fonts.conf exam­ples was I able to glean what was going on inside them. The full power of this file allows you to tar­get with ama­zing pre­ci­sion any variant or size of any font your sys­tem might dis­play and give it its own uni­que pro­per­ties; but there are really only three(ish) of these pro­per­ties that you need to know about, and I am going to explain them here.

antia­lias

Anti-aliasing is the trick that makes your pixels not look like pixels. You’ve noti­ced this when you’ve seen poorly resi­zed ima­ges with jag­ged edges – they’re not pro­perly anti-aliased. Simi­larly, if fonts are not anti-aliased, they look like black Tetris pie­ces on a white back­ground. Anti-aliasing is going on all the time without you kno­wing about it, and you’d really have to make an effort not to have it, but it’s worth put­ting in your ~/.fonts.conf file for good mea­sure. You’ll want to apply it to all fonts on your sys­tem, so the syn­tax would be:

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

You can pro­bably figure out what these things mean, but I will link to a com­plete manual for ~/.fonts.conf syn­tax at the end of this post.

rgba

This one is a mat­ter of per­so­nal pre­fe­rence, I guess. I don’t see how any­body of sound mind could stand to have pink, beige, and tur­quoise pixels sprin­kled around the edges of their let­ters – the result of “sub-pixel ren­de­ring” – but I guess the argu­ment is that it allows them to be shar­per. Whatever.

Trust me when I say that things look best if you tell ~/.fonts.conf to disa­ble sub-pixel ren­de­ring, which is done like so:

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

If you hap­pen to be schi­zoph­re­nic, or color­blind or wha­te­ver, then yes, fine, you can turn on sub-pixel ren­de­ring by chan­ging none to rgb, to reflect the com­po­si­tion of your monitor’s sub­pi­xels (which are almost cer­tainly in the order Red-Green-Blue, from left to right). Have fun scratching your eye­balls out.

rgba=rgb

rgba=rgb

rgba=none

rgba=none

Admit­tedly it would be nice if there were some antialiasstyle pro­perty you could set to antialiasslight or something, to ligh­ten up those gray pixels a little bit.

hin­ting / autohint / hintstyle

Put it on my tombs­tone: Turn Off Hin­ting. I’m beg­ging you. If some­body tries to tell you that this is a mat­ter of pre­fe­rence, they are lying to you, and are not your friend, and are pro­bably ban­ging your girl­friend. If you leave hin­ting on, Geor­gia will not look like Geor­gia, Lucida will not look like Lucida, and Nim­bus 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>

Alter­na­ti­vely, if you posi­ti­vely demand more “crisp­ness” from your fonts, even at the expense of aesthe­tics, you might want to give slight hin­ting a try. From the above code, change hinting and autohint to true, and hintstyle to hintslight:

hintstyle=hintslight

hintstyle=hintslight

That’s it, roughly spea­king. It’s my unders­tan­ding that some spe­ci­fic fonts do look bet­ter if spe­ci­fi­cally tar­ge­ted and adjus­ted with maybe slight hin­ting. But that’s for another day. If you do as I’ve ins­truc­ted, things will be so much bet­ter for you. Leave a com­ment if you want my Pay­Pal address.

 

This post would not have been pos­si­ble without the help of these sites:

  • Arch­Wiki: I know nothing about Arch Linux, but this wiki page has a lot of good info.
  • fontconfig.org: the most com­plete and recent ~/.fonts.conf refe­rence I’ve found.
  • Ubuntu Wiki: con­tains an exam­ple of a very com­prehen­sive (if dated) ~/.fonts.conf file. Study it and learn how to do other stuff.
  • The Mas­ter­plan: another sam­ple ~/.fonts.conf file, and the only other one that I know of that turns off hin­ting and sub­pi­xel rendering.

Well explained. I was searching for a proper solution since upgrading to Firefox 3.5 didn't allow to solve the font hinting issue.

Filed under  //   bookmark   fonts   howto   linux   typography   ubuntu  

Comments (1)