INTRO:
str on em td . ar LS) eb g l (N En m as ste gl Sy ou ine nl O es at
still in the works, and some of the most popular browsers do not yet support them. But we feel it’s important that you, as an informed and curious Web designer, know what’s around the corner and be able to experiment in your projects.
By Sean Hodge, April 28th, 2008 • Smashing Magazine
By: Inayaili de Leon, March 1st, 2010 • Smashing Magazine There has been an increasing and sincere interest in typography on the web over the last few years. Most websites rely on text to convey their messages, so it’s not a surprise that text is treated with utmost care. In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS1 Text Level 3 specification, which should give Web designers finer control over text. Keep in mind that these new properties and techniques are either new or
CSS:
1
Cascading Style Sheet. This is a document format which provides a set of style rules which can then be incorporated in an XHTML or HTML document. It is a means to separate web content from formatting and presentation information.
There are some basic approaches, guidelines and goals to consider when working with type on the Web. Overall, the medium of Web typography involves readability, accessibility, usability, and brandability. On the Web, these aspects function together to accomplish design’s goals of communication and user interaction. There are many ways to approach Web typography in order to create effective and expressive results. Let’s take a closer look at some principles, rules
an
is
ho
ch
w
ty
po
gi
gr
ap
n g hy
b
t w o e
pr in t
cy en ct Ag du ts con ec oj to Pr ET ch ar AN g. se RP in Re A ork ed ns tw nc issio ne va on Ad mm ch Co sear re
D
s xt”. in co erte on yp els H N m“ d r Te e te th
Print to web, what’s that?! We will be talking about how type is working on the web and what some outcomes are for good design on the web using typography. Through this engaging layout you will go through a timeline of events for the web (top of layout) as well as keywords that are frequently used for the web (bottom of layout). Using the web is a great way to show off typographic skills and is an engaging way for people to see your work. Hopefully after reading through you will check out some sites online and learn some of the web terms to help create your own typographic elements for the web!
52 | Print to Web: How Typography Is Changing
All typographic decisions function within the scope of the problem at hand. Different sites will have various needs. There isn’t always one answer for each problem. It requires careful consideration of the strengths and weaknesses that each solution poses to the various areas that web typography effects. While typeface selection for headlines is a common issue that comes up in web design, using type on the Web involves more than font selection. A systematic approach can be brought to many other facets as well. We’ll move on to look at this in regards to information hierarchy next.
, am , gr g” ro hin a p ert v e es rit n-E ad e w po be m . Le -U o n t es ser ithi ks od n n rn i Be re-W ws l ary i tr m o Ti nqu all arbi “E ich en wh twe be
Print to Web: How Typography Is Changing | 53
guidelines may require from the designer to use specific typefaces which can’t be used online direcly. So a decision needs to be made: •D eviate from the brand guidelines to maintain optimal search engine friendliness •U se an image replacement solution which embeddes the required font in an image (statically or dynamically) •C onsider using sIFR, a rich Flash-based dynamic font embedding technique which allows not only for embedding fonts into content presentation but also interacting with them (almost) as you would do with plain text. In many cases, the myriad of goals Web typography needs to serve will be conflicting with each other. With each client and for each projects you need to prioritize and define which goals are more important than the others. Some clients will be more concerned with maintaining brand identity, and others will put search engine friendliness higher.
as ly te ra pe se . ed IP) ish ( bl col pu oto P r TC et P n of rt ter Pa e In th
In web design every typographic decision needs to simultaneously accomplish a variety of results. Each headline you create should be set in text that is legible and search engine friendly, while the typeface should fit within the guidelines of the company’s brand. Furthermore, typography should fit to the graphic style of the site and meet user expectations of being able to copy and paste text. As you can see, that’s a wide array of needs for a headline to accomplish. In some cases, this poses a problem. For instance, styling and branding
am gr he ro g t ss. s p sin dre nd u ad , pa rs e ex use f th n o so ET rt l in N p a m PA as To AR ign s to ” “@
ail m se a te ss ea ro cr ac N es BB sag of es n m . so d k lin sen wor om to net y T am d Ra gr ute o pr strib di
and ideas for approaching Web typography decisions — you can use them as a starting point for learning how to achieve effective type setting on the Web.
There is more than one way to define precedence through the use of typography. First of all, the type size, color, weight, case, and whether the type is set normal or in italics will give the font greater or smaller importance. We also can’t ignore where the type is placed within our website layout. Mark Boulton has a great 5 part series on Typography called Five simple steps to better typography. In the 5th part of this series, he discusses weight. He gives a historical perspective on how weight works with typeface in creating a hierarchical order. The article explains what text types users expect for different parts of a page. Users will react to type differently depending on where it is placed on the page.
54 | Print to Web: How Typography Is Changing
b s m y) ste ig sy rod up L, P s. s a ldi AO cce a al e, on rv et iti Se rn ad pu nte Tr om e I (C ovid pr
e
eg in
r se ow br r, st to fir edi . r or ), s f eb” wse in o eg eW br t b id de en ldW mo pm or eelo “W lin ev d nd e all er, a rv
se
p ro Eu of y. de sit tsi er ou niv er d U rv se for eb tan t W at S rs Fi t up se
D (c
s ce S). du ro (DN nt s i m sh tri ste to pe e Sy acin . t ka oc am M ou M n N pple es i m ul Pa oma rst A r co D e fi ute Th mp Co
to
Type placed in the main body copy will have greater importance than type placed in a sidebar, with all other factors being equal. Large type in the sidebar will still call attention to itself and could move itself up in the pecking order. One needs to carefully balance type in the main body and sidebar area based on how you want the user to digest the information you present. Placement has a large effect on how we react to the type on the Web. Emerged conventions, such as a less importance given to sidebar, helps us to focus on the main content and guide us through the visual hierarch of the site. Conventions also helps us to treat content within various page areas differently.
Print to Web: How Typography Is Changing | 55
Ultimately, it’s up to the designer to create good flow. Concentrate on each element of spacing and hierarchy. Then review how they work together as a whole. Take a closer look at the image above to get an idea of how elements work together to create a good flow. Hierarchy is important in page flow as well. It helps users to recognize the most important elements of the page as they scroll down through it. There are other typographic issues to look at regarding the flow. Spacing is a big part of the flow. White space, tracking, leading, indentation, as well as the padding and margins on elements — all these elements form the flow of the page. Nick La has written an article on Typographic Contrast and Flow. It uses the Web Designer Wall site as an example of good flow. The explanation given of flow is concise, “Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next.”
In order for a website to stand out the visual design of the site needs to be of high quality. In some cases, this takes the form of an elaborate design. With the growing popularity of illustrative and heavily textured sites, the need to make sure that typography is optimally chosen remains particularly important. Let’s review a few sites that use grunge design and texture elements. We’ve looked at
these sites before in the article The Secrets Of Grunge Design, but not in this way.sure that typography is optimally chosenremains particularlyimportant. Let’s review a few sites that use grunge design and texture elements. We’ve looked at these sites before in the article The Secrets Of Grunge Design, but not in this way. In the website painisgood.com, the company’s brand is dominating the page. Most of the text on the page has been replaced with images. This allows the designer to take advantage of brand identity fully. When embedded in images, fonts can be used in a variety of creative ways. The designer has strongly emphasized the brand compromising use of plain text which may hinder search engine success. Also, the top navigation is unusual. There is a low contrast in the navigation elements. It works, but could be improved.
56 | Print to Web: How Typography Is Changing
OUTRO: TM H L5 ro nt
i is d. ce du
e -fr lty e
p ou Gr re tu
se eu d, ar ce ts du on f ro nt way er. v si t i he re ki g t fo pe in b, Ty ng we a ch the on
ya Ro ts op y. ad olic 3C t P W ten Pa
c te rs te hi ar rc ch al A 3C ic W chn Te
People all over the world are working countless hours per day to make what you see in print accesible for the web. A couple websites that you should look at will help understand how fonts are being created on the web and their importance with code:
w3schools.com typekit.com
d
).
AG (T
Bart-Jan Verhoef ‘s portfolio focuses on text rather than on visual elements. There are a few carefully selected brand and design elements converted to images, but a large percentage of the text is kept as web text. The mood of the design is created with background images, while the text remains functional.
Text within interfaces is extremely important. In the book Getting Real from 37 Signals (available for free), the author states how “every letter matters.” Word choice within user interfaces can make or break the functionality of the site. How those words are presented is equally important. Unstyled letterforms give no indication as to what users should interact with.
Print to Web: How Typography Is Changing | 57
Cameron Moll mentions the concept of treating text as a user interface in his article Nine skills that separate good and great designers. There is an accompanying presentation called Essential Web Skills that was done at Webmaster Jam in Dallas Texas. In this presentation, he describes how text is a fundamental part of the user interface. He also mentions that text makes an interface more “accessible and digestible.” The typeface that is used within the keywords at the bottom of each spread is called 04b. The fonts used within this typeface include: 03b, 08, 09, 11, 19, 20, 21, 24, 25, 30, and 31.
"With the growing popularity of illustrative and heavily textured sites, the need to make sure that typography is optimally chosen remains particularly important."
W3schools is a code compliant site that shows you the correct ways to enter code for your website. It is a handbook for the web to help create the most proficient sites. Typekit is a topic that unfortunetly was not able to be put in the spread. It allows you to enter code into your website and brings the specific font that you see in print, to the web creating beautiful typography for any site!