I’ve been wanting to do a follow-up to the popular Typography in 8-bits: System fonts post and the 16-bit sequel for some time and recent Hacker News and ArsTechnica traffic reminded me that I’m not the only one nostalgic for chunky pixel fonts of old.
This time I’m focusing on a handful British machines that were much less well known around the globe which – all seem to borrow heavily from other machines!
Sinclair QL (1984)
256×256 (40×25 text)
512×256 (80×25 text)
Unknown Download in TrueType
The short-lived Sinclair QL was Sir Clive’s attempt at getting into the business market but the corner cutting on the CPU (a Motorola 68008 – the 8-bit data-bus version of the 68000) and storage (Microdrives consisting of loops of high speed tape instead of disc) meant it wasn’t taken very seriously. This was a shame as the operating system and software was advanced for its time.
True descenders making the font effectively 9 pixels tall
Single story lower case ‘a’
Squished lower-case ‘f’
Aligns braces and brackets to tightly wrap contents
Soft curves on ‘gil’
Unusual join on ‘k’
A rather tidy condensed font very similar to those used on LCD displays still today. Almost certainly looked good on a monitor although perhaps not using the system default colors shown here. Almost certainly too hard to read on a TV at the time.
Has similar proportions and characters to much of the Apple ][ font but with various visual improvements such as on the 6,9,2,$ etc.
Memotech were a peripheral maker who decided to get in on the action and produce their own machine in the 1984-1985 period that saw a lot of machines and failures. Despite some good specifications it never made a dent and its claim to fame is being the computer in the movie Weird Science.
Some very quirky decisions especially in lower-case
Awful character alignment especially on ‘q’
Uneven descenders on ‘gy’
Weird serifs on ‘adu’
This quirky font doesn’t looks okay on low-quality TVs of the time with oddities lost in the blur. On sharper screens it looks amateur and unfinished.
Despite some similarities in the upper-case to the Apple ][ font it doesn’t take many cues from anywhere else.
Alan Sugar’s Amstrad didn’t waste any time after the CPC in going after the business market with a range of cheap machines for word processing and other general tasks. In the UK these machines could be found everywhere either paired up with Amstrad’s own daisywheel or dot-matrix printers.
Pixels were actually rectangular (simulated here by doubling the vertical size)
Very distinctive curves on ‘CGOQ’
‘X’ looks like a different style because of high mid-point
These machines came with their own monochrome monitors and were very high resolution for consumers at the time. The font is not a bad choice and did allow for 90 columns of text but smarter alternatives existed in word processing programs such as Locoscript.
An almost direct copy of the Amstrad CPC font disguised by the double-height pixels. Actual changes are the 0 taking on the more oval shape, O and Q taking on the boxier shape and the apostrophe loosing its slant.
The PCW was not alone in using an existing 8×8 font in a double-height manner. The Atari ST, Commodore Amiga and Acorn Archimedes all used the same trick.
Acorn’s successor to the BBC Micro was a lovely piece of hardware with an all-new 32-bit RISC processor they developed dubbed ARM. While it did well in Acorn’s entrenched education markets it never found a foothold anywhere else. After various models they cancelled their upcoming Phoebe workstation (yes, named after the Friends character) and would concentrate on thin-clients before abandoning that and focusing purely on processor design where they had immense success. The ARM design now powers almost all the smart phones on the market today.
Pixels were actually rectangular (simulated here by doubling the vertical size)
These machines came with Acorn’s color monitors and were capable of running VGA-like resolutions. The GUI on these machines really missed an opportunity here to use a specifically designed font and to add proportional text printing and take on the Mac. Instead these used a scaled fixed-width font like the Amiga and ST despite being a couple of years late to that party. Proportional fonts were supported later.
Identical to the BBC font except for ‘^|’
SAM Coupé (1989)
256×192 (32×24 text)
512×192 (85×24 text)
Unknown Download in TrueType
MGT were a third-party producer of expansion products for the Sinclair ZX Spectrum who bet their company on a Spectrum successor using VLSI technology that would ‘rival an Amiga’ at a fraction of the price. While the machine was impressive by 8-bit standards when it finally arrived somewhat late and more expensive than originally touted it failed to make a dent as the market went to the 16-bit machines and it took MGT down with it.
Rather ugly ‘*’ asterisk
Inconsistent ‘.,;:’ set
Inconsistent ‘ and “
A smart font that despite the various inconsistencies looked good on a quality display in both high and low-resolution modes.
Almost a direct copy of the Sinclair QL font. The upper-case are identical and a most lower case with some exceptions to squeeze the QL’s 9 pixel high font into 8 pixels. This is especially apparent in the over-extended 7, the slashes and the bracket alignments.
One of the great things about working for Microsoft was the sheer breadth of the company means there are lots of cool and interesting things going on that you can peek into even if it’s not your area. With a few exceptions your Microsoft badge gets you into the whole campus (some of the Xbox studios and the executive floor are exceptions).
As many people know I have a bit of a passion for typography and the Microsoft typography team are a very nice bunch of people happy to humor a crazy enthusiast.
Before I left I paid one final visit to the typography team to snap some cool pics. Here they are, admittedly a couple of years late, with some additional typography-related snaps from elsewhere on campus.
Gabriola rendered in 4 level (2bpp) greyscale using 1x1x1 LEGO pieces.
Microsoft, Linotype and Hermann Zapf collaborated on Palatino Linotype and these beautiful posters commemorate the occasion.
The old Windows Start button in its pixelated glory alongside the Blue-themed XP replacement presumably rendered in photoshop.
Poster showing an italic single-story a aliased and then rendered with ClearType.
Lots of lower-case ‘e’ glyphs from various fonts on display in one of the Windows UI buildings.
Simon Daniels on the typography team has his surname in steel cut in Segoe.
The Mac Quadra that Vince Connare used to create the polarizing Comic Sans.
Microsoft’s XNA has had a bit of a bumpy journey but it does have a very cool logo with some subtle typography.
In our own Shark Tank scrum area we used the time-honored tradition of sticky notes to create pixels for our own sign. Subpixels were added later.
Our content management system’s sister team had their own sticky note sign too.
Even the product fair can’t resist some blocky 8-bit inspired fonts.
Somebody made their own pretty Microsoft logo. Don’t recall where this was…
The counter behind the Microsoft company store is an explosion of typefaces.
There’s something entrancing about the pixel. Square and elegant and when pushed by the right people they can form beautiful art, stunning animations and gorgeously crisp text.
But as resolution and pixel density increase these building blocks of the screen become smaller and individually insignificant especially as the dpi of displays hits 220+ppi. What once was a building block of art and design becomes nothing more than a indistinct element in a photo-realistic image or a glint in a faux-texture supporting a skeuomorphism.
And so the art style of the visible pixel is doomed… or is it?
A resurgence in retro games over the last 10 years has helped keep pixels front-and-center (and sometimes off-screen to the right in the case of horizontal scrolling beat-em-ups).
Minecraft brought 3D pixel art to the mainstream with its wild success across PCs, iOS and even the Xbox. Some people say it’s despite the graphics but I think they’re part of the charm.
Skrillex Quest is a 3D Flash game with textures made up of large pixels and all manner of 8 and 16-bit style graphic corruption that lends to the retro feel while music from the man himself ensures your ears stays as overwhelmed as your eyes.
Scott Pilgrim The Game is a fun little horizontal-scrolling beat-up up created a couple of years back. Some of the graphicartists have some great pages up showcasing their pixel animating talents.
Home from Benjamin Rivers is a creepy whodunnit horror mystery where the story unfolds and changes based on your own actions. Who knew pixels could be so creepy.
eBoy is a three-man team that has been creating isometric pixel art for years sometimes for magazines and adverts but primarily available as posters and wallpapers and now puzzles too.
Color Cycling revisits the technique of animating hand-illustrated Amiga artwork that achieved the effect of animation simply by cycling parts of the color palette. This effective technique was incredibly space efficient and was something every Deluxe Paint user tried (and likely failed) at some point.
Iotacons by Andy Rash are very low-resolution icons of various celebrities and well known pop-culture figures lovingly adorned in digital format and, on occasion, as a real-world cross-stitch.
DeviantArt have an entire category dedicated to pixel art many of which are lovingly animated. If the cuteness of these pixels doesn’t make you miss them then nothing will.
F David Thorpe produced some great loading screens for computers in the 80s despite their crazy technical limitations. Binary Zone has a great page that highlights some of his best.
I’ve covered some great pixel fonts from older 8-bit and 16-bit computers already but there are plenty more great examples to be found:
FontStruct is an online tool that lets you build fonts from blocks and so lends itself well to people wanting to reproduce bitmap fonts. They have almost 500 fonts in their gallery already tagged with ‘pixel’
Wikipedia has an excellent article on the screen resolutions and color capabilities of 8-bit and 16-bit computers. With such few colors available it was necessary to blend colors together to achieve the effect of more colors or shades. This tutorial at Deviantart is a good start although there are a few different algorithms available including the most famous Floyd-Steinberg and the ordered dithering of Windows older users may be familiar with.
Teletext (aka Videotex, Ceefax) was a low-resolution graphics system long before the Internet. It was available in some countries such as the UK via television and some early computer systems (Prestel, Micronet) used it over incredibly slow (1200/75bps) modems although it had a certain charm.
People are always surprised when they hear you’re interested in typography. The appreciation and interest in the shape of letters and symbols is definitely a little more unusual to find as a hobby but it’s actually quite fun!
Here’s a few ideas I hope will prove my point.
The Rather Difficult Font Game
This game shows you some text in a certain font then asks you to name the font from one of them in the list. It isn’t as difficult as the name sounds!
Deep Font Challenge
Head down to the shooting gallery to blow away the letters from the typeface he wants or doesn’t want.
Cheese or Font
Hmm, it’s odd how cheeses and typefaces often have similar names. See if you can tell the difference.
Many fonts contain extra information telling the computer how to adjust the spacing between individual pairs of letters. If you think of an AV for example the top of the V might start before the A ends or be very close. This game lets you move the letters around until you think you have optimal spacing then you can see how well you did.
The ultimate font game! See if you can reshape disported letters back to their original forms by adjusting the lines and bezier curves. The computer will score your efforts by comparing to the original.
Find a font
This newsletter is both infrequent and interesting so it gets to come directly to my inbox. It contains interesting new fonts, news and designer spotlights and is a great way of discovering new typefaces to use.
Asks you a series of specific questions about letters in the font on a continual process to narrow it down to the hopefully right one.
This tool is a little more automated, upload the picture and it should identify the letters although you may need to fine-tune the recognition (also available as an iPhone app)
Google web fonts
Monotype’s hosted service is similar to Google’s but contains just their own commercial fonts including well-known ones such as Museo, Gill Sans, Bodoni, Rockwell and many of Microsoft’s typefaces. Prices start at about $40 a year for small sites (250k visits a month) but they have 30-day free trials.
MyFonts have a huge collection of fonts – some 40,000+ – most of which are available to use on the web for the same price as buying the font. This makes it cheaper than FontsLive but you need to host the files and CSS on your own server.
These Helvetica based playing cards are very stylish, bold and modern. If you’re going to play cards why not do so with something a little different.
Get a daily dose of typography in this compact little desk calendar. The designer’s equivalent of a word-a-day.
Helvetica The Movie
Not just a movie about the design of this iconic font but also the modern movement it was part of. If you like this keep an eye out for Linotype: The Movie due in Feb 2012.
If any of that has been enough to pique your interest why not have a go at designing your own font?
FontStruct lets you start simply by building your own from a library of pre-build shapes you place on a grid. It’s like LEGO for typography and is very easy go get started.
If you have an iPad then you can also try out iFontMaker for an easy way to make hand-drawn fonts (it lacks fine editing facilities). I actually used a Pogo Sketch for my Damien Typewriter but it is too soft so you could try other styluses. Once you’re done it publishes to their web gallery where you can download the TrueType font and a Web Font too.
If you enjoy that but crave more control then try the free FontForge editor which runs on many platforms and lets you create real fonts or hack apart other peoples (remember to not redistribute changes to other peoples fonts unless the licence allows it).
If you get stuck on some letters then try my favourite Designing Type book that devotes a page or two to each common character and shows how a number of well-known typefaces express it.