Skip to content

Typography articles

Android’s Roboto system font for Ice Cream Sandwich  

Google have switched system font for Android’s latest release (known as Ice Cream Sandwich) from the Droid Family to a new typeface known as Roboto.

Typographica opened today with a critique of the Roboto font which boils down to this:

Roboto compared at Typographica

The similarity to Helvetica is obvious but that similarity can be drawn with many modern typefaces – the other comparisons are tenuous indeed:

  • FF DIN has little resemblance other than having straight edges on rounded letters. Lots of faces do that. Envy Code R does extensively :)
  • Myriad is more open in it’s whitespace, ends t with a slant and features a different approach to shoulders on mnpqr
  • Ronnia only shares the single horizontal stem which is also present in many monospace bitmap fonts

Yes, some of these differences are subtle when you put them side by side but subtleties are what give the typeface its character.

There are only so many ways to draw letters with consistency and readability especially if you want a modern sans look. That’s exactly why copyright refuses to cover letterforms in the USA.

So coming to the font itself at first glance, yes, on my laptop it doesn’t look as pretty as Helvetica when blown up for comparison but here’s something you should consider.

Typefaces are designed for a specific environment

Consider the following typefaces:

Use a typeface outside its intended environment and you’ll easily believe it’s a bad design, ugly or unrefined as those very characteristics that made it great for that environments completely fail to fit new surroundings.

Even the famous Helvetica has an environment of whitespace, bold colours and clean-lines where it shines. That makes it a top choice for corporate logos.

Roboto is the work of independent type designer Christian Robertson and until I see it on a Droid device I’ll cut him and Google some slack – from the screenshots I’ve seen online it looks like a good fit.

You have to at least respect Google for continuing to improve typography by commission fonts. Microsoft are the only other major UI player doing this as Apple’s sole contribution to typefaces in the last 10 years has been a hack-job on the open-source Deja-Vu Mono to rename it Menlo, move some bars around and to trash the hinting in the process so they have something to replace the ageing Monaco with.

If you want to download the font yourself here is a complete set of the files taken from the SDK (unlike the other zip floating around this one has all variants + the licence).

Download Roboto (2015) Font Family (ZIP of TTF) (1.2 MB)

[)amien

Typography in 16-bits: System fonts  

With the 8-bit system fonts post being so popular I just had to jump right in and look at the system fonts available on the 16-bit machines!

IBM CGA Adapter (1981)

Specifications

Bold serif
6-7 pixels
7 pixels
ASCII+code pages
320×200 (40×25 text)
640×200 (80×25 text)
IBM
Download in TrueType

IBM CGA system font in low resolution IBM CGA system font in medium resolution
The IBM PC’s first color graphics card was known as the Color Graphics Adapter.

Unusual characteristics

  • Mix of serifs and non-serifs depending on space
  • Off centre ‘|+:’
  • Squished ‘Q’ to avoid using descender
  • Wide ‘0’
  • Bubbly ‘!’
  • Inconsistent ‘t’ point and lack of serif on ‘j’

Rationale

The large bold letters work well on the low-resolution displays at the time and many of the quirky were unlikely particularly noticeable there.

Influences

Unknown.

Apple Macintosh (1984)

Specifications

Bold sans
1-11 pixels
10 pixels
Mac OS Roman
512×342
Susan Kare
Download in TrueType

Apple Macintosh 'Chicago' system font
Apple’s second attempt at a GUI (after the Lisa) was the Macintosh. The system font was called Chicago initially as a bitmap font which was replaced with a scalable TrueType version. With Mac OS 8 it was replaced with the similar Charcoal typeface and then dropped entirely in Mac OS X which uses Lucida Grande for the UI.

This font was dusted off again in 2001 and with a few minor tweaks became the system font of the iPod (classic & mini) until the higher resolution color display model.

Unusual characteristics

  • Proportional letters not fixed-width
  • Some symbols are not bold at all ‘#%”/\*@^`’
  • Lovely flourish on ‘&’
  • Curve on ‘a’ actually touches the lower bowl
  • Designed specifically to avoid diagonal strokes (jaggies) on the Mac’s low-res screen

Rationale

The high-resolution display let the designers really pay attention to detail and even though it was a 1-bit monochrome display it really looks beautiful for the time. It was little wonder that when Jobs went to NeXT they went with incredibly high-resolution monochrome displays again (at least initially and with 2-bit grayscale).

Influences

It’s unlikely they were digital.

Commodore Amiga 1.x (1985)

Specifications

Bold serif
6-7 pixels
7 pixels
ISO 8859-1
320×200 (40×25 text)
640×200 (80×25 text)
320×256 (40×32 text)
640×256 (80×32 text)
Unknown
Download in TrueType

Commodore Amiga 1.x 'Topaz' system font in low & high resolutions Commodore Amiga 1.x 'Topaz' system font in medium-resolution

The Amiga started with ex-Atari engineers desperate to design a 16-bit machine. It would eventually be purchased by Commodore and offer incredible graphics and sound that put Macs and PCs of the time to shame. Despite shipping with many fonts and supporting proportional text the default system font was a traditional fixed-width font called Topaz/8.

Unusual characteristics

  • As well as some letters touching some symbols such as ‘\/’ touched horizontally allowing nice ASCII art
  • Unusual lower-case ‘g’ somewhere between double and single story
  • Unusual almost comic-like ‘!’
  • Some non-bold pixels for flourishes on ‘t&’
  • Pixels missing on some curves ‘aS’ especially obvious in low resolution
  • Over-extended ‘r’ looks odd in any resolution
  • Alternate Topaz/9e – 10×9 (2 for descenders) – modified some glyphs like ‘g’ and available from Preferences as Text 60

Rationale

The Workbench booted in white-on-blue (shown) and was intended for use either with their own Commodore monitors or home TVs. Despite the choice of a serif font it worked quite well on these displays although interlace was quite unusable without specialized displays.

Influences

Very similar to the IBM CGA system font, very likely to be derived from there.

Technical

The Amiga shipped with it’s own font editor called ‘Fed’ found on the Workbench Extras disk in the Tools folder.

Commodore Amiga 2.x (1991)

Specifications

Bold sans
6-7 pixels
7 pixels
ISO 8859-1
Configurable
Unknown
Download in TrueType

Commodore Amiga 2.x 'Topaz' system font in low & resolutions Commodore Amiga 2.x 'Topaz' system font in medium resolution

Commodore’s update to the Amiga saw all sorts of changes in the ROM and Workbench for the GUI including some revisions to the font and the ability to change what font the workbench used.

Unusual characteristics

  • Over-extended top of ‘1’
  • Open elements on ‘%@’
  • Messy ‘Q’ is hard to distinguish
  • Alternate Topaz/9e – 10×9 (2 for descenders) – modified some glyphs like ‘g’ and available from Preferences as Text 60

Rationale

The Workbench booted in black-on-grey (shown) and the new font looked a lot more friendly as well as being a more legible choice for home TVs.

Influences

Obvious modification of the prior 1.x font to remove serifs and improve legibility.

Technical

WBScreen allowed you to choose which font to display in Workbench including some of the proportional fonts included.

Atari ST Low/Medium Res (1985)

Specifications

Bold sans
6-7 pixels
7 pixels
ASCII+proprietary set
320×200 (40×25 text)
640×200 (80×25 text)
Unknown
Download in TrueType

Atari ST system font in low resolution Atari ST system font in medium resolution

The Atari ST was Atari’s answer to the Commodore Amiga after they failed to purchase back the talent and technology. The machine’s GUI was based on GEM from Digital Research.

Unusual characteristics

  • Descenders are cut very short on ‘pq’ despite ‘gy’ not following this style
  • Inconsistent positioning between ‘,’ and ‘;’
  • Ugly braces ‘()’ from the 8-bit font retained

Rationale

The font was very clear and worked well in both square pixel (low resolution) and rectangular pixel (medium resolution) modes.

Influences

Almost identical to the Atari 8-bit font but with the capital letters, symbols and numbers extended a pixel higher (inverse symmetry was no longer a concern) and more consistent/cleaner lower-case letters ‘sj’.

Technical

It is possible to change the system fonts used by the GEM desktop using the ST Font Loader.

Atari ST High Res (1985)

Specifications

Bold sans condensed
6-7 pixels
12 pixels
ASCII+proprietary set
640×400 (80×25 text)
Unknown
Download in TrueType

Atari ST high-res system font

Unusual characteristics

  • Very tall letters – some glyphs 14 pixels high but still only 6-7 pixels wide
  • Avoids every trace of a serif except usual ‘Iil’ monospace hack
  • Short descenders on ‘pq’ still
  • Inconsistent choices for ‘c’ and ‘R’ and ‘w’

Rationale

Given that this screen mode was only available on high-resolution monitors it is very rectangular and failed to really take advantage of the unique situation in which it would be used.

Influences

Very likely based on the medium resolution font with some redrawing.

IBM PC VGA (1985)

Specifications

Bold serif
6-7 pixels
10 pixels
ASCII+code pages
640×400 (80×25 text)
Unknown
Download in TrueType

VGA DOS system font

Unusual characteristics

  • Very tall letters – some glyphs 14 pixels high but still only 6-7 pixels wide
  • Top bar of ‘T’ is two pixels thick
  • Too-high double quotes ‘”‘ also styled inconsistently
  • Another bubbly ‘!’ like the Amiga’s Topaz 1
  • Inconsistent sizing between ‘,’ and ‘;’
  • Very large ‘$’ even bigger than the capital ‘S’

Rationale

A reasonably nice serif font that gave a serious look if somewhat inconsistent in places.

Influences

Almost certainly based on the original CGA font.

Technical

Can be overridden by tools like fontedit.com.

For more analysis read Typography in bits: Other English micros or Typography in 8-bits: System fonts

[)amien

Typography in 8 bits: System fonts  

My love of typography originated in the 80’s with the golden years of 8-bit home computing and their 8×8 pixel mono-spaced fonts on low-resolution displays.

It’s quite easy to find bitmap copies of these fonts and also scalable traced TTF versions but there’s very little discussion about the fonts themselves. Let’s remedy that by firing up some emulators and investigating the glyphs.

Commodore PET (1977)

Specifications

Regular semi-serif
5-7 pixels
7 pixels
PETSCII
320×200 (40×25 text)
Leonard Tramiel
Download in TrueType

Commodore PET

Commodore’s first business machine was the PET which came with a built-in monitor and a full character set unlike other machines at the time.

Unusual characteristics

  • Primarily sans-serif but serifs present on ‘BDJa’
  • Slightly stylized ‘£’

Rationale

The font is good choice for the original PET and its original monitor. It was unfortunately also used on the Vic-20 despite having half the screen resolution where it made a poor choice.

Influences

While not visibly influenced from anything else an almost direct rip of this font appears to have been used in the Apple Lisa debugger.

Technical

Unknown.

Apple ][ (1977)

Specifications

Regular condensed sans
3/5 pixels
7 pixels
ASCII
280×192 (40×24 text)
Signetics+?
Download in TrueType

Apple ][ system font

Apple’s first professionally built computer was the Apple ][ which from rev 7 onwards added lower-case letters.

Unusual characteristics

  • Uppercase letters can touch descenders on the line above as the full height is used
  • Only first 7 columns per glyph otherwise would have been 35×24 text
  • Vertical stems for ‘[]{}’ are 2 pixels wide (bold)
  • Very small slashes ‘/\’
  • Upper-case is consistent although ‘A’ is very angular, ‘G’ unpronounced
  • Lower-case less consistent – ‘gf’ has soft curves, ‘mw’ square, ‘nhr’ ignore curve of ‘u’
  • Numbers – unusual ‘3’ but ’96’ over-extend

Rationale

The font is well suited to the default high-contrast white-on-black (often green-on-black) given the machine was intended for use on their own monitors.

Influences

The upper-case, numbers and symbols were copied from the Signetics 64 × 8 × 5 character generator 2513 chip used in the Apple I and II in revision 0 to 6.

The later Texas Instruments TMS9918 Video Controller Chip used on Sega, Nintendo, Colecovision and TI/99 machines re-used this font with only a couple of pixels changed.

Technical

Changing the font requires replacing the 2 KB 2716 pinout ROM with your own EPROM or alternate ROM.

Atari 400/800 (1979)

Specifications

Bold sans
4-6 pixels
6 pixels
ATASCII
320×192 (40×24 text)
Unknown
Download in TrueType

Atari 8-bit system font

Atari’s entry into the home computing market put out some very capable machines with all sorts of hardware tricks (the creative geniuses behind it would go on to form Amiga). The same font was used on all Atari 8-bit models from the original 400/800 to the XL and XE models in the late 80’s.

Unusual characteristics

  • 6 pixels uppercase causes some vertical imbalance especially on ‘9’
  • Braces are overly bold being 3 pixels wide.
  • Less than and greater than symbols are too tall.
  • ‘MWw’ make great use of width to nice effect
  • Bar on ‘G’ too low, ‘U’ overtly square, ‘X’ very blocky, ‘S’ does not extend enough

Rationale

The machine boots in a low-contrast blue-on-blue and is designed for use with TV’s which explains some of the odd characteristics above like the square U to distinguish it from the V. It is likely the 6-pixel choice is to allow the letters to be centered when using inverse letter mode.

Influences

Adapted from Atari’s arcade font quite likely by Lyle Rains and/or Susan McBride.

Technical

One byte per row, 8 sequential bytes making one glyph. You can reprogram this by poking address 756 with the page number of the new font (default of 226 for ROM location 0xE000).

POKE 756, 226

Acorn BBC Micro (1981)

Specifications

Bold sans
4-7 pixels
7 pixels
ASCII only
320×256 (40×32 text)
Unknown
Download in TrueType

BBC Micro mode 1 system font

The Beeb, as it was affectionately known, has its own font which could display in three different modes – one wider and one narrower but many users might not recognize it all as it booted into ‘Mode 7’ utilizing a Videotex chip (used in the UK for text-on-TV and travel agents as well as in France for Minitel) that had a different font of its own.

Unusual characteristics

  • Drops bold in tight spaces e.g ‘$&@’
  • Outlines the tail on the ‘Q’ to make it much clearer
  • Unique and beautiful ‘*’
  • Does not extend low bar on ‘e’ as much as expected and ‘f’ seems to wide
  • Vertically squished ‘?’
  • Style of single-quote ‘ is inconsistent with comma

Rationale

The machine generally shipped with good quality monitors and the combination of high-contrast colors and this bold font made it very readable indeed.

Influences

It’s quite likely it was influenced by the Atari 8-bit font but with larger capitals and ascenders and a much more consistent look.

Technical

The system font is stored at 0xC00-0xC2FF with each character being represented by 8 sequential bytes (left pixel is high bit).
You can replace the font used by system text routine OSWRCH (0xFFEE) using the VDU command 23 followed by the ascii code and then 8 rows of data, e.g.

VDU 23,65,11,22,33,44,55,66,77,88

Sinclair ZX Spectrum (1982)

Specifications

Regular sans
6 upper, 5 lower
6 pixels
ASCII + own
256×192 (32×24 text)
Nine Tiles
Download in TrueType

Sinclair ZX Spectrum system font

Sinclair’s successor to the ZX81 added color and lower-case letters – again preserving the upper-case and numbers from it’s predecessor but finally mapping them to ASCII. This font was re-used on Jupiter Ace and Timex machines but the ZX Spectrum was the most popular.

Unusual characteristics

  • 6 pixels uppercase leaves many unevenly balanced ‘BEFS’ and ‘X’ with ugly 2×2 center
  • Full stop is 2×2 pixels (bold) but colon, semi-colon and comma are not
  • Capital ‘MW’ are very slight with latter hard to distinguish from ‘V’
  • Uneven styling ‘c’ omits curves, ‘e’ is soft ‘g’ is not, ‘f’ and ‘k’ are thin
  • Only the copyright symbol uses to the top row of pixels

Rationale

While the machine has a default high-contrast scheme the video output was poor because of the quality of the RF modulator and home TVs it was connected to. It looks like the designer decided to increase spacing between letters after the ZX80 from one to two pixels which greatly limited what could be done with the letters themselves. This was likely done for the same reasons it was done on the Atari 8-bit – namely to allow the letters to be centered when using inverse text modes.

Influences

Sinclair ZX81 (no lower case), ZX80 (7 pixels wide).

Technical

The system font is stored at 0x3D00-0x3FFF with each character being represented by 8 sequential bytes (left pixel is high bit). You can replace the system text routine (RST 10) by poking the new fonts memory address into the system memory map at 23606/23607 minus 256 bytes (the first 32 characters are non-printable, 32×8 = 256)

LOAD "newfont" CODE 49152, 768: POKE 23606, 0: POKE 23607, 191

Commodore 64 (1982)

Specifications

Bold sans
6 pixels
7 pixels
PETSCII
320×200 (40×25 text)
Unknown
Download in TrueType

Commodore 64 system font

Commodore took to take their success with the PET and applied it to the home first with the VIC 20 and then later with the wildly successful Commodore 64.

Unusual characteristics

  • Inconsistent shapes/style across ‘147,&<>@Q’
  • 2×2 pixel of ‘.’ is not carried through to ‘;:!’
  • Ascenders not as tall as capital letters

Rationale

The bold font was essential for the low-quality TV’s Commodore were aiming at. The inconsistencies across the font may have been intentional to help make the letters look different (A vs 4, 1 vs I, 7 vs T) given the limitations of the displays or just poorly implemented (see below).

Influences

Lower-case is identical to the Atari 8-bit font and likely copied wholesale as they do not match the upper-case well. Symbols, numbers and upper-case are a bolded version of the PET font that looses the serifs and also could explain the odd reproductions of 1, 2, 7 & 4.

Technical

See comment from Paolo below for details!

Amstrad CPC (1984)

Specifications

Bold serif
6-7 pixels
7 pixels
PETSCII
320×200 (40×25 text)
Locomotive Software
Download in TrueType

Amstrad CPC system font

Alan Sugar’s foray into the UK market came a little later than the other 8-bits in 1984 with the Amstrad CPC series.

Unusual characteristics

  • Full use of 7 pixels for upper and 1 pixel for lower means glyphs can touch
  • Serif choice is unusual and not consistently applied because of space constraints
  • ‘0’ is wider than would be expected (copied from CGA font)
  • Very distinctive curves on ‘CGOQ’
  • ‘X’ looks like a different style because of high mid-point

Rationale

Sugar wanted the machine to look more professional than other home computers at the time. The choice of a serif based font to look like PCs which also featured serifs (at a higher resolution) reflects that desire.

Influences

Very similar to the IBM CGA font with some adjustments (fixes) to the horizontal positioning of some symbols. Many characters completely identical and some bearing style similarities too (wider 0, X choosing one side to be longer than the other). Some other characters bear similarity to the BBC Micro (Q uses the same trick to keep it distinguished) and a number of symbols and lower-case letters being the same where serifs would not fit.

The Amstrad CPC manual shows the system font but is different in some areas. It is possible it is a transcription problem (z is shifted up one pixel, missing pixels on ’37PRz~’ and extra pixels on ‘#b’ ) although it could have been an earlier version from the designer as ‘rG?’ are subtly different.

Technical

Redefine using the Amstrad BASIC command SYMBOL that takes an ascii code and then 8 comma-separated values one-per-row in much the same way as the BBC with the VDU 23 command. SYMBOL AFTER must be set first e.g.

SYMBOL AFTER 32
SYMBOL 65,11,22,33,44,55,66,77,88

MSX (1983)

Specifications

Regular condensed sans
5 pixels
7 pixels
ASCII Extended
320×200? (40×25 text)
Microsoft?
Download in TrueType

MSX system font

The MSX differs from the other machines here in that it was a standard rather than a specific machine. It was very popular in Japan and did hit UK shores although I only knew a single person that had one apart from our school which had acquired several Yamaha models to control MIDI keyboards. Given the multiple manufacturers it’s not surprising that some models had slightly tweaked fonts but the one shown here seems to be the most popular.

Unusual characteristics

  • Full use of 7 pixels for upper and 1 pixel for lower means glyphs can touch
  • Only 5 pixels wide for the letters
  • Pixels touching on the curves of ‘db’ etc. look quite ugly
  • Very angular curves on ‘5’

Rationale

An unusual choice that feels very quirky.

Influences

Most likely influenced by the Apple ][e.

Technical

Unknown.

For more system font analysis read the sequel Typography in 16-bits: System fonts.

[)amien

Five steps to blog (re)design  

For some time I’ve wanted to refresh the design here at damieng.com which evolved out of the Redoable theme with my own tweaks to colours, typography, images and background until it was almost my own.

Almost, but not quite.

As an engineer I prefer incremental improvement over a complete redesign but I was at the point where the code-base (HTML, CSS and PHP) was unworkable. Partly my fault, partly the sheer complexity of a general-purpose theme with wide-ranging plugin support I didn’t need.

These are the steps that helped me get to a  clean minimal code-base that did exactly what I wanted and would like to share the experience for friends about to go through a similar process.

1. Decide on a layout

Layout of DamienG.comGetting layouts right across browsers can be tricky.

Thankfully a number of individuals have put together a number of reusable CSS frameworks that provide grid-based approaches to layout, compensating for differences in browser defaults and including some minimalistic styling.

These let you hit the ground running but they are not complete themes unless you’re into minimalistic design.

I’m not a fan of fixed-width sites that contribute to the years of wear on my scrolling mouse finger so settled on the Fluid 960 Grid System which scales a 12 or 16 column grid system out to the full browser width while being incredibly easy to use and tweak.

At this point you’ll want to copy the CSS they provide into your own development folder and take the existing HTML sample page and cut it down to the bare minimum of <head> and its necessary <link…> elements to setup the CSS plus the <body> and any intermediate child elements required to get the basic structure in place.

Now think about how many columns each section needs to cover and whether it should continue taking columns to the right or whether it should start on a new row after the existing section has finished.

Given I wanted the layout shown above I needed just three containers – the primary left area (red) would span 12 columns and would contain the branding, navigation and actual content. The right area (blue) would span 4 columns and contain the sidebar. As I didn’t want my footer too high on pages with small amounts of content I created another section (not pictured) that also spanned 12 columns but would appear after the content in both sections. Simply:

<body>
<div class="container_16">
   <div class="grid_12">
       <a href="//damieng.com/" />
       <ul class="nav" />
       <div id="maincontent" />
   </div>
   <div class="grid_4" id="sidebar" />
   <div class="clear" />
   <div class="grid_12" id="footer" />
</div>
</body>

2. Add your content

Unless you’re planning on throwing away any of your content (not recommended if you have it), now is the time to drop in actual content, navigation and any chrome. At this stage real static HTML content is best – the combination of PHP, remotely uploading files and hooking in to dynamic content can really slow you down while you are trying to get the basics sorted.

The easiest thing to do here is to just view source a page on your blog and copy out the required blocks. For me this was:

  • Two blog posts from the main page, they sit in the maincontent div above, each contained within a new <div class=”article”> so I can provide article-specific styling
  • A brand new set of nested navigation elements created by hand based on the page structure – initially two levels deep to support the drop-down CSS menus
  • My five sidebar elements – Search, Stay in touch, Topics, My most popular and Interesting finds

Bear in mind that you are going to need to keep the structure and content of your existing pages and articles unless you have the time to either go-back and edit each one or apply some bulk-changes via SQL UPDATE statements. For me, this meant keeping my post sub-headings as <h3> and sticking with my class=”alert”, class=”code” and  class=”download” blocks I use for notifications, code snippets and downloads which required bringing some CSS elements in from the old theme.

3. Style the page

Design inspiration can come from many places – here are some best-of designs, portfolios and showcases to draw from:

Now you have some basic HTML and CSS displaying real content it’s easy to see what works and what doesn’t with minimal resistance to experimenting.

I was happy with the existing look and I plan on further tweaks now my code-base is easy to understand so for now took the basic colours, background and icons then adjusted the layout, spacing, positioning, wording and elements like the content metadata. This was also an opportunity to experiment with some CSS techniques available but considering CSS3 browser support is limited right now I kept this to:

  • @font-face for headings – Font Squirrel have a great set of @font-face kits including fonts with the CSS snippets
  • text-shadow for headings and hyperlink hover-overs to achieve a glow effect
  • border-radius for curved blocks and navigation bar (also used prior to the redesign)
  • JavaScript to upgrade the search-box from type=”text” to type=”search” in Safari

The result is something that looks quite unique on Safari and Chrome yet still looks good on Internet Explorer 7.

4. Convert to a theme

Now our CSS and HTML looks great as a single page we need to create a theme for the blog engine. This consists of several specially-named files to dynamically construct the page as required.

You can build this from scratch but a basic theme like Starkers ‘naked’ WordPress theme is recommended. Merge the layout and style of your theme with the dynamic tags that drop in content, navigation and titles in from the basic theme. A quick start would be to modify:

  • header.php with your HTML up to opening your main content div but:
    • remove <link type=”text/css”> elements to the CSS and replace with the one line <link> from the theme
    • replace the static navigation elements with a call to a function to dynamically build it such as <?php wp_list_pages(‘depth=3&title_li=’); ?>
    • links for shortcut icons and ensure they point to files that exist, you don’t want to be serving up 404 error pages every time
    • meta tags – take the dynamic ones with <?php?> elements (content-type, description etc). from the theme and merge them with your sites existing ones if you have any
  • sidebar.php with your HTML from closing the main content div through to closing the sidebar div
  • footer.php with your HTML footer div (and in my case the preceding clear div) through to the end of the file
  • single.php with your HTML that appears around each article with the necessary tags (like <?php the_content(); ?> taken from the naked theme)
  • style.css with relative references to your CSS files and your new metadata, e.g.
/*
Theme Name: DamienGNew
Theme URI: //damieng.com
Description: Minimalistic theme based on Fluid 960 Grid.
Version: 1
Author: Damien Guard
Author URI: //damieng.com
*/
@import "css/reset.css";
@import "css/grid.css";
@import "css/damieng.css";
@import "css/navigation.css";

Rename the theme folder and upload it to your blog in the right location – for WordPress this is wp-content/themes.

5. Test drive, tweak, rinse and repeat

Now you want to test the theme without interrupting the existing one so don’t go and set it to be the default just yet.

If you are using WordPress a few tips:

  1. WP Super Cache enabled sites – check Don’t cache pages for logged in users so you don’t see cached pages in the original theme pages or serve up pre-cached new themed pages for other visitors
  2. Theme Test Drive – lets you specify a new theme and what access level it applies to (e.g. 10 for admin) so you will see it while you are logged in for testing
  3. Page templates –  leave them to last as WordPress will try to use them in the default theme too
  4. Keep an eye out for error_log files – they contain details of when pages failed

It’s worth testing your site in popular browser and operating system combinations from your own analytics or you don’t have any of your own stats check out usage share of web browsers at Wikipedia. The major engines are:

  • Internet Explorer (Windows)
  • WebKit (Safari on OS X, Chrome on Windows & Konqueror on Linux)
  • Gecko (Firefox cross-platform & Camino on Mac)
  • Opera (cross-platform)

Bear in mind that each browser can behave quite differently between versions – Internet Explorer 6 will likely render quite differently to 7 or 8.

Sites like BrowserShots can help by rendering your page on a multitude of browsers for you and present screen-shots (once the theme is live) to compare. Validating your HTML and CSS is a good idea because the errors and warnings it spots are the likely cause for odd rendering problems.

Now you see a single blog post rendered it’s time to go through the rest of the files and apply the same merging process before you sit back, smile and make your new theme the default.

[)amien