Posts tagged web_design

Font Face

Ah, web typography. When I did my first website back in 1997, things were pretty much limited to a choice between Arial and Times New Roman. Then Microsoft introduced Verdana and a couple of others, and people found out they could get away with really small font sizes. Georgia was lovely but not for everyone, and Trebuchet… well it just replaced Arial in my mind. The fact remains, for the last twelve years designers had less than a dozen sure choices for web type, fonts readily available in both Windows PCs and Macs. Windows Vista introduced a few pretty good fonts (such as the Candara that used to be this blog’s first choice), and that had designers writing ridiculously large CSS font stacks in order to maintain a small amount of control. Some did go all the way and wrote scripts that replaced HTML text with Flash movies which had some font embedded, but that’s a pretty crude solution to a problem that should be easier to solve.

It took ten years but finally most browsers support font embedding. Internet Explorer is a nuisance, as always, because despite being the first browser to support embedding (since I first started making websites, in fact!), it does so through some peculiar font format which is incompatible with everything else. Anyway, I finally jumped right into the @font-face bandwagon. You should be reading this text in CartoGothic (Font Squirrel also has a pretty friendly tool to help with the CSS and the conversion to IE format); and the headlines should be set in Jos Buivenga’s Delicious. If you are using one of the latest browsers, that is. Enjoy!

Update: screw that, using CartoGothic brings too much of a lag on page load. So it’s back to Trebuchet. But I’m keeping the titles set in Delicious.

I spent some time rebuilding my portfolio website from scratch and by hand (meaning: Notepad — plusplus, to be precise), because the old site was at the same advanced (1990s) technology — think D-HTML — and absolutely ridiculous — think pop-up windows. I hope you enjoy the brand new iteration. Tips: 1. while browsing, move the pointer to the area where the image is to automatically enter a ‘theatre mode’ which hides the menu and centers the subject image; 2. you can also use the left and right arrow keys to navigate between pages.

The site is probably totally broken in some browsers, but worked fine in Webkit (Chrome/Safari) and Firefox 3, and also tested well in IE7 and IE8 (although somewhat uglier — rounded corners do a world of difference). So please, feel free to complain if something looks off — unless you’re using IE5 or something like that. And enjoy!

Neat tweaks

As anyone wiling to examine the source HTML of this weblog would know, my webdesign techniques are what people in 1999 would call the cutting edge. For instance, I still use a couple of table tags, because I can’t see where’s the cardinal sin in that, besides being a lot easier to make grids and to center stuff in tables. This is not what you call design correctness in this decade, but who cares — it’s my site and I design it as I please — just for Lynx even, were I in a retro-cyberpunk mood.

Anyway, since I started my master’s degree in multimedia, I’ve felt an increasing curiosity about new webdesign tricks, and I’ve spent some of my free time catching to the stuff I missed due to my cinematic adventures of the last eight years, therefore trying to relearn some Javascript in the time I would be playing Sudoku.

So here’s a neat trick for this weblog: I built from scratch some keyboard navigation! The left and right arrow keys skip through posts, Page Up and Page Down skip through dates. Tested successfully in Firefox, Chrome/Safari, and IE8! Enjoy.