Ditching Lorem Ipsum

If you’ve ever created wireframes or mockups for a web app it’s likely you’ve encountered the problem of what to show in place of text content that hasn’t been written yet. The most common solution is to use a 2000 year old piece of latin text known as “Lorem Ipsum” (or one of the many hundreds of minor variations on it). The benefits of this text are that it has a, more or less, normal distribution of letters (that is, it’s reasonably similar to English) so it won’t distort the appearance of your app in the same way that simply pasting in repeated dummy text such as “This is test text. This is test text.” will. In addition, for most people, it isn’t readable. As such, it reduces the distraction of having irrelevant, but understandable, text on the page.

That’s the intention anyway. Despite this, there are still those who will be distracted by it and focus more on what it signifies (or doesn’t) than on your design. This leads to an obvious conclusion; rather than using “Lorem Ipsum”, why not display our wireframe’s dummy text in a font that has the shape of regular English sentences but is genuinely unreadable and, as such, never confused for real copy?

That is the role of Blokk. Available free in both ttf and web font versions, Blokk is a font made up of dashes. Cut and paste a few paragraphs of text from a Gutenberg book or an article from CNN, specify the font as Blokk,  and you’re done – a simple, effective, modern and distraction-free alternative to “Lorem Ipsum”.

The first paragraph of this post, rendered in Blokk Neue.
A sample paragraph of text, rendered in Blokk Neue; the font was coloured grey to further reduce the visual impact.



Abobe officially release the Source Code Pro font for coders

Adobe have officially released their new, free, font for coders – Source Code Pro – just a few days after it  debuted in the Brackets code editor. Unlike the version included with Brackets, SCP is now a complete family with Regular, Bold, Light, Extra Light and Black variants. If you already have the regular version shipped with Brackets installed you won’t notice any difference but, if your editor supports them, the new weights may make the update worthwhile.





Test run: Adobe’s new font for coders – Source Code Pro

UPDATE 25th SEPTEMBER: Adobe have now posted the full Source Code Pro font set (including bold, light and semi-bold faces) to SourceForge so there is no longer any need to extract it from the Brackets source, It can be downloaded from http://sourceforge.net/projects/sourcecodepro.adobe

When building the ideal coding environment there are changes you can make that will radically improve your productivity – a new editor, a good snippet manager, a validator, version control. Once these basics are in place the return from future changes will, almost certainly, decrease but that doesn’t mean that there are no further gains to be made – sometimes in unexpected places. One of these unexpected places is the font you use within your code editor. If you work in your editor 8+ hours a day then your choice of font could be crucial in reducing eye strain and increasing concentration.

At the start of August 2012 Adobe released their first open source type family, Source Sans Pro (SSP), primarily intended for use in their application user interfaces. Attractive those this font is (you can see it in use at brackets.io) it’s lack of monospacing makes it unsuitable for use within an editor. Luckily, at the time of it’s release, Adobe confirmed that they were working on a version of SSP more suited to code editing. This hasn’t yet been officially released but, with the Sprint 14 Build of the open-source code editor Brackets we have access to an early release version of this font, now known as Source Code Pro.

Source Code Pro sample characters


I’ve been using the font for the last few days and, so far, have found it more than capable. It’s not a radical change from my previous preferred font – MonteCarlo Fixed – but it’s an enough of an improvement to make me want to stick with it. For me, the ideal coding font should be monospaced, sans serif, loosely kerned, light and airy. In addition, each character must be distinct enough to avoid confusion, for example between 1 and l0 and oSource Code Pro easily meets all of these requirements. With the addition of some extra line padding top and bottom in Sublime Text 2, code becomes very readable and easy on the eye even over long periods of concentration.

Until Adobe officially release Source Code Pro (which they have said will be “soon”) the easiest way to try it out is by downloading the Brackets editor. SCP is used by default in this editor and can be extracted from the source for use within your own editor of choice. Brackets is hosted on GitHub so you can use your favourite Git client to pull the source or, if you don’t use Git, you can download and extract a zip of the source.

Downloading the Brackets source code as a zip file from GitHub


Once the source is downloaded (or downloaded and extracted) the True Type formatted font will be found at


Double-clicking on this font in Windows or OSX will install it, making it available in your editor.

If Source Code Pro doesn’t meet your needs but you think you’d benefit from a change of font, you may like to give Mensch or Inconsolata a try – both are very popular with developers.