Typography in Web Design Demystified

Typography has been a key to the design of any printed text. It is as old as print, and will remain important for a very long while. In Web Design, content drives the design usually. Hence displaying the content in appropriate fonts and good spacing results in a great user experience. As designers and developers we had limited options some time ago, but today we have conquered major problems in the field. Here is a short walk-through beginning with introduction to typography itself, its execution in web design and concluding with the challenges we are facing.

by Islahul Hassan Zunjani
1 year, 1 month ago
1

Typography (from the Greek words τύπος (typos) = form and γραφή (graphe) = writing) is the art and technique of arranging type in order to make language visible. - Wikipedia

Arranging type means to find the combination of typeface, sizes of letters and spaces between them to represent text. Typography is often confused with "lettering" which is the art of drawing glyphs in a typeface. Lettering happens in the construction of a font, while typography happens while using it. Typography can also be called a subset of lettering. However one should not get carried away with the beauty of lettering.

If we seek only the next most Beautiful Typeface™ all the time, this
habit alone can drive us away from the functional role of typefaces and
their advantages as versatile, reusable and flexible design systems. -  Marko Dugonjić, Smashing Magazine

0 Comment
Write comment
2

As discussed in the previous section, Typography contains three primary sections - Typeface selection, size of letters or lines and spacing between them. Some of the key terms in each are discussed as follows


Types of Typefaces / Fonts


On the web we usually deal with sans-serif and serif fonts.

Size of Letters / Lines


Font size / Point size is the distance between the descent line and ascent line.


Spacing between Letters / Lines



The spacing between two consecutive letters is called as kerning, also known as letter-spacing. Kerning is usually done very carefully for each pair of letters in headings while doing typography for print and logo design. It is the most difficult feature to implement while doing web design.

Without Kerning -> With Kerning

The video attached is a beautiful depiction of "The History of Typography".

A paper-letter animation about the history of fonts and typography. 291 Paper Letters. 2,454 ...
0 Comment
Write comment
3

Realising that the end goal for typography is to create a great reading experience for the user and is not just about creating a visually stunning text to the user. The most important part of a great reading experience is legible text.  Legibility is the degree to which glyphs (individual characters) in text are understandable or recognizable based on appearance. Then comes reading comfort, which essentially meaning one needs to judge the text based on reading time, eye-strain for the user while reading for longer duration and white space around paragraphs.

By planning the content one can eliminate many possible problems which may appear in the future. Information architecture decides how the content is organised under heads and sections. Some key issues related to that could be organising the content under very long headings which do not fit the navigation scheme of the web designer. One needs to stay in touch with all the members in the development team to prevent such issues from creating disasters for the website.

Market research of your audience is extremely important when it comes to any web design exercise. If your audience uses a huge variety of browsers (eg. IE6 on Win XP) and multiple devices (CRT monitors 72dpi to Retina displays), you will need to weigh your choices before being too adventurous with modern fonts.

These issues are discussed in detail in the following article:

With the rise of Web fonts as well as affordable hosted Web font services and ...
0 Comment
Write comment
4

HTML provided <font> tag to change the style of display of text. Font used attributes such as color, face and size for assigning styles to the text. To emphasise text following tags were used, however their semantic meaning has been changed in HTML5 -

  • <i> -  italic, now for text in an “alternate voice”, such as transliterated foreign words
  • <b> - bold,  now for “stylistically offset” text, such as keywords
  • <em> - emphasis, now for stress emphasis, something you’d pronounce differently
  • <strong>- strong  emphasis, now for strong importance 

Without CSS @font-face or JavaScript alternatives, one had to rely on web-safe fonts. A few web-safe fonts are - Georgia, Courier, Arial (Helvetica), Times New Roman (Times), Garamond and Palatino.

Safe web fonts A very nice discussion of the history of typefaces is taken from ...
0 Comment
Write comment
5

With coming of CSS, styling the text became much more simple and efficient when combined with classes. The properties which are offered by CSS are :-

  • font-size - To change point size of the display text
  • font-family - Defines the font to use and backups if a font isn't available
  • line-height - Sets the line height of lines of a paragraph
  • letter-spacing - Defines the spacing between each pair of letters
  • vertical-align - Defines the alignment of the text in a line. Values - middle, top, baseline, bottom, super, sub
  • word-spacing - Defines the spacing between pairs of words
  • text-align - Alignment of paragraphs or text. Values - left, right, center and justify
  • text-decoration -  Decore the text. Values - overline, line-through, underline, blink
  • text-indentation - This indents the first line of the paragraph it is applied on, giving a more traditional look to large amounts of texts
You can change the text or foreground color with the CSS color property. You can ...
0 Comment
Write comment
6

Web browsers rely on fonts installed on their computers for showing text. Even web safe fonts might differ on different devices or browsers. So many JavaScript alternatives have come up in order to make our life go simple. We will discuss about the best in the business but the choice is entirely yours as there is no perfect solution here.

sIFR - Scalable Inman Flash Replacement

It is an open source JavaScript and Adobe Flash dynamic substitution system. It is based upon the original HTML text-to-flash replacement pioneered by Shaun Inman. You can effectively embed just about any font you own (not just Truetype) by creating your own flash “font library”. Final output looks as beautiful as any Flash generated typography.

FLIR - FaceLift Image Replacement

It is very similar to sIFR instead of replacing text with Flash, it is replaced with 32bit
bitmap PNG images, generated on the fly via a server side PHP script.

Cufón

Cufón, once again, uses javascript to replace the html fonts, but in a far more elegant way. The initial step in using Cufón is to generate a proprietary font library, which is effectively an SVG font embedded in a javascript file. Any Truetype / Opentype font can be used.

Breaking out from web-safe fonts Times New Roman, Helvetica, Arial, Verdana, Georgia, Tahoma, Tebuchet etc ...
0 Comment
Write comment
7

By using CSS @font-face embedding technique it is possible to embed fonts such that they are downloaded to the browser and then used to style the sections which have been given the font-family property.

Steps to use @font-face are as follows :-

  1. Get a free/premium font that you are licensed to use.
  2. Usually this would be one or two of the different types of fonts you will need to implement @font-face
  3. Head to Font Squirrel's @font-face kit generator and upload your font file
  4. Use the resulting kit in your code directly

or

If you have all the font files and want to write the code yourself, here are the steps :-

Copy all the font files into the css folder and in your css, write the following code

@font-face {'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

Your font-family property should use 'MyFontFamily' in the css document. This syntax despite looking simple and clean has gone through a lot of experimentation to work across all devices that support @font-face. Please find a brief history of the syntax development in the following link

In September 2009, Paul Irish came up with the Bulletproof syntax for writing the @font-face ...
0 Comment
Write comment
8

While a lot of challenges in the field of typography have already been conquered, there still remains an uphill task for creating a perfect platform for web typography. A few are listed here :-

Responsive Typography

Em based designing helps us achieve responsiveness in mobile devices but it has a complex and long development cycle. Also the fonts might not perform as well across all devices.

Font Rendering

This problem is not going to solve overnight with the pace of innovation in displays, however we have smoother, better looking text on the Retina screens. An in depth discussion on font rendering is given in this article from Smashing Magazine.

Language Support

Very few web fonts support Asian languages despite the huge audience. This has been discussed in detail here

Licensing Issues

The way fonts are being served to users through the @font-face delivery mechanism. One can extract font files and use it illegally. Hence many foundries are not opening their fonts to the web. Discussed in detail here.

0 Comment
Write comment
9

Open Sans

Without doubt one of the most amazing web fonts, designed by Steve Matteson, type director at Ascender Corp, this humanist sans serif boasts great legibility even at small sizes, and has been optimized for both web and mobile interfaces.

Josefin Slab

Drawing on the trend for 1930-style geometric typefaces with some added Scandinavian flavour, Santiago Orozco’s distinctive slab serif brings a distinctive ‘typewriter’ feel to its
sans serif counterpart, and is perhaps best suited to display use.

EB Garamond

Since its roots in the 16th century, the humanist serif face Garamond has become a true typographic icon, and much copied. This particular open-source project by Georg Duffner seeks to bring the essence of Claude Garamond’s masterpiece onto the web.

Raleway

Raleway is an elegant sans-serif typeface, designed in a single thin weight. It is a display face that features both old style and lining numerals, standard and discretionary ligatures, a pretty complete set of diacritics, as well as a stylistic alternate inspired by more geometric sans-serif typefaces than it's neo-grotesque inspired default character set.


Head straight to Google Web Fonts and Font Squirrel to get many more amazing free fonts.

0 Comment
Write comment
10
0 Comment
Write comment
10
Sections
3599
Views
1. Typography and Lettering
2. Key Terms Explained
3. Things to do before starting Typography
4. How HTML4 implemented Typography
5. How CSS gave life to Text
6. JavaScript Alternatives for Custom Fonts
7. The advent of @font-face
8. Challenges Ahead
9. Some Great Free Web Fonts
10. Typography Blogs
Share
3
Share
23
Login and track your Progress
0%
F Like this Lesson ? Invite your friends to LurnQ.
Recommendation For You
Loading
Something messed up. Click Refresh Recommendations button and try again.
Discuss this Lesson
Loading Details
Loading...
Give us your valuable Feedback
Some error occured, please try again.
Feedback
Bug Report
Loading Details