Building optimum font stacks

Those of us with a development background, as opposed to design, often don't give typography much thought. We're most likely to pick a common font stack, say "Arial, Helvetica, sans-serif" and use it to death.

But typography is really important. It's only when you go to a website with clearly thought out fonts that aren't overused all over the web that you realise just how much difference they can make.

The problem for developers is that it's difficult to devise your own font stack without really understanding the attributes of the different fonts. Some are wider than others (x-width), others taller (x-height), some heavier, others look different on Windows and Mac. If you don't match them up well it can throw your design off balance.

This post on A Way Back talks about optimum font stacks. It includes a useful table that looks at the percentage of Macs and PCs with certain fonts loaded. It then takes a handful of websites as examples and makes suggestions as to the optimum font stacks for them. Less common fonts are moved up the stack so they're more likely to be used. Mac fonts are matched with similar Windows fonts. Fonts that are wider than the desired font are removed or replaced. And so on.

This is a useful resource for web developers, giving you much of the information you may require to design your own font stacks. Better than that, it gives some marvellous suggestions of font stacks that you can re-use on your own site.

Notepad++ Tips and Tricks

As regular readers will know, I'm a great fan of free software. I use Notepad++ for most of my code editing. Here are a few useful tips and tricks I've picked up along the way. Much of this stuff is standard for a text editor but not necessarily that easy to find in Notepad++.

1. View in browser: You can easily view your open HTML file in a browser by clicking on Run. Choose from IE, Firefox, Chrome and Safari. Or select Run... and browse to another executable. You can also update the shortcuts.xml file to add another browser, or change the location of a browser executable.
2. Basic version control: By turning on Verbose backup (Settings > Backup/Auto-Completion) you can set up Notepad++ to implement very basic revision control. Every time you save a file, Notepad++ will save a "clean" version in a backup sub-folder called nppBackup. That is, the version that you last saved, with none of your recent changes. The backup filename is appended with a date and timestamp so you end up with a new backup for every change. It probably goes without saying that it's a good idea to periodically delete the ones you don't want. Even if you're using some kind of version control this can be useful between check-ins.
3. Auto-completion: Whilst you're in the Backup/Auto-Completion screen set it to auto-complete functions.
4. Create templates: Notepad++ doesn't have the concepts of templates but I decided to set up my own. I created a templates folder and saved a few varieties of basic HTML files, including DOCTYPE, external CSS and JS calls, and an empty body tag. I did this for XHTML Strict and HTML4 Strict, with variations for JQuery and CSS 960grid. I open the relevant template and then Save As... to create my new file.
5. Close tags: You can use TextFX to automatically close any XHTML tags. Go to TextFX > TextFX > Settings > Autoclose XHTML/XML . There are a whole host of other useful TextFX features, such as converting case and quotes, escaping and unescaping characters, submitting to W3 validators, running HTMLTidy and a whole host of other features I haven't yet found a need for.
6. Create new tab group: Similar to Visual Studio's New Vertical Tab Group, you can view documents (or tabbed groups of documents) side-by-side using View > Move/Clone Current Document > Move to Other View. F8 then toggles between these views. Choosing to Clone effectively implements split screen and any changes made to one view of the document will be replicated in the other.
7. Use bookmarks to navigate large documents: When reading through large code files I often spend much of my time scrolling between two or more parts of the file. Clicking between the line number and the line adds a bookmark. I can then easily navigate from one bookmark to the next using F2 (down) and Shift+F2 (up).