Skip to content

Typography articles

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.

Canva’s 2015
Canva’s Design School list 100 free fonts that they think you should be using. Some nice entries and a reminder that sometimes free fonts aren’t to be found in Google Web Fonts.

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 people’s (remember to not redistribute changes to other people’s 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

Windows font evolution  

Vista and Office 2007 are interesting as they provide major user interface work that also includes new sets of fonts. I thought it would be interesting to show the evolution of the various styles.

Serif

Times New Roman has been the default typeface in Microsoft Word since version 1 and was originally designed for printing newspapers on high speed printing machines whilst still retaining legibility.

Curiously enough whilst Office 2007 provides a couple of new serif typefaces the default has switched to the sans-serif font Calibri although a number of the the themes within Office 2007 utilise these typefaces.

Serif font evolution in Windows

Sans-serif

The infamous Helvetica clone Arial primarily used for on-screen document-type work and even used in some applications user-interfaces throughout the years gives way to two new lighter fonts that like most of the new ‘C’ named typefaces rely on ClearType to look legible at small sizes.

Calibri is now the default font of choice for Word documents and will therefore probably become a familiar typeface in a short space of time.

Sans-serif font evolution in Windows

Monospace

Primarily used for programming and other environments that require it. At least all those programmers too lazy to try something else will enjoy Consolas as standard in Visual Studio 2007.

Monospace font evolution in Windows

User interface

The Windows user-interface switches to a new font once again despite large chunks of the Windows UI never making it past Microsoft Sans Serif (the scalable version of MS Sans Serif pictured below).

Interface font evolution in Windows

[)amien