Better css font stacks   unit verse
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Better css font stacks unit verse

  • 1,190 views
Uploaded on

Better css font stacks unit verse

Better css font stacks unit verse

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,190
On Slideshare
1,190
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Better CSS Font Stacks | Unit Verse Unit Verse Currently viewing Better CSS Font Stacks (permalink). Go to main page. Other posts in "design" Better CSS Font Stacks by Nathan Ford 4 years ago 440 Comments One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font Other posts in "feature" stack. FONT STACKS GIVE YOU FREEDOM. You want to use Gill Sans? Go right ahead. Nothing should stop you. Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system. This means that you can use Gill Sans, and if your users don’t have it, you can give them an adequate substitute that will not diminish their experience. As Mr. Richard Rutter has already illustrated, there are quite an array of typefaces that may be sitting on your user’s machine ready to serve your design needs. Unfortunately, common web practices and/or technologies are not fully utilizing Other posts in "typography" this functionality. There seems to be a lack of consideration for the process of creating these stacks. For example, Dreamweaver’s defaults look like so: Arial, Helvetica, sans-serif Courier New, Courier, monospace Times New Roman, Times, serif Georgia, Times New Roman, Times, serif Verdana, Arial, Helvetica, sans-serif Geneva, Arial, Helvetica, sans-serif As you can see, there are not a whole lot of options, and the substitutes are often not appropriate. This is an example of how lax typographic standards on the web are leading to poor design decision making. I am not going to speculate, here, as to whose fault it is that typography on the web leaves much to be desired… there are probably as many culprits as there are offenses. I will say, though, that font stack are ultimately design factors, and should be scrutinized as such. ALL IN THE FAMILY When creating a stack, first consider the context of the text. Is it going to be a headline, sub-head, or body copy? This can determine the appropriate order of a stack, considering certain fonts work well for setting blocks of copy, while others work better at larger sizes. For example, Helvetica’s nuances work well on screen, when the text is large enough, while Helvetica Neue’s slightly wider letter forms read better at smaller sizes on screen. Arial reads slightly better than Helvetica at smaller sizes on the screen, as well. Therefore, your font stack for Helvetica may need to be different depending on whether it is used for body copy or a page title. Once context is considered, there are few more things to consider when building a stack. First, select your ideal candidate (more on that later). From there, the path of your choices may fork depending on the context. http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/[4/23/2013 6:59:06 PM] The easiest way for your clients to edit content. Unify: Browse. Edit. Done.
  • 2. Better CSS Font Stacks | Unit Verse TITLES [ GREATER THAN 12PX ]: font-family: Ideal, Alternative, Common, Generic; 1. Ideal – Your selection need not be bound by what is considered universally “web safe”. There are many more fonts that have a fairly high market penetration that you can choose from. Just don’t pick anything too obscure, or you will be the only one seeing it. 2. Alternative – When selecting headline and title fonts, remember that the nuances will be more noticeable, and therefore you need to select an alternative that is closer in spirit than size or relative value. To find a spiritual cousin, you may want to look within the same type classification, or look for something created by the same type designer. Mainly, look for similarities in the letter forms. 3. Common – At this point, you just need something similar that is not going to break your layout. 4. Generic – Cap it off with the generic classification, for those zealots that don’t believe in installing fonts. PARAGRAPHS [ LESS THAN OR EQUAL TO 12PX ]: font-family: Ideal, Fit, Common, Generic; 1. Ideal – Even if you intend this copy to match the titles, you may want to consider the readability of the typeface over the span of a few paragraphs. For example: Helvetica Neue and Arial are better suited to be read small and on screen than Helvetica. 2. Fit – Find something that is well represented, cross-platform that will not wreck your layout. For example: There is about 2 pts difference between the width of Times New Roman and Georgia. Multiply that by the number of characters in your copy blocks, and you could spell disaster for your otherwise-nicely-considered design. 3. Common – Something similar in flavor and well-represented. 4. Generic – Again, finish with the generic classification. Keep in mind that if your ideal font is only well represented on Macs, for example, you may want use an alternative that is more prevalent on Windows machines. For more information on the prevalence of certain typeface on certain operating systems, take a look at codestyle.org/css/font-family/. STACK YOUR DECK Now, using these guidelines, and building on the experience of much more knowledgeable type gurus, I have compiled a list of font stacks that will both open up more font possibilities for web designers, and hopefully offer more appropriate substitutes: p – balanced for paragraphs or body copy t – balanced for headlines or titles Arial, “Helvetica Neue”, Helvetica, sans-serif - p, t Baskerville, “Times New Roman”, Times, serif - p Baskerville, Times, “Times New Roman”, serif - t Cambria, Georgia, Times, “Times New Roman”, serif - p, t “Century Gothic”, “Apple Gothic”, sans-serif - p, t Consolas, “Lucida Console”, Monaco, monospace - p, t “Copperplate Light”, “Copperplate Gothic Light”, serif - p, t “Courier New”, Courier, monospace - p, t “Franklin Gothic Medium”, “Arial Narrow Bold”, Arial, sans-serif - p, t http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/[4/23/2013 6:59:06 PM]
  • 3. Better CSS Font Stacks | Unit Verse Futura, “Century Gothic”, AppleGothic, sans-serif - p, t Garamond, “Hoefler Text”, Times New Roman, Times, serif - p Garamond, “Hoefler Text”, Palatino, “Palatino Linotype”, serif - t Geneva, “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, Verdana, sans-serif - p Geneva, Verdana, “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, sans-serif - t Georgia, Palatino,” Palatino Linotype”, Times, “Times New Roman”, serif - p Georgia, Times, “Times New Roman”, serif - t “Gill Sans”, Calibri, “Trebuchet MS”, sans-serif - p “Gill Sans”, “Trebuchet MS”, Calibri, sans-serif - t “Helvetica Neue”, Arial, Helvetica, sans-serif - p Helvetica, “Helvetica Neue”, Arial, sans-serif - t Impact, Haettenschweiler, “Arial Narrow Bold”, sans-serif - p, t “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, sans-serif - p, t Palatino, “Palatino Linotype”, Georgia, Times, “Times New Roman”, serif - p Palatino, “Palatino Linotype”, “Hoefler Text”, Times, “Times New Roman”, serif - t Tahoma, Geneva, Verdana - p Tahoma, Verdana, Geneva - t Times, “Times New Roman”, Georgia, serif - p, t “Trebuchet MS”, “Lucida Sans Unicode”, “Lucida Grande”,” Lucida Sans”, Arial, sans-serif - p “Trebuchet MS”, Tahoma, Arial, sans-serif - t Verdana, Geneva, Tahoma, sans-serif - p Verdana, Tahoma, Geneva, sans-serif - t I did deliberately leave out some fonts, *cough* Comic Sans *cough*, because I do not particularly see the use in them, and I don’t believe that these examples will solve every typographic purpose, but hopefully it’s a start. Feel free to apply the above rules and create some stacks of your own. If you’re interested in a more comprehensive comparison, download the pdf [13.1 mb]. In it, you will find examples of both titles and copy, set in the different font stacks. Now, font stacks help us open up a few more typographic options to create a more engaging online communication, but how do we choose which specific face to use? And which of these web safe fonts will work as a good compliment? More on that in my next post. *** This article is available in Belorussian provided by http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/[4/23/2013 6:59:06 PM]