Fonts are an essential part of UI designing. Be it graphics, posters, logo taglines or even web, its important that you choose the one that catches user attention, goes well with the contents, fits well with other UI widgets, is elegant & graceful.
From our Design Department’s Exhibition I went to last week – Perfect time to write this!
Prefer serif or favour sans, like the curves or go with the lines – the bottom line is its suitability and eye pleasantness. Moreover if you’re designing for web, the browser compatibility can also bug you no sooner than you find out your lines being rendered differently when run on different browsers. Some fonts like ‘Roboto’ doesn’t go well with Mozilla while it’s an excellent choice currently for Chrome & Safari. From the User Experience perspective you need to take care of your user’s browser preferences as well.
The one from retro font collections!
Having used various fonts extensively in web and graphic designing, I’ve seen my designs turning from elegant to marvelous. The complimentary nature of components when fitted perfectly renders a perfect product.
I didn’t know much about the FontTypes until recently. I was acquainted with the names like TrueType & OpenTypethough (from the extensions .ttf, .otf).
Recently I learnt about another “Type” – The ClearType font. Well its more of a font technology than a font.
Devised by Microsoft, ClearType is an unprecedented innovation in font display technology that dramatically improves font display resolution and marks a genuine breakthrough in screen readability.
Surprizingly, its been present since 1999 and has its compatible versions released for various windows editions. It was officially announced during COMDEX/FALL in late 1998 though.
According to a research study undertaken in April, 2001 at Clemson University, it became clear that users preferred text rendered with Microsoft ClearType and that ClearType yielded higher readability judgement and lower ratings of mental fatigue.
Microsoft received its first major ClearType patent from the US Patent and Trademark Office in May, 2001. In an article published by Joe Wilcox from the leading Tech reviewing platform C|Net, Microsoft’s ClearType font-rendering technology utilized in Windows XP was named the Microsoft’s finest achievement.
No. 3 is rendered with ClearType- felt the difference?
Aiding the other flashy features of Windows XP, this technology made the text viewed on LCD unbelievably sharp. Building over the launch, Microsoft also updated the tuner for ClearType font in September, 2002 allowing users with Windows XP Service Pack 1 to configure ClearType for the rare BGR configuration of color LCD monitor as well as the more common RGB displays.
Not only did it attracted attention from the designer’s community and tech critics, reading psychologist Kevin Larson wrote an unabridged papers on the ‘Science of Word Recognition‘ as well where he presented his unique perspectives.
Microsoft released the Windows XP PowerToy in November 2004 that lets user activate and tune their ClearType settings via the Windows Control Panel. With ClearType gaining massive momentum, it getting featured on renowned Typo Magazines was not at all a surprize.
Sample layouts and information about the ClearType collection fonts were made available in late January 2007. From then onwards, Microsoft kept updating the online ClearType tuner. The engineering changes in ClearType fonts within subsequent versions of Windows were discussed in blog posts and whitepaper by ‘the man of many typefaces‘ Greg Hitchcock. He also taught designers ways to optimize their fonts for ClearType.
Science behind ClearType – How does it make text appear sharp?
What ClearType does it to access the individual vertical color stripe elements in every pixel of an LCD screen. So with ClearType running on an LCD monitor, we can display features of text as small as a fraction of a pixel in width. The extra resolution increases the sharpness of the tiny details in text display, making it much easier to read over long duration.
Yeah, that’s a pixel on your screen – there are lots of them!
Overview of its working-
Its all in the unique characteristics of LCD screen. The images rendered on the screen are made up of pixels (little square shaped). The equivalent of one pixel on an LCD screen is actually composed of three sub-pixels: red, gree and blue (RGB). These sub-pixel triplets combine to be seen by the human eye as a single pixel.
So how does ClearType improve the quality of digital type display? That’s where you realize the ever changing technology.
ClearType is smart enough to know that LCDs are made up of colored sub-pixels
Actually traditional computer font rendering assumes that each pixel is either ‘on’ or ‘off’, appearing as tiny black squares. Traditional gray-scaling assumes that each pixel has no internal structure, so it smooths the jagged edges but sacrifices edge sharpness.
It uses a model of the human visual system to choose the brightness values of the sub-pixels. With ClearType, letters on the computer screen appear smooth, not jagged, yet the edges remain sharp. This font technology works effectively with current displays, readability of CRT monitor will improve though.
Backstory – As Obtained From Microsoft’s website
Development of ClearType font was the combined effect of research in typography
and the psychology of reading. It was concluded that reading is a form of pattern recognition. People become immersed in reading only when word recognition is a subconscious task and the conscious mind is free to read the text for meaning.
Interestingly word recognition is only subconscious when typographical elements such as the shape and weight of letter-forms, and the spacing between letters work together to present words as easily recognized patterns.
Fonts from an expert perspective – Greg Hitchcock
Reading further, I came across an interview with Greg Hitchcock (The typeface guy I mentioned earlier) published on the Microsoft’s blog. I would briefly summarize some crucial insights I gained out of it.
Its a bit of twitching in the same TypeFace – interesting, isn’t?
Suitable font depends on tone and emotion of what’s being written – Everyone one has a particular choice of fonts – their personal favorite but it’s not necessary that font would go well along with anything you write.
For instance- Comic Sans font generally gets rough treatment but if its great for humorous or kids oriented writing while it would be a terrible choice for something serious.
Difference between Font & Typeface
Another interesting thing I came across was this little difference in words we use interchangeably. Historically, a font referred to a single size of a typeface. 16pt version is different font than a 12pt version. Typeface is the whole collection of sizes.
Text face and Display face
Text faces are used in books and magazine.
Display faces are mostly for things like advertisements. Think about the moment when your one glance is enough to distinguish the 1970’s font from the current ones.
A Little Fun Game –
Look at the picture below and quickly tell me the color of the font.
Congo! you just underwent the Stroop Test.
I came across this interesting website CognitiveFun where you can take such cognitive test.
Congruency is a vital component of our ability to read accurately and reliably. When the above font is flashed before you, your brain undertakes a cognitive mechanism know as
‘directed attention‘ – forcing myself to inhibit one response in order to give the correct response.
Some Bonus Facts –
- TrueType is originally licensed from Apple
- Before scalable fonts, we had bitmap fonts and the terminology made sense as a font was at a particular size determined by the bitmap. With scalable fonts, the distinction really disappeared.
- There is something called ‘TrueType hinting’ that maximizes the legibility of text displayed on screen at small sizes, and offers the possibility of higher quality than any other font format.
Bonus Image –
Courtesy – Design Department, IIT Hyderabad (Seriously I took these photos!)
If you were observant enough to note the difference in fonts in the featured image and curious to know their name, then it is for you.
Fonts in order of appearance – Constantia, Corbel, Calibri, Cambria, Candara, Consolas