Archive for Fonts category

Typography on the Microsoft Campus

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.

Microsoft Typography


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.

Studios


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.

Elsewhere


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.

Some more

Check out Guerilla pixels via John Berry too.

You can see the full set including a few more shots, Sonic the Hedgehog and Lara Croft at Microsoft Campus on Flickr.

[)amien

Typography can be fun

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.

Play games

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.

Kern Type
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.

Shape Type
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

FontShop newsletter
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.

IdentiFont
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.

WhatTheFont
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)

So you need a typeface infographic
This flowchart takes you through a bunch of decisions to choose a typeface. Don’t expect to find anything too original though!

Smarten your site

If you have a web site you might want to look at using a custom font to help stand-out from the crowd now that they are compatible across many browsers. Yes, I should do this for damieng.com :)

Font Squirrel
Font squirrel have a great site full of many free fonts and have prepared the necessary font and CSS files required for the subset available for use on web sites.

Google web fonts
Google have almost 300 fonts available in their free web font directory right now and with just a couple of clicks can provide the necessary HTML, CSS import or Javascript necessary to use them in your pages. The fonts are served up from their servers too so you don’t need to worry about files or bandwidth.

Fonts Live
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 WebFonts
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.

Offline fun

Playing cards
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.

Typographical calendar
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.

Typography t-shirts
Zazzle has a lot of typography t-shirts as does TypographyShop and Ugmonk.

Create your own

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.

[)amien

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 Font Family (ZIP of TTF) (399 KB)

[)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.

[)amien