Fixing jagged custom fonts

Fri, 05 Nov 2010 21:31:50 -0700

Using custom fonts, while usually great to spice up a site, can come with a couple drawbacks. One of which is that on some operating system/browser combinations they'll look jagged. Here's an example of what I'm talking about.

Some Googling turned up pretty much one solution: Turn on ClearType. Thing is, I don't want to turn on ClearType and I don't want to force my visitors to have to turn on ClearType so that option was out. After some tinkering with various font related styles I stumbled upon -webkit-text-stroke: 1px transparent; which appears to do the job. Here's an example of the same text with the above applied.

Does a pretty good job, huh? Unfortunately support for that CSS selector is pretty minimal it would seem, but you can achieve a similar result by instead using text-shadow: 0px 0px 1px transparent; Note that we're using transparent in place of an actual color, this is so we don't have to apply the code to every single thing that uses a different color, which would be a huge pain in the ass. You can also use rgba(0, 0, 0, 0);, it seems to achieve the same result. While looking around I found a site that actually references a similar issue. They also use custom fonts. Here's a before and after with applying the above to their site.

Permalink | Leave a comment »

Better CSS with Sassy

Mon, 03 May 2010 21:02:38 -0700

I've come to the conclusion that I am outright fed up with CSS. Organizing it, upkeep of it, repeating the same thing over and over, all of it sucks. What makes matters worse is that everyone has their way of doing it "properly" -- there are 1,650,000 pages that popup for a search of "how to organize css" -- that's insane. Jeff Atwood puts it a bit more concisely...

In short, CSS violates the living crap out of the DRY principle. You are constantly and unavoidably repeating yourself.

Because of the sheer amount of suck this causes so many people there are a ton of fairly nifty tools out there for mitigating CSS' short comings. One of which is called Sass which boasts nested rules, variables, and mixins. I love me some mixins. Despite being a Ruby gem, some good folks have ported the logic to PHP and made PHamlP. Now, I'm way too lazy to just run their code every time I need to make a new CSS from Sass so, I whipped together Sassy, a CakePHP 1.3+ plugin to handle all that for me. It really does nothing more than parsing the Sass files if they're newer than their CSS counterpart. Really. That's it. You can still use any asset packer you like, you don't have to change the way you include CSS files -- you just have to add one line to your AppController. If you felt so inclined though, there are a couple configuration options you have available to you:


// Look for files in /path/app/webroot/css/sass and save them to /path/app/webroot/css
Configure::write('Sassy.Recompile.Folders', array(
	'/path/app/webroot/css/sass' => '/path/app/webroot/css',
	'/path/app/webroot/multiple/folders' => '/path/app/webroot/are/awesome'
));

// Make Sassy check for updates on every other request (statistically)
Configure::write('Sassy.Recompile.Percentage', 50);

// If we get this named parameter in the URL, lets force a check for updates
Configure::write('Sassy.Recompile.Parameter', 'recompile');

The plugin is, at the time of writing this, still fairly new so there's a pretty good chance you may run into an issue with it. As always, if you find a problem or want to make it better you should feel free to fork the project and help out.

Permalink | Leave a comment »

joebeeson

Fixing jagged custom fonts

Better CSS with Sassy