Ubuntu has a new font

2010-10-12 7:28 pm 2 Comments , and

Along with the release of 10.10, Ubuntu came with a new self-named font. I love it. It's quirky, yet very legible.

The font is open-source, with a pretty straightforward license, which comes down to: 'include this license when redistributing. There's very little good free fonts out there that actually allow you to embed it on your site, but with this one you can.

You can download the ttf's from here. Embedding it using css is easy:

  1. @font-face {
  2.         font-family: "Ubuntu Sans";
  3.         src: url('font/ubuntu/Ubuntu-R.ttf');
  4. } 
  5. @font-face {
  6.         font-family: "Ubuntu Sans"; 
  7.         src: url('font/ubuntu/Ubuntu-B.ttf'); 
  8.         font-weight: bold
  9. } 
  10. @font-face {
  11.         font-family: "Ubuntu Sans"; 
  12.         src: url('font/ubuntu/Ubuntu-I.ttf'); 
  13.         font-style: italic 
  14. } 
  15. @font-face {
  16.         font-family: "Ubuntu Sans"; 
  17.         src: url('font/ubuntu/Ubuntu-BI.ttf'); 
  18.         font-style: italic; font-weight: bold 
  19. }

This looked immediately brilliant on Firefox, but Safari acts a bit weird, only anti-aliasing some of the text after hovering over.

Be aware though, this will add about 1.3MB to your page. If you don't need some of the italic or bold variations, i'd recommend leaving them out.

On font and copyrights

On a more serious note, many people don't know that most fonts you buy for your websites are never allowed to be straight-embedded into webpages. I've seen a number of people embedding their fonts with either @font-face or the dirty (but impressive) cufon, or the worst of all worlds: sifr.

Technically, with any of these technologies you are not just using, but redistributing the font. When you buy a font you are basically only allowed to generate static images. This might not be a big deal for your personal site, but it's not a wise thing to do for commercial sites.

A case for table-based design

2010-01-12 1:06 pm 14 Comments , , and

"A topic that has been beaten to death."

Standards advocates have been largely against the use of the

tag. The idea is that it's used for positioning and design, while it really should only be used for real tabular data. HTML should be a document with semantic data, and not contain any presentation information.

So the response is that all kinds of new techniques are devised to easily make stretchable designs. I just got handed a template that uses one of these techniques, along with a couple of others. Here's a snippet:

I can't say I blame the author of this code. He's always been told

's are evil, and I have no doubts many 'experts' will suggest techniques like this.

There's no doubt this could be made much simpler even without using the

, but there's no way we can expect every junior frontend developer to memorize "1001 css hacks to make divs behave as a table".

The truth is, very little html documents are parsed by anything else but browsers and search engines. If an application's data is also consumed by other clients it will almost always be done through some kind of API or standard xml/json document. Even if html was used as a transport format, it will most likely be a specialized format.

Keeping HTML pure for data and CSS for presentation is a bit of a pipedream that never worked out. Even if you look at a relatively simple application such as Wordpress, every theme will have it's own HTML template, and not just a separate css stylesheet.

The point of my story is: HTML is read by browsers and developers. If you can make a brilliant HTML document and still keep pixel precision more power to you, but please keep things legible for the future developer that might need to fix a bug.

The upshot

CSS3 has support for multiple backgrounds, which will eliminate the need a lot of these problems. Safari has already supported this for a while, and Firefox will get it with the 3.6 release, and opera in 10.5. This leaves the browser that shall not be named.

CSS "projection" media type

2007-06-15 6:16 am 4 Comments , and
OperaShow

I tend to use Firefox pretty much all day, mainly because its such a great tool for development. Its hard to go without tools like Firebug when you're working on complex javascript applications.

Recently I have been more and more attracted to the feature-set of Opera. The latest gem I found was "OperaShow", which has apparently been around since the days of Opera 5 (they are on 9.2 at time of writing).

CSS2 defines the "projection" media-type, intended for use in presentations. Most of the same rules apply as with the "print" media-type. (CSS2 spec on paged media).

My next presentation will definitely be done using Opera and completely in HTML. I'd want to invite you all out to open up or download Opera, go to their tutorial and open up the fullscreen mode (F11 on windows).

 1

About

My name is Evert, and I've been writing semi-regularly on this blog since 2006.

I'm currently available for contract work.

more info.

Dropbox

Dropbox is a simple cross-platform online backup and sync application. The first 2GB of space is free, and both you and me get an extra 250MB extra space if you sign up through this link.