Home

CSS

Moving Towards Voluntary DRM for Web Fonts

May 07, 2009

Lately the debate over fonts on the web has flared up again, and I find myself reading the same arguments over and over again. In particular, a lot of people seem convinced that widespread font embedding on the web would kill font foundries instantly. As a child of the internets, I respectfully disagree.

Think about it: we find ourselves in a world where, somehow, web designers are still making a living. They produce a product which consists entirely of unencrypted HTML, CSS and images, made available via a simple HTTP request. Ripping and hotlinking of design is frowned upon, and mostly limited to amateur users who use free services like Blogger and MySpace. Plus, we all know that often pirates are the kind of people who would not pay if the ripped material was not available for free, so there is very little actual revenue being lost here.

In fact, if we look at the actual professionals, we find that generally they treat each other's work with the utmost respect, and actively inform their colleagues of blatant abuse and stealing. We have a perfect example of a thriving industry which revolves around free distribution of copyrighted-but-DRM-free assets and which polices itself.

We're not that far from having something similar for fonts. Part of the problem is that the foundries are trying to protect their fonts by bringing out the lawyers. But so far, they've only managed to inconvenience and annoy their legitimate customers, for example with embedding restrictions on PDFs for screen vs print.

CSS Sub-pixel Background Misalignments

Nov 18, 2008

Update: and now, IE8 adds even more odd behavior to the mix!

A while ago, John Resig pointed out some issues with sub-pixel positioning in CSS. The problem he used is one of percentage-sized columns inside a container, where the resulting column widths don't round evenly to whole pixels or don't sum to the correct total. His conclusion is that browsers each have their own way of dealing with the problem.

I've recently been bumping into a related issue however, that shows the situation is even worse: rounding is inconsistent even inside a single browser.

Take the following scenario: a fixed width element that is horizontally centered in a viewport using margin-left: auto; margin-right: auto;. The viewport has a horizontally centered background image, having background-position: 50% 0. This is an extremely common page structure.

You'd logically expect the background image and the element to line up, and move as one when the viewport is resized. However, this is not the case. Depending on the viewport width, the background can be offset one pixel to the left or right. This obviously wreaks havoc on many designs. I decided to investigate this more closely and the results are not pretty.

Noir meets web

Oct 23, 2008

After 4 years of LeuvenSpeelt.be aka the Interfacultair Theaterfestival at my old university, the organisers are calling it quits. I was their resident web monkey, and designed a new site and poster every year. I always saw these designs as an opportunity to explore unconventional web design, as the sites were low on content and high on marketing — essentially being fancy brochures with a news feed.

With a track record of originality, I figured we should end it in style, so I whipped up a new page which explains the reasons for quitting (i.e. the politics) and highlights the work done with a timeline and some photos.

Welcome to the World of Tomorrow!

Jul 20, 2008

(with apologies to Matt Groening)

After about two years, it's time for another make-over of my site.

My last design had a relatively quirky look, with a bold red/yellow theme built from various irregular vector shapes. The idea was to step away from the typical mold of rectangular aligned frames on a page. I tried to incorporate some elements of perspective into the page composition, but it ended up being a relatively flat, geometrical theme.

This time I wanted to work on the depth aspect and try to create something that feels spacious. To do this, I based the entire redesign on a two-point perspective. While the content itself is normal 2D markup, it sits in a 3D frame.

OSCMS Talk: Designer Eye for the Geek Guy/Gal

Feb 14, 2007

Update: I've posted the presentation slides and a video is available as well.

I'll be attending the OSCMS conference in Sunnyvale CA at Yahoo next month. Aside from a repeat of my DrupalCon jQuery talk, (though with a bit more examples) I just submitted another proposal for a talk. It's something that I've wanted to do for a while now:

In meetings and lectures across the globe, people are made to endure hideous presentation slides featuring some of the wildest colors, clip art and typography. Many websites are so confusingly laid out, that you get dizzy from the overload of boxes, images or links. And every day, people receive resumés, invoices and ads ... *cue lightning and thunder* set in the Comic Sans font.

It's enough to make the average designer's hair turn blue, fall out, morph into a ninja and stab him/her in the eyes.

But, all hope is not lost! Contrary to popular belief, graphical design is not some arcane voodoo magic, but a straightforward discipline that values experience, reusability, elegance and good tools just like programming. Just like code, there are plenty of objective ways to measure the quality of a design. However, just like art is subjective, so may two programmers disagree on which implementation is the best. No designer is born with a genetic sense of proportion... it's just that while you were busy writing BASIC code on your C64, they were busy drawing superheroes.

I myself am an engineering geek who's never had any sort of formal design or art training, but has earned the title of "design nazi" on numerous occasions.

This session will teach geeks some basic principles about graphical design (especially on the web), from a geek perspective. This means we won't talk about "visually balanced design" but "here's a good approach to spacing". Soon, you'll be hearing the oooh's and aaah's when you don your designer hat.

You can vote on the session page if you're interested.

Images