LH Line1 Sans: Story of trying to draw and design type.

I had failed before. The absolute hardest part of starting a new project is keeping the ambitions low. Why would you want to do that? You have an idea, a vision and you can see it hovering in front of you. You can smell it and almost taste it. Having a vision is the easy part, getting it done is the hard one, getting it polished is even harder.

I had been there before, starting up a new type design project. But in late April 2010 I had still not finished a real and complete(Latin1 at the least) typeface. Of course I had done the standard pixel font (8px rules!) in 2002 for use in flash, but seriously everyone was doing that in the golden days of Joshua Davis and de-construct—or said they had.

The web is always changing and what happen in late 2009 and early 2010 was something very interesting for online typography. The technology-heavy solutions for displaying any typeface such as sIFR and cufón had many limitations and started to fall apart. Typekit had launched it’s idea but not the full service, fonts.com starting offering free fonts to use online, the Museo-revolution but also small movements like http://www.theleagueofmoveabletype.com/ all using the CSS property @font-face to display any typeface on anyones screen became more and more interesting. You also had total CSS control of colour, leading and letter-spacing. Was this the online typography revolution?

So at the same time as Typekit and other font companies wanted to find the holy grail of font licensing and distribution online, dedicated and skilled amateur type designers started releasing their designs for free, for anyone to use as they saw fit, using an open license such as SIL Open Font License. Using those font files with @font-face was totally fine. And the web started too look better and better and more diverse. A very exciting time to work with design.

One of the biggest reasons I started designing my first complete typeface was that I wanted to use it for my web designs, I wanted a unique typography independent of image files or flash, and “readable” by search engines. And I wanted to shape it myself.

The work of many talented type designers had inspired me to know more about the craft; Matthew Carter showed me the history, the art and the humanistic side, Christian Schwartz, Kris Sowersby, Cornel Windlin and Stephan Müller showed me a modern spirit. House Industries had always inspired me with expressive work, and Jonathan Hoefler and Tobias Frere-Jones was royalty (or dandies) of type design to me. And as in any subject the more I dove into it the bigger it got, starting to understand something usually opens up an entire new world. Which was of course both daunting and exciting.

So were to start. I spent a lot of time the forum at http://typophile.com/. A lot of colour full and dedicated people. I got some tips on how to get started and I started by following most and ignoring some.

As I said I had failed before. Working mostly with web and digital design my dream was to create the perfect text typeface for body text (and still is), with super legibility and impeccable style for screen. I studied how lines needed to fall on the pixels, how contrast between light and heavy needed to be just right for the different type of font rendering on screen. I started the very ambitious project of making a serif typeface for screen use. I worked and worked. I took hundreds of photos of signs and other use of type wherever I went, I was very eager. I failed. I couldn’t get the weight right, the serifs looked horrible and the complexity of each glyph took forever. My sketches never left paper and Adobe Illustrator to enter any font editor.

I needed a smaller project with more momentum to be able to focus on all the parts I was very unfamiliar with. I had browsed many fonts in Fontlab Studio and look at the info to understand metrics and other details, but it’s not until you work with it yourself with real stuff you can evolve in your skill. So I decided to put my ambitious project on hold to work with a design I could more easily grasp and see the end of—a geometric and simplistic shape.

I turned to the old style stencil rulers and the line-based typefaces of architectural drawings to inspire me. Pure geometric, everything in my design became based around the shape of the uppercase ‘O’, that was the first thing I designed, to get the radius of the corners right. The top and the sides were all straight lines. Basically making the ‘O’ into a rounded rectangle. I had studied other web fonts and experimented with @font-face and knew that fonts rendered a bit fatter in a browser, so I made the initial line very thin to compensate for the final result.

I knew I wanted to ad something more to the style that would make it slightly unique. And I liked the idea of the stencil rulers, when you put a pen in a cut-out area and follow the shape the start and the finish will never be totally flat or square. The line will be rounded from the tip of the pen. So all my lines would end in a round part rather then a straight.

An initial recommendation I got from one person on forum of Typophile was to never sketch or draw a typeface in Adobe Illustrator or Freehand first but to go from idea, sketch on paper straight into a font editor of choice (like FontLab Studio). So I tried this, even though I had better control over a lot of aspects I lacked some other. The font editors worked really well for me when it came to details or specific lines and curvature. But I couldn’t work with overall style and composition between several glyphs. I use Illustrator everyday, many hours a day, I sketch things out or make detailed vector assets for design. The style I was trying to achieve also was very simple to make and work with in Illustrator so I couldn’t stay away. The basic design element is a vector line with rounded ends. It was in this project I started to find a fluent work flow working with Illustrator as a rough sketching and layout tool and then transfer my design to a font editor and work with details and polish. It works really well now but it has taken around two years to develop, Illustrator has become my pen and paper.

An important factor in using Illustrator as a sketch and asset tool for elements was getting the weight and metrics right and make sure the glyphs don’t transform to much in the transfer between the software. The overall weight for instance was set in Illustrator and that meant I couldn’t scale the shapes in the font editor, that would distort the single object and it would not look as a part of the font.

For the metrics of the font I looked at other design made for screen, like Verdana, Georgia and Trebuchet MS. Some elements remain the same and some are reworked for a legible rendering on screen in different sizes.

• Low contrast between weight in shapes
• Characters like c, e, should be open to be clear
• The white space within and around each character should be generous
• Large x-height
• Wide glyphs

I had the shape (the uppercase O), I had the style (line-based with rounded ends), I had an vision of the final product (web font with character). I now started with something I have been doing every time in my type design. I draw all the lowercase glyphs from a–z in a fast pace just getting all the letters out, if I have any hesitation at all regarding the design of a specific glyph I jump it and move on. The subconscious idea was to get it all out and have a look at the entire feel of the typeface and then find changes and details to work with. This process is something I usually do when working with design, and I guess it’s basic sketching, it’s the natural step from mind to reality and the important thing is not to hesitate and think to much. This is the first pass. This is the raw material. Something to look at, something to work with, something concrete to discuss. And the coolest thing about unfinished shapes or designs is that it could inspire you in a new direction because you see something else or even better if you show it to someone who hasn’t shared all the design decisions up to this point you can get very good feedback from a new perspective. The best thing with just getting things out is just that, you are releasing it from your mind. Releasing it could distort it, and you might not realize the beautiful vision that was in your head, but remember it doesn’t exist before someone other then yourself can see or feel it. So get stuff out.

I used a big blank canvas in Illustrator to sketch, with guides for cap-height, x-height, ascenders and descenders. I copied shapes into FontLab Studio and generated a font file with those metrics to try it out. When I was happy with the relationship between the cap-height and x-height I focused on the width of the glyphs. My decision here was based on getting the right rendering on screen, so I worked with a slightly extended style.

Working with lines in Illustrator I could scale the shapes as much as I wanted without changing the weight of the lines, this helped out a lot during the process of finding the right proportions. I could also experiment very quickly with the overall weight of the typeface by just changing the weight of the lines on multiple glyphs at the same time. When I was ready for FontLab I outlined the lines to solid shapes and just copied them into the font editor.

When working on design I usually name my files descriptive so I just by looking at the filename can determine the contents (surprising, I know). In the case of this typeface I started with the file name “line1”, the number was just a standard way of version control I knew that their would be a process of multiple files. But the more I worked with the file I kind of liked the name and how it denoted that there would be a line 2 some day. Adding LH as a prefix was given for me since it’s a the shorthand of Lufthamn. This added some identity to it and I never changed it during the process, instead I have built a system around it since. Using very descriptive—some one say uncreative— names for my typefaces and then using LH as the common identifier (LH Grotesk, LH Mono Slab, LH Sketch). In the case of Line1 I added “Sans” as another level of description, I had already sketched on a slab version so I wanted early on to differentiate from other future versions.

Illustrator helped me a lot in quickly trying out different things and actually getting it rendered as a font in a browser to see it in the final context I was designing for. When all this testing was finished and I had all the lowercase, uppercase, numerals and some other glyphs I set up a new specific file in Illustrator. This one had the right metrics according to my font info, 1 point in Illustrator equal to 1 point in FontLab Studio at UPM size 1000. This meant that copy-pasting from Illustrator to FontLab wouldn’t need any scaling or distorting. Using this file I went through all the glyphs I had, cleaned them up and copied them into FontLab.

I now started fine-tuning some of the glyphs. Where lines meet they appear thicker and since I had worked with lines-only in Illustrator I had to fix that now and as I mentioned before FontLab makes it so much easier and delicate to work with these kinds of details.

Time to start adding glyphs to the set, to keep the ambition on a level I knew I could deliver on I worked with the default encoding of ISO 8859-1 Latin 1. This has 191 glyphs, where around half of that are more or less unique and the others are small variations or combinations of the others. It's a bit of an old encoding but it has the basic and I wanted to start small. (bild på uppsättning)

Adding glyphs and reworking glyphs in this part of the process is very time consuming, and you see very small change on specific glyphs. But the change overall is usually huge. For me it was important to regularly see the typeface in words and sentences, I used the metrics window in FontLab to do this. My workspace always consisted of an open metrics window with some random words or glyph combinations. So much of type design for me is eliminating anomalies but at the same time keeping a strong collective character/identity. You can do this best by using real text and as I discussed in my story about LH Rubenesque I used an InDesign template with a text from Alice in Wonderland, it was actually during this project I set up that file for the first time.

Time wise for me the idea phase can take anything from a few seconds to years, this is thinking about the typeface, the purpose, the style, the feel. The design phase if formulating the idea and sketching, then working with the details and finalizing the glyphs in a font editor is the execution phase. Usually, depending on the design of course, the design phase only takes a few days (1–3). For me the execution phase takes ten times longer than the design phase, for LH Line1 Sans it took just about two weeks of evenings, nights and weekends.

I released it in May 2010 as an SIL Open Font License font. The idea was that I just wanted to get it out there, if I didn’t have that goal I might not have finished it, I might not have put that extra effort in the polish. I wouldn’t have learned as much. And I felt I wanted to contribute to the community of online typography, I wanted people to use it so an open license was given since I was building my knowledge and craft on the passion of so many others.

I’m proud and happy about LH Line1 Sans Thin, but I’m not satisfied at all with the result. I can see a lot of faults and anomalies and the line-work is very irregular on some glyphs. But I learned a lot. I see this as my rough sketch, the first pass in a the type design phase of my life.

I would love any thoughts or ideas you might have regarding anything I have said here, just tweet me @lufthamn or send me an e-mail.