Although Jardí mainly works on type for print, most of the rules also apply to type for the web. In this article I’m going to highlight five of his tips which are useful in deciding upon the right type for a project.

Choose just a couple of typefaces

One or more typefaces are enough for any work. You do not need more than that. A lot of typefaces equals a lot of voices. So the more we restrict our typographical palette, the more expressive resources we will use, like contrast, rhythm, symmetry, or movement.

You can, of course, work wonders with just one typeface and a lot of creativity; a prime example of that is from last year’s Seed Conference:

The whole thing was done in Times New Roman, with creative use of weight, style, and colour.

Do not choose two typefaces that look very much alike

Do not mix Futura with Helvetica. Do not mix Baskerville with Times. Using typefaces that are too similar is like ordering two scoops of ice cream, orange and tangerine.

A combination that works so well that it’s almost become a de facto standard is Georgia for headings, Verdana for body (as seen on A List Apart):

One of the reasons they work so well together is that they’re so distinct; headings stand out even more than they would with only a difference in height and colour.

Make sure that the typeface does not communicate something you do not want to communicate

Every font style explains something. There is no such thing as a neutral typeface; a neutral typeface transmits neutrality, and that is a message in itself.

In this example I’ve compared Archer and ClickClack:

While both have their applications, it’s pretty clear that ClickClack — the lower typeface — communicates an air of roughness, improvisation, even chaos, and probably wouldn’t be suitable for a sober business site.

Choose the typeface according to the size that will be used

As a guideline, you should know that typefaces for smaller body sizes have a wider structure and less of a difference in height between capital and lower-case letters compared to those used for titles.

For example, here’s a comparison of two typefaces, Georgia and Archer, displayed at a height of 14px:

Georgia’s upper– and lower-case letters are more similar in height, so much easier to read at a smaller font size such as this.

Reject fake bolds, italics, and small capitals

A fake bold has a crude, dense appearance, something a true bold does not have. True italics are not just slanted letters but a type with a different drawing than the roman type, especially in the case of serif fonts. An authentic small capital should have the same strokes as the capital letter that it corresponds to.

This is perhaps best illustrated by type designer Mark Simonson, in this comparison of true and fake italics.

I highly recommend you pick up a copy of the book; it’s small enough to be pocket sized, but packed full of useful advice. The only drawback for me is that it highlights all the mistakes I’ve made!

* To give it it’s full title: Twenty two tips on typography (that some designers will never reveal) / Twenty two things you should never do with typefaces (that some typographers will never tell you)

Royal.gov.uk highlights the worst elements of the practice of web development; on only the second page I visited it became obvious that the site hasn’t been tested on any browser other than Internet Explorer, and a peek at the source code left me shocked.

The testing is the most obvious fault; the comparison shots below (IE7 is first, FF3 second) immediately betray the lack of cross-browser coding. Click each image to show a full-page screenshot.

And the coding… oh my word. The markup is just plain terrible; completely non-semantic, it uses the div element to wrap everything. Everything. No joke. Page headers, text paragraphs, lists… everything. And I found closing body and html elements halfway through the document! See for yourself.

It just shows a fundamental lack of care.

Inline styles and JavaScript are used liberally throughout the site, including that persistent offender, the inline JS menu hover:

<div style="margin-left:0px;"
class="BPL_MenuLevel0"
OnMouseOver="PAL_MenuHover(this,true);"
OnMouseOut="PAL_MenuHover(this,false);"
id="TREE_972F516DD8244C8F8267312C9F26F3C2">
<a href="/TheRoyalHousehold/WorkingfortheRoyalHousehold/Whoarewe.aspx">Working for the Royal Household</a>
</div>

The home page fails HTML validation with 10 very basic errors, including <script language=“javascript”> instead of <script type=“text/javascript”>; an internal page taken at random fails with a whopping 82 errors.

I know that legacy systems can sometimes be restrictive and lead to invalid HTML, but I find it hard to believe that any developer worth their salt would continue to use a CMS which could produce so many egregious contraventions of standards. If inline JS & CSS and massively nested divs are the best a system can manage, better to implement a new one.

The underlying structure of this site is badly dated; we stopped writing code like that ten years ago. It’s a poor flagship site from people who can afford better, and an embarrassment to Sir Tim to be associated with it.

Finding Inspiration for Design (Patrick McNeil)

I missed the beginning of this, but it seemed to be pretty sage, if not rather commonsense, advice (don’t just use websites for web design inspiration), as well as some notes on current trends and tips on future ones; soft colours, more use of horizontal space, more video.

User Experience vs Brand Experience (Steve Pearce and Andy Clarke)

Set up as a confrontation, but in fact both speakers were at pains to point out that both should be thought of together. Andy Clarke adds: don’t be afraid to fail, we learn from our mistakes.

Sponsors Presentation: Silverlight

Oh dear. While the demo showed off Silverlight pretty well, the presenter didn’t. Already at a disadvantage by talking Microsoft in a room with a majority of Apple-heads, his nervous speech was uninspiring and he was almost yanked off stage.

Designing the User Experience Curve (Andy Budd)

How to ensure that the customer gets the information or experience they want from a website. Revealed: Silverback is a usability testing tool.

Photoshop Battle

Low point of the day for me. A panel of some of the top designers in the field swig beer on stage while teaching us nothing about Photoshop or their working habits. Pointless tittering smuggery.

Print is the New Web (Elliot Jay Stocks)

How to gain inspiration from print; not only in terms of typography, but layout too. Didn’t break new ground, but interesting and really nicely presented.

From Design to Deployment (Jon Hicks)

A polished presentation as always, but better for designers learning to be better coders than vice versa. How to set up your file structure, use grid layout, code across browsers.

Sponsors Presentation: AIR/Flex

Better than the Microsoft one, but still failed to captivate. What the new products can do, and how to add them to your regular work flow.

Unconventional Ways to Promote your Site (Paul Farnell)

Give away free stuff, get involved with message boards, blogs, chat forums, social networking sites; not that unconventional, surely? Pretty good for a first-time speaker, anyway.

Evolving the User Experience (Daniel Burka)

Better your site incrementally; listen to and learn from your users. Thought-provoking stuff, much of which is completely impractical for most coal-face web designers (I hope that phrase catches on).

I’ll write short reviews of the individual sessions at a later date, but my general opinion is that it was just OK; it dealt more in current design trends than future, almost all of which you probably already know if you keep up to date with sites like A List Apart or some of the better blogs. Although that’s not to say it was a complete waste of time; few of the speakers were less than interesting, and there are always new techniques to learn or existing techniques to reinforce.

Some of the speakers suffered from not having worked (or, at least, not for a long time) in a regular agency position (if I may coin a phrase, coal-face web development), and their advice was therefore useful on a theoretical basis only. Sure, it would be great if we could make mistakes in public and make constant revisions to our websites, but who pays for that? The client almost certainly won’t. We think ourselves lucky to have some clients who are savvy enough to make annual revisions to their sites! And while I’d love to just “get better clients”, that’s just not how the real world works for those of us who don’t work at start-ups or own our own agencies.

In summary, then, compared to last year’s @media, which I found genuinely inspiring, this was ‘only’ interesting. I’ll give careful consideration as to whether or not I attend again next year.

It requires that the site admin marks up the blocks that will be editable by adding class=“cushycms” to their containing elements; the web-based application will then automatically find each marked element in the pages you assign to it and open a text area (with or without WYSIWYG editor) allowing the user to edit.

In its current state it wouldn’t be suitable for sites with a lot of pages, but if you run a small, brochure-type site for a customer who wanted to make occasional updates, this could be a better solution in some cases than installing a full database-powered CMS.

I’d prefer it to have a better WYSIWYG editor, and it would be more useful if the interface could be branded and hosted on your own server. However, the creators are open to feedback and these ideas and many others have been suggested already.

While it may not (yet?) be the answer to all your content management requirements, CushyCMS is a neat, clever little app that would be useful for small businesses or for small clients. It’s currently in Private Beta only, but if you watch the introductory video closely, that won’t be a barrier to entry.

One of the first things I noticed was that the browser comes with a limited set of development tools built in. They’re not well integrated, they’re not very extensive, and they’re not easy to use; but they’re there.

The user interface is obviously still under development, and currently looks almost exactly like IE7. The address bar highlights the domain name, which is a nice touch, and there is a big ‘Emulate IE7’ button, but otherwise no big differences.

Microsoft claim the browser will be completely CSS2.1 compatible on release, so I checked out two of the bigger omissions from IE7: generated content and table displays. Both are now working, which is pretty impressive. Update: CSS Improvements in IE8; outline is new, as is z-index.

As for CSS3, I’ve written a little about that over at CSS3.info; in a nutshell: not much. Update: Interestingly, these are not listed in the CSS Improvements document; I wonder if there are any other undocumented changes?

For me, the biggest fault is the lack of SVG support. SVG is a mature standard now and well supported by all the other browsers, so for Microsoft not to implement it is a big blow; it effectively smothers the technology. Perhaps it will be included later; I really hope so.

Other observations from Al Billings, The Register (and again); Read/Write Web; more to follow.

First, the new password manager displays as a bar along the top of the screen rather than an alert, meaning you can see if your password works before choosing to store it. One small usability point is that the option ‘not now’ is displayed only as a close button; this appears at first as if your only options are ‘remember’ or ‘never’. Opera’s implementation is clearer on this point.

The intelligent history search now looks for words in the titles of pages, not just in the URLs. This is probably my favourite new feature of the UI; it’s incredibly useful if you can remember what a page was about, but not its URL. Opera, however, goes one step further and searches the content of pages in the history, meaning you can find what you want even if the page doesn’t have a logical title.

Places, the new Bookmarks functionality, allows you to tag and star your favourite websites then recall them quickly. It works a lot like sites such as del.icio.us or ma.gnolia.com, although without those two sites’ big advantage: getting to your bookmarks from different locations. The new Opera has the synchronize facility, which keeps your links current no matter where you log in from; this is a function that Places is crying out for. Otherwise, it’s a useful tool.

Of course, both browsers are in beta status at the moment, so plenty could change, but if Opera 9.5 already has my new favourite features, why will Firefox 3 still be my browser of choice? The add-ons architecture. Above all else, that’s why I keep loyalty to Firefox when I now have no shortage of options across the different platforms. Sorry, Opera; you make a great browser, but until you dump Widgets and allow extensions, you’re my second choice.

At first glance, it looks pretty similar to 9.2; the UI has had a few tweaks, but nothing major. I’m using the shared-QT version on Ubuntu, and it fits nicely into the OS’ look and feel; but then, I never had any complaints about the last version.

Of the new features, I think the History Search is my favourite; countless times I’ve scrolled through lists trying to find a page I’d viewed previously, looking at titles which aren’t descriptive of the new content. Opera holds page text in the memory too, which makes searching for keywords a snap; a nice feature, well done Opera team. Which will be the first browser to copy them?

The Synchronise feature sounds nice, although I’ve yet to try it out; I don’t have a My Opera account, and I only have one machine to look at it with at the moment.

The rendering engine is fast; they say it’s faster, although I’ve no way to benchmark that. I’ve spotted one or two glitches in rendering pages, but I guess you can expect that in an Alpha. They also claim that the JavaScript engine is faster and better; again, I don’t know about that. I tested it out on my JS-heavy Mint stats, and it struggled a little more than Firefox does.

I’m pretty excited about the new CSS and HTML implementation; it’s now the second engine, after WebKit, to correctly implement all the CSS3 selectors. It doesn’t look as if the latest version of Gecko will be able to say likewise, which is a shame.

My only disappointment was to see that the @font-face method of displaying web fonts was not implemented; after Håkon’s recent championing of the subject, I’d expected to see them break ground with this. Still, they’ve stated that new features could make it into the final release, so I’ll cross my fingers on that one.

There are only two things that stop me from using Opera as my main browser: the rich add-on architecture of Firefox (Opera’s Widgets just aren’t as useful), and a decent suite of developer tools. They say the latter is in development, so if they could just improve the former, I’d be a convert.

And with that, I’m off on holiday!

The first I noticed was the move to a newer, more Ajax–y interface a few months ago. The problems with Ajax are well-documented, and one of the major problems is what’s happened to Bloglines: they’ve broken the ‘back’ button. Previously, if I wanted to go back to a link I’d seen before, I could just hit ‘back’ and it would return me to what I was looking at; not any more, unfortunately.

Which brings me to the next problem: the ‘Display items in the last session’ option has been removed. In the event that I did want to go back and look at a link I’d seen before, I could have chosen that option and brought back all the category links I’d just looked at; now I only get the option to view by time (last hour, last 6 hours, etc). It’s not the same thing; if I’m looking at my links on a Monday morning and I hadn’t checked them over the weekend, I’d have to choose ‘last 48 hours’ and wade through potentially hundreds of posts looking for the one I wanted.

I wonder if they did any usability testing before making these changes? They may not be enormous, insurmountable problems, but they’ve certainly changed my opinion towards the service; for the first time, I’m seriously thinking of choosing a new provider. The question is: to what? Google Reader seems to be the most popular, but both the problems I’ve identified above are even worse with that; the ‘back’ button takes you out of the application entirely, and the archive feature only allows you to see all previous items.

I need a web-based feed reader so I can check my feeds anywhere, and one that doesn’t break the fundamental navigation principles of the web. I don’t need loads of bells & whistles, but I would like there to be a notifier extenstion for Firefox. Is there such a service out there?