37 blog posts categorised Typography

Using variable web fonts for perf

  • đź“…
  • đź“ť 1,345
  • đź•™ 6
  • 📦 Typography

Webfonts are now ubiquitous across the web to the point where most of the big players even have their own typefaces and the web looks a lot better for it.

Unfortunately the problem still exists that either the browser has to wait before it draws anything while it is getting the font or it renders without the font then re-renders the page again once the font is available. Neither is a great solution and Google’s PageSpeed will hit you for either so what is an enterprising web developer to do?

ZX-Origins - free 8-bit fonts for games

I started designing fonts around 1987 on an 8-bit Sinclair ZX Spectrum. Many years later, my involvement in the Spectrum emulation scene led aul Dunn to ask me if I could provide fonts for his excellent BASIN Sinclair BASIC for Windows. My interest in 8x8 fonts was suitably rekindled, and I ended up delivering about 60 — some even extracted from my original +3 disk images.

I wanted to get these fonts online earlier! Raw 7698-byte files, however, are only of use to BASIN users or those suitably familiar with the convoluted process and tools to get them into a Spectrum or emulator. Even trying to use them on Windows was a pain given that TrueType only cares about scalable fonts (SBIT embedded bitmaps are rare these days).

Typography on the Microsoft Campus

  • đź“…
  • đź“ť 363
  • đź•™ 2
  • 📦 Microsoft, Typography

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

Typography can be fun

  • đź“…
  • đź“ť 910
  • đź•™ 5
  • 📦 Typography

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 hopehope will prove my point.

Font hinting and instructing – a primer

Taking my bitmap font Envy Code B into the vector TrueType Envy Code R was a long process, the most difficult being hinting.

Bitmap fonts are incredibly easy to make. Using a program like Softy or BitFonter you decide the size of your letters and start plotting pixels. You can see exactly how it will look because you draw every glyph (letter/symbol/number) in every size you want to support. This can obviously be very time consuming and doesn’t let you take full advantage of the resolution of the device and the capabilities it offers. A printer can handle in excess of 300 dpi while a display is typically 72 dpi (Mac) or 96 dpi (Windows) with LCD’s supporting sub-pixels due to the individual layout of the red-green and blue elements you can’t feasibly pre-plot every single combination and even if you could the file size would be rather large.

The Xerox Alto mono-spaced font rises again

Computing history tells us of a mythical place where many of the innovations we take for granted today were either invented or refined to a working level at a single location known as the Xerox’s Palo-Alto Research Center (PARC).

These discoveries form the basis of much of the technology we use today and include the desktop metaphor, the graphical user interface, laser printers, object orientation and Ethernet.

Envy Code R preview #7 (scalable coding font)

It’s been a struggle but finally after countless hours here it is, the next release of my Envy Code R monospaced (fixed-width) font designed for programmers.

Many glyphs have been redrawn since preview 6 including braces, lower-case yy, 66 & 99, ampersand, dollar-sign, hash etc. One pixel was removed vertically height to make the box drawing balanced and allow more lines per screen.

May 2008 checkpoint

I am now settled into my new, albeit temporary, apartment here in Vancouver, BC working for Microsoft!

For those who haven’t been following my blog long I took a job at Microsoft Canada Development Center as a developer on LINQ to SQL. It turns out my H-1B Visa has been approved and I will be moving down to Redmond in October.

Getting the hint (Where is Envy Code R?)

I know, I said there would be a good chance that the next version of Envy Code R would be out this weekend but the annoying sizing, thickness and cropping issues that came up at some sizes above and below the optimum 10 point were really annoying me.

Many articles later, some playing around with Microsoft Visual TrueType and much frustration and experimentation later I think I’m on the right path.

Envy Code R coding font v0.7 preview

Envy Code R font preview #7 highlighting some of the characters in a chartThe next version of my Envy Code R font especially designed for programming (monospaced, easily distinguishable characters) is nearing completion and represents a very response-driven update to feedback, specifically:

I have also fleshed out a number of additional symbols and accented letters that has seen the number of code pages supported increase to 12 pages and made a large number of tweaks to the italic version which was a last-minute addition to 0.6 (PR6) and had a number of errors especially round the accented letters.

Droid font family courtesy of Google & Ascender

Google’s Android project, an open platform for mobile devices, has been hitting the news a lot in the last couple of days with it’s open APIs, Java-based development platform and optimized virtual machine.

One thing not too many people have yet been raving over is the lovely set of typefaces from Ascender Fonts known as the Droid family.

Droid Sans Mono great coding font

Google’s Android project, an open platform for mobile devices, has been hitting the news a lot in the last couple of days with it’s open APIs, Java-based development platform and optimized virtual machine which includes the lovely set of typefaces from Ascender known as the Droid family.

Check out previous coverage of the well-known and lesser-known coding fonts.

Professional quality free fonts*

  • đź“…
  • đź“ť 250
  • đź•™ 2
  • 📦 Typography

Every month FontShop make a font available for free for a limited time so grab it while you can. The best option is to join their monthly newsletter so you don’t miss one!

Ralph is behind the excellent Inconsolata font which is great for printing code or if you like large programming fonts. He also has a number of classical typefaces including the great ATF Century Catalogue, Museum Caps, LeBe, ATF Bodoni and ATF Franklin Gothic.

Envy Code R Jeff Atwood scheme

Jeff “Coding Horror” Atwood published a nice round-up of coding fonts he’s been looking at lately in Visual Studio with his own color scheme.

For reasons best known to Jeff he went with 11 point this time (previously his scheme was published with 10 point) and used the older preview of Envy Code R neglecting to mention the italic-as-bold variant to get round the no-italics limitation of Visual Studio’s highlighting syntax editor.

Red Hat releases Liberation fonts

Linux vendor Red Hat have released a font family named Liberation under a GPL license.

The family consists of three typefaces known as Liberation Serif, Liberation Sans and Liberation Mono each in normal, italic, bold and bold italic variants. The fonts are not hinted in this initial release so may not look too great on-screen at some sizes. Red Hat expect to release better-looking hinted versions in the future. Having attempted hinting Envy Code R font myself they have my sympathy.

Windows font evolution

  • đź“…
  • đź“ť 238
  • đź•™ 2
  • 📦 Typography

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.

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.

Preview of Envy Code R programming font

Envy Code R has been updated since this post.

My last post got me thinking — if I’m so happy with Envy Code B bar it’s ability to scale or take advantage of ClearType then there is only one real option. I reached for the pixelated TrueType conversion of Envy Code B and five hours later had a rough version of my first ever vector fontfirst ever vector font — Envy Code R.

Comparing programming fonts

The blogging about favorite programming fonts doesn’t seem to want to truly die down so here’s how I rate the most popular fonts for programming in descending order with my own Envy Code B which I use all the time — but now desperately needs the ClearType treatment.

If you click the image you’ll see red boxes highlighting what I feel are the various problem characters/positioning with each font.

Inconsolata OpenType programming font

Inconsolata font at 10pt and 12ptMy quest for something to replace Envy Code B on my ClearType-enabled systems continues.

It must be obviously scalable, mono-spaced (yes I know you cancan program with variable-width but I prefer fixed-width), have distinctive characters to help avoid confusion between 1il, o0OQ, $Ss8 at reasonably small font sizes — you know the drill.

Envy Code B font available in TrueType format

It’s been a long time coming but finally — a TrueType conversion of my programming font Envy Code B.

It’s still a pixelated font so will only look good at 10pt (on Windows, 13pt on the Mac). There is no bold or italic variants but this should be enough to get it into those elusive TTF-only applications like CodeSmith and Flash.

Palm OS font available

My conversion of the Palm OS system font — as seen on the Palm Pilot — is now available for download. I’ve re-created the original 7 point normal font, the 7 point bold and the 11 point larger text from Palm OS screen-shots.

If you need a really small proportional font that’s nice to read this could be what you’re looking for.

Envy Code A & Code B programming fonts updated

This month has seen my Envy Code A and Envy Code B fonts stumbled upon some 4,000 times thanks to a Digg to Keith Deven’s programming fonts page that links here.

I’ve taken this opportunity to update the fonts — Envy Code B had a couple of issues with mis-positioned characters in the 9pt version especially with “il#” characters in the bold one. Fixed.

ClearType, smoothed fonts and the bane of MS Sans Serif

  • đź“…
  • đź“ť 341
  • đź•™ 2
  • 📦 Typography

Back in the days of Windows 3.1, 95, 98 and Mac OS 7 the operating systems used a bit mapped font as the default system font for the various windows and dialogs.

Apple replaced their venerable Chicago with a scalable version that took advantage of font smoothing and moved on. By Mac OS X they switched to entirely new fonts such as Lucida Grande.