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.
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
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".
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:
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
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
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.
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 :-
- Get a free/premium font that you are licensed to use.
- Usually this would be one or two of the different types of fonts you will need to implement @font-face
- Head to Font Squirrel's @font-face kit generator and upload your font file
- Use the resulting kit in your code directly
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
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
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
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 :-
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.
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.
Very few web fonts support Asian languages despite the huge audience. This has been discussed in detail here.
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.
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.
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.
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 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.