Making & Using WebFonts: Software

WORK IN PROGRESS! I JUST REALLY NEED A BREAK. UPDATE TO COME SOON

Making & Using WebFonts aka. Typeface, Typeset, Lettertypen, Fuentes, 字体

Let's talk about fonts. If you don't know what a font is, then likely this article is not for you. From the age of the Gutenberg Printing Press around 1450 (image), setting the type for printing became an art in the west.

There are a number of reasons why you just might wish to make your own font. First of all, you would not have to worry about the costs for personal use, or maybe you would like to sell your own fonts. Take the Centaur font for example. It was drawn by Bruce Rogers in 1914 for the Metropolitan Museum of Art and was based on Nicolas Jenson's cuttings in the fifteenth century. The typeset still fetches from €34 or USD $44 for local usage (meaning in a format for use on your own computer) to €345 or USD $440 for use on Apps and Cloud distribution.

History: Once again the Chinese were first.

The world's first known movable type printing technology was invented and developed in China by the Han Chinese printer Bi Sheng between the years 1041 and 1048. When this technology spread to Korea during the Goryeo Dynasty in 1234, they made the world's first metal movable-type system for printing.This led to the printing of the Jikji in 1377, the oldest extant movable metal print book. This form of metal movable type that has been described by the French scholar Henri-Jean Martin as 'extremely similar to Gutenberg's'.

Korean movable type from 1377 used for the Jikji

Sure, there are free fonts out there as well. Maybe you're not interested in trying to compete in that market, but you have a project that requires something unique, or a company logo that needs just that extra touch. This is when you might wish to venture off into the world of typography and create your own. Let us take a look at software that will allow us to "cut" our own typeface.

Font Editor Software

FontLab Studio, one of the industry's standards is priced over €482 (USD $600, SGD $782, CNY ¥3686). Now if you intend to start a professional font foundries, which make a business designing and selling fonts, you just might be happy enough to foot the bill for the sticker price. For many of us with less demands and planned use, the cost is far too high.

Earlier I mentioned that there are a number of free options out there. Many of these choices are going to be rudimentary.

With these tools, don't expect to create high quality professional fonts right from the start — it will take time and practice, just like with any endeavor. But, if you're simply looking to create a custom font or would like to try your hand at a fun, fulfilling and creative activity like font design, these tools will certainly help you get the job done.

Let us cover some these free software options after a brief jaunt over typography jargon.

Glyph /ˈɡlɪf/ An elemental symbol within an agreed set of symbols, intended to represent a readable character for the purposes of writing and thereby expressing thoughts, ideas and concepts.
Sinograph or Sinogram is a Chinese character (Hanzi), especially when used in a different language, such as Japanese (Kanji), Korean (Hanja) or Vietnamese (Hantu).
Diacritics are the signs, such as an accent or cedilla, which when written above or below a letter indicates a difference in pronunciation from the same letter when unmarked or differently marked.

Font Editor Software:

⇓ links to in-line notes

• FontStruct.com - ⇓ ★★☆☆☆ (Online Editor)
• GNU Font Editor - ⇓ ★☆☆☆☆ (Installable)
• FontForge - ⇓ ★★★★☆ (Installable & Source Project)
• DoubleType - ⇓ ★★☆☆☆ (Installable)
• Horus - ⇓ ☆☆☆☆☆ (Online Inspection Only)
• Bitmap Font Editor - ⇓ ★★☆☆☆ (JAVA-based Project)
• iFontMaker™ - ⇓ ★★★★☆ (iPad & Windows8)
• BitFontMaker2™ - ⇓ ★★★☆☆ (Online Editor)
• Custom iOS Fonts - ⇓ ★★★☆☆ (Online Converter targeting iOS)

Related Software:

• Inkscape for vector editing (e.g. SVG file format). ★★★★☆

FontStruct
FontStruct.com is a web based font editor. They do require that you have an account in order to use their free creation services. FontStruct sells over 10,000 typesets from various professional font foundries and also has a number of royalty free fonts. The free fonts you are welcome to download, or clone directly into the editor for your personal modifications. They provide an informative blog, live users' news-feed and have their own online shop. Copyright over fonts created with FontStruct belong to the creators, not to FontStruct.

GFE
GNU Font Editor (GFE) is a graphical font editor based on the GIMP Toolkit. It is easy to use and was intended to support many font types, but stopped with support for only BDF font files, which can still be converted to many other formats. Since the advent of FontForge, GFE has been decommissioned. The software is still available via CVS.

FontForge
FontForge on GitHub is another free font editor, and it has a wonderful environment in which you are able to work with vectors. This is so much easier when editing a font as compared to dealing with pixels in a bitmap.
It is available for Linux, Windows and of course Mac.
Documentation is available in English and Mandarin Chinese (简体中文版). It is very comprehensive and even goes so far as to explain how to design Devanagari typefaces (an abugida alphabet of India and Nepal) and how to add glyphs to Arabic fonts.
You can import EPS and SVG vector files from programs such as the free vector image editor Inkscape and Adobe Illustrator et cetera.

DoubleType
DoubleType, last updated on 2013-04-17, is a downloadable font editor (type designer) that builds TrueType font files. Thanks to Java, it runs on Windows, Linux, & Mac. Glyphs are stored in XML based file to aid teamwork. Efficient glyph design by combining existing glyphs and modules. Users claim that it only supports .glyph files, not import of nor export of TrueType, which would require another program to do the translation.

Horus
I personally would advise you to skip this utility, as I could not find anything useful about it. Apparently, some good ground work was coded by Alessandro Crugnola, and rendered inside of Adobe's Flex web front-end environment. You can't edit font, you can't load a font, it is just a viewer for demonstration sake. Perhaps they make the libraries available, which I would assume are written in Python and Adobe's ActionScript.
For the sake of research, Crungnola now works in N.Y.C. for Aviary, a company that joined Adobe with their photo-editor App on iOS and Android, also released Horus.
Before clicking the link, please note that it is very rudimentary and actually requires a little instruction, which is not available on the direct link for the online web application. "You can see the rough results of our team's Flex experiment into parsing fonts into outlines. (Open a font from the top File menu and then drill down into and enter the glyph folder to select and play with the shapes)."

Bitmap Font Editor
Perhaps an excellent program to fork from GitHub and improve for your personal JAVA-based typographical needs. This is a small font editor for bitmap fonts. Kostas "Bad Sector" Michalopoulos originally used this code for a Flash game font developments. The downloadable code is licensed under zlib license terms. It was written in Java using NetBeans.

iFontMaker™
iFontMaker™ is targeted for the pad market. It is available for both Windows 8 interface (USD $4.99, 0.2 Mb) and iPad (USD $6.99, 0.3 Mb) by Eiji Nishidai with Pentacom, Japan.
iFontMaker™ claims to be the first font editor exclusive for iPad. Features include; rich textured brushes, support for pressure sensitive pen tablets, an online gallery, to ability to email the typography or convert it into a web font or a TrueType Font (TTF) file, which many Font Editors can import and which is commonly used on Windows platforms.
For information on how to install your own font on iOS7 device click the previous link, or take the scenic route via the App's 2ttf.com page.

iFontMaker Windows 8 Edition

iFontMaker iPad Edition

BitFontMaker2™
BitFontMaker2™ is a second version of Pentacom, Japan's online font-editor. Browser requirements are IE 9+, Firefox 2+, Chrome, Safari 5+ and/or Mobile Safari on iPad iOS5+.
Copyright can be set to PublicDomain, CC-BY, CC-NC or AllRightsReserved if you wish to share your font on the BitFontMaker Gallery. Brief but handy bilingual instructions (つかいかた) are available online.
One can import a True Type Font (TTF) from your local drive; however, this web-interface only handles a 16 x 16 pixel grid. The import/export function is done through an editable Javascript text object. Even with fine tuning, you will likely loose definition, and end up with a font that looks good on an Atari emulator. If you love nostalgia, there is always the original online BitFontMaker.

Custom iOS Fonts
Yet another gift from Pentacom, Japan. Custom iOS Fonts is fast and dirty hack for turning your local TTF or OTF font files into installable iOS .mobileconfig files. Upload your font, it gets converted, repackaged and downloads almost instantly. Just mail it to yourself and open it on your iPhone or iPad to install.

Working with Subject-Matter Experts (SMEs): Scope of Work Document

The following document accompanies the subject matter of Designers & Working with Subject-Matter Experts (SMEs).

When working with a SME, expect to spend equal time on each of these three tasks: building your relationship, creating the project vision and scheduling. Building the connection is important as it lays that initial ground work, so you don't find yourself in a stiff and detached project environment.

After the ice is broken, ask a few standard questions to get a feel for how your SME thinks. Do you have a "rapid fire talker" who goes from idea to idea with very little context, or maybe a methodical thinker who takes considerable time to ponder his answers.

In setting up a Shared Vision, you will want to define a target-market or who the intended audience is. What is the final product, what topics shall it cover and what shall the length or intensity be set at?

Building the schedule involves determining the "ship date" (deadline) and your start date. Break down the project's strategy into tasks, listing all the major tasks and estimating the time required for each one of those tasks. Take your tasks and try to build a sequential calender of individual mile-stones and then consider how to keep a level of accountability. Staying organized is effective and assisting in reminders of coming deadlines.

Instructional Design Project Kickoff - Scope of Work 

Instructional Designer:

SME:

Kickoff call date and time:

Contact details:

Phase 1: Establishing the Relationship 

In this first part of the call, you want to establish your working relationship and apply the great information 

you’ve already researched about your SME. This portion of the call might take 10-20 minutes depending 

on total call length.

1. What drew you to this field?

2. What’s most important to you about how you teach this topic?

3. If there’s one thing your message should leave in people’s minds, what is it?

Notes about SME speech patterns, interests, etc.:

Phase 2: Setting up a Shared Vision

In this second part of the call, you want to establish the scope and vision for your project. This portion of 

the call might take 10-20 minutes depending on total call length.

1. Who is the audience?

2. What does the audience need?

3. Will the final product be a manual, an elearning course, a video course, a training guide, something    

    else?

4. What topics will it cover? 

5. How long will it be? 

Notes about the project specifications:

Housekeeping details:

1. Communication method (phone, video chat, email, text, in person, etc.)?

2. How do you like to give feedback to me, and how do you like to receive feedback from me?

3. SME availability and yours (are you fully devoted to this project, both juggling this and others, etc.)

4. Big events on your calendars (Is there anything coming up in your schedule or personal life that might  

    impact the project? If so, how can we plan around it?)

5. An open understanding of budget if it’s a part of your project--getting a sense for what the availability is  

    even if you aren’t finalizing.

Phase 3: Building a Schedule

In this final part of the call, you want to establish the schedule you’ll keep. This portion of the call might 

take 10-20 minutes depending on total call length.

Project completion date:

Project start date:

Project task list:

Project milestone list:

Sequenced schedule:

Accountability notes:

WEBer Script WebFont Beta Release

WEBer Script Plain 1 Webfont

Just a quick posting of a handwritten web-font. It is the first that I have created since 1997. It is interesting how we the web is coming back to this old technical possibility.
This font will be open to the public when it is further cleaned of inconsistencies, omissions and a course of distribution is decided upon.
Such fonts as this are difficult to read, and should probably only be used in titles, headers and perhaps logos. Despite the irritation, I leave the majority of this text in a handwritten font for my own self-indulgence and observations. The last link of this article will take you to a more readable version.

Web Font Formats

EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF, and the list goes on. To find one’s way through in this veritable jungle of font formats is not exactly easy. Let’s have a closer look at the pros and cons of font formats that are particularly relevant for their use on websites.

TRUETYPE

This format was developed in the late 1980s as a competitor to Adobe’s Type 1 fonts used in PostScript. As a scalable outline format, it replaced the common bitmap fonts that were used for screen display at that time. Microsoft took up the TrueType format as well and it soon evolved into the standard format for system fonts due to the fact that it offered fine-tuned control for a precise display of font in particular sizes.

OPENTYPE

Microsoft and Adobe teamed up in developing this font format. Based on the TrueType format, OpenType offers additional typographical features such as ligatures, fractions or context sensitive glyphs and the like. However, browser support of these features which are common in sophisticated layout and illustration programs is still unsatisfactory. There are two different versions of OpenType fonts, depending on the outline technology used. There are:

• OpenType fonts with TrueType Outlines (OpenType TT) and
• OpenType fonts with PostScript Outlines (OpenType PS)

OpenType PS is a so-called CFF based file format (CFF = compact file format). This is relevant when using OpenType PS fonts as Web fonts, because PostScript based formats are displayed without subpixel rendering on Windows platforms which affects the rendering quality considerably. That’s why TrueType based fonts are the better choice as Web fonts, even though Microsoft will solve this rendering issue in the future. The structures of TrueType and OpenType fonts are very similar and browser support is available in Safari 3.1 and higher, Firefox 3.5 and Opera 10 (and of course newer versions).

EOT

Internet Explorer has supported the proprietary Embedded OpenType (EOT) standard from the late 1990s. It’s a variation of the TrueType and OpenType formats that provide the following particularities:
EOT fonts are a compact form of OpenType optimized for quick delivery on the Web due to data compression. By means of URL-binding, EOT fonts can be tied to a specific domain. The fonts can then only be delivered to and used on those Web pages. This technique helps prevent fonts from being copied and used without a licence.

EOT is exclusively supported by Internet Explorer. Even though it might not succeed as a Web font format in the future, it still makes sense to use this format today in order to supply the users of various IE versions with Web fonts. Current IE versions (< 9) do not use any other format.

If you want to convert TTF fonts to natively compressed EOT files, you can use EOTFast (a free application) currently available only for Windows.

WOFF

Unlike EOT, the Web Open Font Format (WOFF) is in the process of being standardized as a recommendation by the W3C which published WOFF as a working draft back in July 2010.

WOFF came into existence as a kind of a compromise between font foundries and browser companies, so it’s no wonder that WOFF has been developed by two font designers (Erik van Blokland and Tal Leming) in cooperation with Mozilla developer Jonathan Kew. Essentially, WOFF is a wrapper that contains TrueType and OpenType fonts, and it’s not really a new format of its own.

WOFF uses an integrated compression algorithm named zlib, which offers file size reduction for TrueType fonts exceeding 40%. Furthermore, meta data can be added, e.g. a user’s licence. However, this data presents only meta information and is not validated by browsers.

The format has been supported by Firefox since version 3.6, and by Google Chrome since version 5.0. All other browser manufacturers are working on adding full support in future releases. Fonts can be converted into the WOFF format by the online service Font Squirrel free of charge.

SVG Fonts

SVG fonts are text files that contain the glyph outlines represented as standard SVG elements and attributes, as if they were single vector objects in the SVG image. But this is also one of the biggest disadvantages of SVG fonts. While EOT, WOFF and PostScript-flavoured OpenType have compression built into the font format — SVG fonts are always uncompressed and usually pretty large.

SVG fonts are not really an alternative to the other Web font formats, and iOS 4.2 is the first version of Mobile Safari to support native Web fonts (in TrueType format) instead of SVG. However, SVG is the only format that can be used for the iPhone and iPad prior to iOS 4.2.

Tools, such as Font Squirrel, can be used to convert fonts into this format. Another possibility to obtain SVG fonts is to rent them from one of the numerous Web font providers.

Read more on implementing @font-face.

Salut monde ~ Stutterers and Foreigners

Let's see. Neither a poet, journalist, writer, director, salesman, materialist, specialized hobbyist, egocentric nor ethnocentric and yet here we are with a blog. The reason? Just to test out UX, themes, scripts, imaging and perhaps share my paintings and random rants. One can not test User eXperience without a number of paragraphs and other objects, and so we begin with an interesting sociological eXperience.
There once was a company, filled with hardcore programmers, and by this, we mean the ones who are engineers as well. That ilk of human that reads a textbook and commits it to memory for life. They love the concrete nature of mathematics and science, albeit both delve into the world of uncertainty and discovery when you are on the cutting edge. These are the sort that tend to avoid the edge chaos, also known as the order for which we have yet to understand.

Granted, being the sort that judges things in black and white does not mean that they lack compassion in their lives. Both of the directors were lively in their individual ways and not afraid to venture the event horizons of life's vortexes.

Mr. Sudonaam was the taller of the two directors and upon building their new building, he was ecological enough to assure that the brick wall included special bricks for small birds to make homes within. Sudonaam also loved to play golf, and once even came down from the chateau in Peebles, Scottland to join in a slightly rainy par three course. He knew how to take a street and make it into a cholesterol free artery, flowing smoothly as congested as possible and put the logistics down on paper in simple math for even the layman to understand. Now, one can say that Sudonaam stuttered, but it was nearly unnoticeable. He had attended classes to find ways to lesson the pronounced nature of it. Perhaps this is also why lenience was given to another employee, who was completely capable and dedicated to his position and children, but truly stuttered.

At end of every weekly company meeting, everyone of the employees was given an opportunity to table questions and share the status of the projects they were assigned. When it came time for one who stuttered to speak, not one colleague would interrupt nor complete their sentence. Of course it was often in the industry's technical jargon and it was my third language, so I could always wait for the punch line, but I could see the others already knew the following word to come. Despite their foresight, never once did they complete their sentences for them.

Now, it was my turn and sometimes in your third language, you find that perfect word in two other languages, but you simply can't find it in your third. At that moment of hesitation, your colleagues will feel free to jump in and complete your sentences for you. To some degree, I was thankful as perhaps the word afforded in kindness would be a pearl to be remembered. Most often the word would be one that you knew, but felt that it was incomplete in its application.

This interesting difference of social interaction with foreigners and stutterers is probably due to the concept that the later is an affliction, whereas the former is ignorance. A friend and I were laughing about how it would have been had I been boss. In all likelihood, the team would have waited for me to look-up the desired but incorrect translation on an iPad and not even do as much as snicker.

I do miss that company. It was amazing how within a few weeks, I was producing front-end interfaces in libraries which I had never previously used. It is regrettable that my mastery of the local spoken language was never geared for mastery, as it was with French, because it does put me at a disadvantage of being convincing. When I suggested that we also provide our interfaces on the mobile platform, it was kindly rejected and yet before the end of the first year, another colleague was working on a mobile app.

C'ést la vie, c'ést la guerre, c'ést bonne et jusqu'ici tout va bien.