1 / 21

Font Usage on the Web

Font Usage on the Web. Used to be true that …. Normally end users can only see the fonts that are already installed on their computers. If not installed, browsers will show some other font that is on the user’s computer.

tivona
Download Presentation

Font Usage on the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Font Usage on the Web

  2. Used to be true that … • Normally end users can only see the fonts that are already installed on their computers. • If not installed, browsers will show some other font that is on the user’s computer. • In CSS define a font for an element (such as <p>) by specifying multiple fonts so that if your preferred font is not available your CSS file should use the available alternatives. • h1,h2,h3,h4,h5,h6{font-family: "Myriad Pro", Helvetica, Arial, Verdana, sans-serif;} • body{font-family: "Garamond Pro", "Times New Roman", Times, serif;}

  3. But Now … • Various methods for using custom fonts Not INSTALLED on end user’s computer • Self-Hosted: Fonts installed on web server for your domain • Purchased from Font Foundry, downloaded to your domain, assembled into a “@font-face kit” • If free fonts then you will need to use 3rd party software to create @font-face kit and be absolutely sure it is legal for you to use the font this way • http://www.fontsquirrel.com/tools/webfont-generator • Referenced using @font-face declaration in CSS • Sometimes a JavaScript file must also be linked to HTML • Hosted: Fonts downloaded from 3rd party servers • Sometimes free but may include monthly fee for usage • Google Fonts, Adobe TypeKit • Referenced using link tag in head of HTML

  4. Self-HostedWeb Font Kit files Example from MyFonts.com

  5. Self-Hosted, CSS code@font-face example /*default version*/ @font-face {font-family: 'lovelyFont'; src: url('fonts/lovely_font.eot'); src:url('fonts/lovely_font.otf') format('opentype'); } /*bold version*/ @font-face {font-family: 'lovelyFont'; src: url('fonts/lovely_font_bold.eot'); src: url('fonts/lovely_font_bold.otf') format('opentype'); font-weight: bold; } p{ font-family: lovelyFont, sans-serif; } strong{font-family: lovelyFont, sans-serif; font-weight: bold; }

  6. Hosted Example, Google Open Sans • HTML HEAD <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800' rel='stylesheet' type='text/css'> • CSS P{font-family: 'Open Sans', sans-serif;}

  7. Modular Scale • There should be thought given to the relative sizing of a font for a web site. • Modular scales add a consistent hierarchy to your typography by making your sizing decisions using numbers from the scale. • http://modularscale.com • Decide base font size  14px (default 1em) • For example, use the golden ratio of 1 to 1.618 as your scale • H1(default 2em, 28) = 59.301 • H2(default 1.5em, 21) = 36.651 • H3(default 1.17em, 16) = 22.652 • H4(default 1em, 14) = 14 • H5(default .83em, 11) = 8.653 • H6(default .67em, 9) = 5.348

  8. Fonts: Units of Measure • pixel- non responsive absolute unit of measure • Body{font-size:16px;} • percent - responsive absolute unit of measure dependent on context • Body{font-size:100%;} // correlates to default browser settings, usually 16px • em - responsive relative unit of measure dependent on context • Body{font-size:1em;} // same as size set in HTML font-size declaration or same as default • rem – NEW CSS3 responsive relative unit of measure dependent only on root tag (HTML) (browser support got to  http://canIuse.com) • Body{font-size:1rem;} // same as size set in HTML font-size declaration

  9. Context: em versus remtarget pixels/context pixels=result em • The em uses the context of parent containers and current container to set size, for example body{font-size:16px;} h1{font-size:1.5em; //context is body = 16 * 1.5 = 24px line-height:1.25em; //context is h1 = 24 * 1.25 = 30px margin: .5em 0 0 0; } //context is h1 = 24 * .5 = 12px • rem – only context is root tag of document (HTML) html{font-size:100%;} //default is usually 16px h1{font-size:1.5rem; //context is body = 16 * 1.5 = 24pxline-height:1.875rem; //context is h1 = 16 * 1.875 = 30px margin: .75rem 0 0 0; } //context is h1 = 16 * .75 = 12px

  10. Effective Font Stacks • Font Stacks are your fallback for a hosted web font that doesn’t load or for the end user not having the font you want to use • Examples, Are these good font stacks? How can you know? • font-family: "Noto Sans", "Myriad Pro", Helvetica, Arial, Verdana, sans-serif; • font-family: "Garamond Pro", Georgia, "Times New Roman", Times, serif; • FFFFallback.com – bookmarklet tool that will allow you to compare our preferred font to an alternate font

  11. Effective Font Stacks: Parts of letterforms to compare for fonts in stack • Letter height, x-height and cap height as well as height of crossbars • Height of ascenders and descenders • Letter width, width of counters and loop • Tracking and Kerning: Space between letters • Line height: space between baselines baseline

  12. FFFFallback used to compare 2 fonts:font in use Verdana Verdana Arial overlay in magenta Myriad Pro overlay in magenta Noto Sans overlay in magenta Trebuchet MS in magenta Calibri overlay in magenta

  13. Readable Line Length • Line Length should be in the range of 45-75 characters • Chris Coyier of css-tricks.com has put together a handy bookmarkletthat will actually highlight/colorize the 45th through 75thcharacter of any given line. • http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/ • You drag the button up to your bookmarks bar,then click it on any site you want to use it on. • First you click it to activate it, then you click it on a body copy element (like a paragraph). • Then you can resize the window around to seewhere the line is breaking and try to get it close.

  14. Bookmarklet Colorizing Readable Line Length – characters 45 to 75 are red in selected content

  15. Miscellaneous Style Rules • Drop Cap for first letter of paragraph that follows an h1 h1+p::first-letter{font-family: “Trajan Pro”, serif; font-size: 4em, float: left; color:#800020; line-height: 0.65; padding: 0.085em 3px 0 0; • First line all small caps h1+p::first-line{font-variant: small-caps; letter-spacing: 0.15em; • Text Shadow h1 {text-shadow: 1px 1px1px #000;} /* x offset, y offset, blur amount, color-can be expressed as rgba with alpha: rgba(255, 255, 255, 0.4) */

  16. Example: Visually Interesting Use of Fonts H1 H2 H3 p:nth-of-type(1):first-letter

  17. Code for Previous Example(uses Modular Scale 16px @ 1:1.618) HTML CSS body {font-size:16px; line-height:25px; font-family: Georgia, Times, serif; color:#333;} article {width:80%;max-width:800px;margin: auto;} h1 {font-size:67px; line-height:67px; margin:67px 0 0 0; text-align: center;} h2 {font-size:41px; line-height:41px; margin:16px 0; font-style: italic; color:#545454; text-align: center;} h3 {font-size:16px; margin:16px 0;font-weight: normal; text-transform: uppercase; font-family: Helvetica, Verdana, sans-serif; color:#5a7792; text-align: center;} p:nth-of-type(1):first-letter {font-size:109px; line-height:82px; float: left; color:#47a6ff; padding: 0px 6px 0px 4px; } <body> <article> <h1>Adventure V. The Five Orange Pips</h1> <h2>From The Adventures of Sherlock Holmes</h2> <h3>By Sir Arthur Conan Doyle</h3> <p>When I glance over my notes and records of the Sherlock Holmes cases between the years ’82 and ’90, I am faced by so many which present strange and interesting features that it is no easy matter to know which to choose and which to leave.

  18. Identifying Quality Web Fonts • Most fonts provide a font specimen page that we can use to perform browser testing. • Create your own type specimen page using the web font specimen template provided by Tim Brown (http://webfontspecimen.com/). • Viewing these custom specimen pages in a variety of browsers will give you firsthand knowledge as to how the font performs. • If you happen to a font you find especially readable while your surfing the web, you can use Whatfont(Chrome Extension) to identify what font that is, and make a little mental note for future use in your own projects. • Use Google Font Previewer (Chrome Extension) to preview a font from the Google collection in use on your own page.

  19. WhatFont Chrome Extension Inspect and identify web fonts by just hovering on them. It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

  20. GoogleFontPreviewer Choose a font from the Google font directory and preview it in use on the current tab; includes a few styling options

  21. Partial Example of Web Font Specimen

More Related