{"id":124,"date":"2010-02-10T22:51:57","date_gmt":"2010-02-11T03:51:57","guid":{"rendered":"http:\/\/sethalling.com\/?p=124"},"modified":"2016-09-10T11:52:28","modified_gmt":"2016-09-10T16:52:28","slug":"typography-web-design-why-go-web-safe","status":"publish","type":"post","link":"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/","title":{"rendered":"Typography &#038; Web Design: Why Go Web-Safe"},"content":{"rendered":"<p>I have spent the last few years of my life as strictly a print designer. Even though I began with websites almost fifteen years ago, I felt limited with what I could do. As CSS was just coming out, I switched over to print and figured that I wouldn&#8217;t ever really go back to web design. From the looks of where things are at now, I was wrong.<\/p>\n<p>Anyway, through all of my years working with print project, I came to love typography. By altering just one simple typeface, a whole design could be changed. Unfortunately, now that I have returned to web design (no, that is not the unfortunate part), I have been limited to about five typefaces: Arial, Verdana, Times (New Roman), Georgia, and Courier. Obviously, there are more, but those are just a few.<\/p>\n<p>Why are there so few options, you ask? Because not everyone owns the same computer with the same fonts installed. For the typeface to show up correctly on one&#8217;s computer, they must have that typeface installed. If not, then it will move to an alternative, selected by the developer, down to whatever the default is on that person&#8217;s computer.<\/p>\n<p>Although there are many different ways that one can use image-replacement or font-replacement to achieve a better design, are these ways really effective?<\/p>\n<p>What is the main thing that people notice in web design? I guess I just gave away the answer in the question. It&#8217;s the design. Either the design is good or bad and that will have an instant impact on your visitor&#8217;s experience and your reputation as a person or company. Typography can either bring a design together or tear it apart.<\/p>\n<p>There are many different options to get what you want: sIFR, @font-face, cuf\u00f3n, SIIR, and image replacement are all different techniques, but they all have their limitations. Some may claim they do it all, but unfortunately, no one has yet created the perfect replacement method. There is a new paid service called Typekit, which looks promising, but currently the font selection are limited.<\/p>\n<p>Below are the problems that come with various font-replacement methods:<\/p>\n<ul>\n<li>Increased Load Time<\/li>\n<li>Not All Text Read by Spiders<\/li>\n<li>Simple Changes are Time-Consuming<\/li>\n<li>Text is not Selectable<\/li>\n<li>Font Copyright Restrictions<\/li>\n<li>Limited Font Selection<\/li>\n<li>Pay for the Service<\/li>\n<\/ul>\n<p>If you have noticed, the top two reasons listed are both directly related to SEO, and almost every replacement method will increase your load time, even if just by a small amount. Now, because we all know content is king, I&#8217;m not saying that your website is doomed if you use one of these methods; I&#8217;m just saying that it isn&#8217;t helping your site&#8217;s ranking. Also, I&#8217;m not saying your SEO will instantly be good by avoiding these methods.<\/p>\n<p>All in all, you have the final say on what is more important to you? Your website design, or your site&#8217;s ranking\/user-friendliness. Personally my choice is the latter, and I&#8217;m a designer!<\/p>\n<p>There is also an alternative method called <a href=\"http:\/\/www.awayback.com\/revised-font-stack\/\" title=\"Revised Font-Stacking\" target=\"_blank\">revised font-stacking<\/a>, where you list many similar styles and choose how you want to degrade, giving everyone a slightly different viewing experience. To me, that is ok and is the best alternative available at the moment.<\/p>\n<p>If anyone knows of the perfect font-replacement method, then I would love to know about it. My wish is that @font-face can become more widely supported by browsers so we can eventually just move forward that way.<\/p>\n<p><small>Image Source: <a href=\"http:\/\/www.flickr.com\/photos\/dmitry-baranovskiy\/366549298\/\" title=\"Image Attribution\">http:\/\/www.flickr.com\/photos\/dmitry-baranovskiy\/366549298\/<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the common gripes that web designers have is the limited selection of typefaces they can use. Although there are many different font-replacement methods that exist, there is no perfect way. That is when a decision needs to be made. Do you focus on design or search engine\/user-friendliness?<\/p>\n","protected":false},"author":1,"featured_media":179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[5,8],"acf":[],"yoast_head":"<title>Typography &amp; Web Design: Why Go Web-Safe<\/title>\n<meta name=\"description\" content=\"One of the common gripes that web designers have is the limited selection of typefaces they can use. Is there a perfect font-replacement method?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Typography &amp; Web Design: Why Go Web-Safe\" \/>\n<meta property=\"og:description\" content=\"One of the common gripes that web designers have is the limited selection of typefaces they can use. Is there a perfect font-replacement method?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/\" \/>\n<meta property=\"og:site_name\" content=\"Seth Alling\" \/>\n<meta property=\"article:published_time\" content=\"2010-02-11T03:51:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-09-10T16:52:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sethalling.com\/content\/uploads\/2010\/02\/typography-header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"610\" \/>\n\t<meta property=\"og:image:height\" content=\"144\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Seth Alling\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Seth Alling\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/\",\"url\":\"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/\",\"name\":\"Typography & Web Design: Why Go Web-Safe\",\"isPartOf\":{\"@id\":\"https:\/\/sethalling.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sethalling.com\/content\/uploads\/2010\/02\/typography-header.jpg\",\"datePublished\":\"2010-02-11T03:51:57+00:00\",\"dateModified\":\"2016-09-10T16:52:28+00:00\",\"author\":{\"@id\":\"https:\/\/sethalling.com\/#\/schema\/person\/31e4e1211a7d7d70251b7db49db74e37\"},\"description\":\"One of the common gripes that web designers have is the limited selection of typefaces they can use. Is there a perfect font-replacement method?\",\"breadcrumb\":{\"@id\":\"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/#primaryimage\",\"url\":\"https:\/\/sethalling.com\/content\/uploads\/2010\/02\/typography-header.jpg\",\"contentUrl\":\"https:\/\/sethalling.com\/content\/uploads\/2010\/02\/typography-header.jpg\",\"width\":610,\"height\":144,\"caption\":\"Typography\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sethalling.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Typography &#038; Web Design: Why Go Web-Safe\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sethalling.com\/#website\",\"url\":\"https:\/\/sethalling.com\/\",\"name\":\"Seth Alling\",\"description\":\"Detroit WordPress Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sethalling.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/sethalling.com\/#\/schema\/person\/31e4e1211a7d7d70251b7db49db74e37\",\"name\":\"Seth Alling\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sethalling.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4ad3f61b13af506ff4fd890f1fe4cd64?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4ad3f61b13af506ff4fd890f1fe4cd64?s=96&d=mm&r=g\",\"caption\":\"Seth Alling\"},\"description\":\"Detroit Web Developer &amp; Graphic Designer Follow me: Twitter | WordPress | GitHub\",\"url\":\"https:\/\/sethalling.com\/author\/sethalling\/\"}]}<\/script>","yoast_head_json":{"title":"Typography & Web Design: Why Go Web-Safe","description":"One of the common gripes that web designers have is the limited selection of typefaces they can use. Is there a perfect font-replacement method?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/","og_locale":"en_US","og_type":"article","og_title":"Typography & Web Design: Why Go Web-Safe","og_description":"One of the common gripes that web designers have is the limited selection of typefaces they can use. Is there a perfect font-replacement method?","og_url":"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/","og_site_name":"Seth Alling","article_published_time":"2010-02-11T03:51:57+00:00","article_modified_time":"2016-09-10T16:52:28+00:00","og_image":[{"width":610,"height":144,"url":"https:\/\/sethalling.com\/content\/uploads\/2010\/02\/typography-header.jpg","type":"image\/jpeg"}],"author":"Seth Alling","twitter_misc":{"Written by":"Seth Alling","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/","url":"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/","name":"Typography & Web Design: Why Go Web-Safe","isPartOf":{"@id":"https:\/\/sethalling.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/#primaryimage"},"image":{"@id":"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/#primaryimage"},"thumbnailUrl":"https:\/\/sethalling.com\/content\/uploads\/2010\/02\/typography-header.jpg","datePublished":"2010-02-11T03:51:57+00:00","dateModified":"2016-09-10T16:52:28+00:00","author":{"@id":"https:\/\/sethalling.com\/#\/schema\/person\/31e4e1211a7d7d70251b7db49db74e37"},"description":"One of the common gripes that web designers have is the limited selection of typefaces they can use. Is there a perfect font-replacement method?","breadcrumb":{"@id":"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/#primaryimage","url":"https:\/\/sethalling.com\/content\/uploads\/2010\/02\/typography-header.jpg","contentUrl":"https:\/\/sethalling.com\/content\/uploads\/2010\/02\/typography-header.jpg","width":610,"height":144,"caption":"Typography"},{"@type":"BreadcrumbList","@id":"https:\/\/sethalling.com\/typography-web-design-why-go-web-safe\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sethalling.com\/"},{"@type":"ListItem","position":2,"name":"Typography &#038; Web Design: Why Go Web-Safe"}]},{"@type":"WebSite","@id":"https:\/\/sethalling.com\/#website","url":"https:\/\/sethalling.com\/","name":"Seth Alling","description":"Detroit WordPress Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sethalling.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/sethalling.com\/#\/schema\/person\/31e4e1211a7d7d70251b7db49db74e37","name":"Seth Alling","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sethalling.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4ad3f61b13af506ff4fd890f1fe4cd64?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4ad3f61b13af506ff4fd890f1fe4cd64?s=96&d=mm&r=g","caption":"Seth Alling"},"description":"Detroit Web Developer &amp; Graphic Designer Follow me: Twitter | WordPress | GitHub","url":"https:\/\/sethalling.com\/author\/sethalling\/"}]}},"mv":{"thumbnail_id":179,"thumbnail_uri":"https:\/\/sethalling.com\/content\/uploads\/2010\/02\/typography-header-300x71.jpg"},"_links":{"self":[{"href":"https:\/\/sethalling.com\/wp-json\/wp\/v2\/posts\/124"}],"collection":[{"href":"https:\/\/sethalling.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sethalling.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sethalling.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sethalling.com\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":0,"href":"https:\/\/sethalling.com\/wp-json\/wp\/v2\/posts\/124\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sethalling.com\/wp-json\/wp\/v2\/media\/179"}],"wp:attachment":[{"href":"https:\/\/sethalling.com\/wp-json\/wp\/v2\/media?parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sethalling.com\/wp-json\/wp\/v2\/categories?post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sethalling.com\/wp-json\/wp\/v2\/tags?post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}