SimonCox.com

Version 7.1

WebFonts

by Simon Cox

2010-07-28

Articles
Web


WebFonts

With HTML5 finally emerging from the primordial soup I thought it was time to have a look at where we have got to with fonts on the web, what today's techniques are and what is new in the world of the digital hot metal.

Whats going on at the moment

Typog­ra­phy has long fas­ci­nat­ed me — I’m not a great prac­ti­tion­er but am a lover of the art and to me typog­ra­phy is one of the foun­da­tions of great visu­al com­mu­nica­tive design. So my move away from print in the mid to late 1990’s to the evolv­ing web, whilst very excit­ing did make me reluc­tant­ly low­er my expec­ta­tions on qual­i­ty of design for the web. We have always been restrict­ed to just a few com­mon­ly avail­able plat­form fonts which are all fair­ly pedes­tri­an. Now how­ev­er with html 5 final­ly gath­er­ing speed and, pos­si­bly most impor­tant­ly, IE9 about to be deliv­ered (I know — but it could tip things couldn’t it — IE still has the big pie slice),

So I recent­ly got an iPad — which is great — and this week I spot­ted a font cre­ation pro­gramme. I had a copy of Fontog­ra­ph­er back in the mid 90’s and cre­at­ed a few par­tial fonts for my own use so I had a good idea what this was going to involve. I pur­chased iFont­Mak­er from the App store for the rea­son­able amount of around £4 and with­in sec­onds was able to begin to cre­ate my own font. iFont­Mak­er allows you to set up a ghost font as the exam­ple t trace over and with­in 30 mins I had pro­duced a sim­ple Com­ic Sans type font includ­ing upper and low­er case, numer­i­cal and sev­er­al oth­er glyphs. I then uploaded the ttf file from the ipad to the 2ttf​.com web­site where I was able to down­load it and install on my Mac!

Next I uploaded the ttf file to FontSquir­rel and cre­at­ed a whole font kit which I down­loaded and installed into my web­site, cre­at­ing live type­face of my own cre­ation in about 40 minutes.

Use­ful (to me at least) Web­font links of some sites in this space at the moment: See image in Gallery.

Fan­tas­tic — but per­haps not quite as easy to set up as the Google API offer­ing or for that mat­ter more com­mer­cial options like Typekit.

I have include some links to fur­ther read­ing about Webfonts.

And there is more...

Inci­den­tal­ly the W3C has today pub­lished its first work­ing Draft for WOFF set­ting a stake in the ground for us — http://​www​.w3​.org/​T​R​/​2010​/​W​D​-​W​O​F​F​-​20100727/.

17th August 2010
Last night I attend­ed the August Lon­don Web Stan­dards meet­ing where Richard Rut­ter, (@clagnut) from Clear­left , gave an inspi­ra­tional talk about the future of web typog­ra­phy — and its very excit­ing to typo nerd like me — ok i appre­ci­ate gor­geous type more than I can prac­tice it (does that make me a typo­graph­i­cal pun­dit?). There are loads of CSS3 con­trols being rat­i­fied that allow a mas­sive amount of con­trol over typography.

The font size adjust prop­er­ty looked incred­i­bly use­ful but dif­fi­cult to work out quick­ly (I have yet to try). But it was the font stretch prop­er­ty that was most excit­ing — though if this will ever be prop­er­ly imple­ment­ed we will see. this allows the design­er to spec­i­fy adjust­ments to a font to get its vari­a­tions: nor­mal | ultra-con­densed | extra-con­densed | con­densed | semi-con­densed | semi-expand­ed | expand­ed | extra-expand­ed | ultra-expand­ed — and these have to be avail­able of course.

The one real ques­tion I have is do the cur­rent crop of web design­ers have the skill sets to use them? Pos­si­bly not. Cer­tain­ly the younger ones with no print design back­ground will have very lim­it­ed under­stand­ing and instruc­tion on typog­ra­phy — not their fault as the web has been sad­ly lack­ing in this area so they have not need­ed to learn. The old­er ones of us who cut our teeth on print design do have those skill sets — can’t keep on old dog down!

One very inter­est­ing com­ment last night was that in future design­ers could be design­ing for print using a web brows­er — cre­ate your design in html with CSS and then print to a pdf for send­ing off to the print­ers! Web based fonts may be a lot cheap­er so we may see web based page lay­out tools mak­ing an appearance.


21st August 2010
Web­type has now opened up as the lat­est online service.

WebFonts Gallery

Other articles in this topic

A first look at Safecont content quality analysis SEO tool

Review of a new tool from Data elasticity S.L in Spain that analyses the quality of your websites content Read more about A first look at Safecont content quality analysis SEO tool

How to find insecure pages in your site before Google start penalising them

Google will be highlighting all non-secure sites from July 2018 meaning that the Insecure Content Report of Screaming Frog will be in use a lot over the next few months - I will show you what to do. Read more about How to find insecure pages in your site before Google start penalising them

How I add canonicals into Perch CMS sites

The Canonical link in a page's header lets the search engines know where the original page resides. Originally conceived for situations where articles were duplicated they would reference the original. Google tends to choose the oldest version of a page that it can find (but not the only method it uses) and any other pages with the same or very similar content are considered duplicates and will not do a well on the Search Engine Results Pages - SERPs and we want our pages to do well there for the traffic. Read more about How I add canonicals into Perch CMS sites

Using a CDN to help migrate your sites hosting

Moving a site to new hosting can be fraught with issues. Here is one technique that I find useful when moving to a website to a new hosting server. Read more about Using a CDN to help migrate your sites hosting

EU cookie consent law largely ignored

The EU has give the UK until May 28th 2012 to comply with the cookie consent law - how many of the organisations pinpointed by the ICO have met the deadline? Read more about EU cookie consent law largely ignored

HTML Test Page for CSS Style Guide

This content is used to test that css has been covered for all tags used in content. Read more about HTML Test Page for CSS Style Guide

EEUK11 report

The UK's first ExpressionEngine conference has taken place in Manchester in August 2011. I provide a report on the event itself and the surrounding activities. Read more about EEUK11 report

Assets for ExpressionEngine

Assets is a new file management add-on for ExpressionEngine and brings a new way of managing assets in your website. I installed it and built a simple image Gallery. Read more about Assets for ExpressionEngine

Responsive web design

Responsive web design has been emerging as a way forward over the past two years. Following inspiration from the way Simon Collison's crafted his personal website I have now implemented a Responsive Web Design on this, my personal website. Read more about Responsive web design

Nibbler

Online testing suites are a very useful way of checking your website to see if it's up to scratch. I take you through Nibbler from Silktide. Read more about Nibbler

New look for 2010

I have finally taken the plunge and updated the site and have switched over to ExpressionEngine. Read more about New look for 2010

Comments