{"id":1129,"date":"2010-05-27T12:37:08","date_gmt":"2010-05-27T17:37:08","guid":{"rendered":"http:\/\/crysodenkirk.com\/blog\/?p=1129"},"modified":"2010-06-27T17:23:03","modified_gmt":"2010-06-27T22:23:03","slug":"in-search-of-bolder-type-and-a-font-outline","status":"publish","type":"post","link":"https:\/\/crysodenkirk.com\/blog\/2010\/05\/in-search-of-bolder-type-and-a-font-outline\/","title":{"rendered":"In Search of Bolder Type and a Font Outline"},"content":{"rendered":"<p>I have always been annoyed by how not-bold the standard browser-safe system fonts are at smaller font sizes. And even now, calling in a bolder typeface using @font-face is not always a viable option (like a project I&#8217;m working on right now). I need heavier type than Verdana bold, and it needs an outline to make it stand out against its background, it can&#8217;t have any extra markup, and it has to be cross browser compatible.<!--more--><\/p>\n<p>Here&#8217;s my text without styling:<\/p>\n<style type=\"text\/css\">\n.outline_example,.outline_example span{display:inline-block;}\n.outline_example{\n    background:-webkit-gradient(linear, left top, left bottom, from(#444), to(#222), color-stop(0.5, #bbb));\n    background:-moz-linear-gradient(0% 100% 90deg, #222, #bbb, #444 28px) bottom center repeat-x #4A494A;\n    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#cccccc', endColorstr='#666666');\n    position:relative;\n    display:block;\n    color:#fc0;text-shadow:none;\n    padding:0;\n   }\nspan.outline_example span{\n    font:16px\/1.5 Verdana, Tahoma, Geneva, sans-serif; color:#fc0;text-shadow:none;\n    padding:3px;\n    position:relative;\n    display:block;\n    }\npre{\n  margin: 16px 35px 16px 32px;\n  padding:8px;\n  white-space: pre-wrap; \/* css-3 *\/\n  white-space: -moz-pre-wrap !important; \/* Mozilla, since 1999 *\/\n  white-space: -pre-wrap; \/* Opera 4-6 *\/\n  white-space: -o-pre-wrap; \/* Opera 7 *\/\n  word-wrap: break-word; \/* Internet Explorer 5.5+ *\/\n  font-family:monospace;\n  border:2px solid #D28D40;\n  background-color:#F8DF9C;\n  text-shadow:none !important;\n  }<\/p>\n<\/style>\n<p><span class=\"outline_example\"><span>This is Verdana or Tahoma or Geneva<\/span><\/span><\/p>\n<p>Note, these are actual colors from a current project and no, I don&#8217;t get a say in that. I just have to make it work. But this? Is totally unreadable. Let&#8217;s make it bold:<\/p>\n<p><span class=\"outline_example\"><span style=\"font-weight:bold;\">Really? You call this bold?<\/span><\/span><\/p>\n<p>Better, but still basically unreadable. For one thing, it&#8217;s not bold enough. But even if I could make it bolder, it would still be hard to read against this background. It needs a nice dark background for that color of text! <\/p>\n<p>I grumble to myself: If I could just do this in photoshop&#8230; ah, for a good black outline.<\/p>\n<p>But wait!<\/p>\n<p>Firefox supports text-shadows now. IE has its weird &#8220;filter&#8221; renderings. Maybe just throwing in a text-shadow will solve it:<\/p>\n<p><span class=\"outline_example\"><span  style=\"font-weight:bold;text-shadow:1px 1px 2px #000;filter:progid:DXImageTransform.Microsoft.Shadow(color='black', Direction=90, Strength=4);\">Better but&#8230; still hard on the eyes. Also, not very bold.<\/span><\/span><\/p>\n<p>Here&#8217;s the css for the shadow:<\/p>\n<pre>text-shadow:1px 1px 2px #000;\r\nfilter:progid:DXImageTransform.Microsoft.Shadow(color='black', Direction=90, Strength=4);<\/pre>\n<p>I? Am very picky. I may not get to pick the color and the background but I can damn well make the combination work. That&#8217;s what I do.<\/p>\n<p>Some people may use the word &#8220;stubborn&#8221; in place of picky&#8230;<\/p>\n<p>So I ponder. I google to see the progress on font-effect:outline (which really doesn&#8217;t do what I want but hey, the spec&#8217;s still up in the air). I see lots of people asking the question of how to add an outline but no one answering it&#8230;<\/p>\n<p>And then it hits me. I can make the text bolder using the text-shadow declaration with a 0px offset.<\/p>\n<p><span class=\"outline_example\"><span style=\"font-weight:bold;text-shadow:0px 0px 1px #fc0;filter:progid:DXImageTransform.Microsoft.Shadow(color='#ffcc00', Direction=90, Strength=3);\">Going cross-eyed trying to read this.<\/span><\/span><\/p>\n<pre>text-shadow:0px 0px 1px #fc0;\r\nfilter:progid:DXImageTransform.Microsoft.Shadow(color='#ffcc00', Direction=90, Strength=3);<\/pre>\n<p>Kinda fuzzy. And it doesn&#8217;t stand out against the background. Not happy with this one. But text-shadow supports multiple shadows on the same element (IE doesn&#8217;t, but it worked with just one filter):<\/p>\n<p><span class=\"outline_example\"><span style=\"font-weight:bold;text-shadow:0px 0px 1px #fc0,0px 0px 3px #000,0px 0px 3px #000;filter:progid:DXImageTransform.Microsoft.Glow(color='#333333', Strength='1');\">Ah, bolder and actually legible!<\/span><\/span><\/p>\n<pre>text-shadow:0px 0px 1px #fc0,0px 0px 3px #000,0px 0px 3px #000;\r\nfilter:progid:DXImageTransform.Microsoft.Glow(color='#333333', Strength='1');<\/pre>\n<p>The trick is to declare the black shadow twice at 3px because once is hardly visible. It&#8217;s transparent enough at that distance to barely register.But the 1px gold shadow gives the letter forms just a hair&#8217;s more heft. It&#8217;s not really any bolder, it just <em>looks<\/em> bolder.<\/p>\n<p>Haven&#8217;t had a chance to test it in Safari, Chrome, IE6 or Opera but I&#8217;m pretty happy with it in Firefox 3.6 and IE7\/8 &#8212; which is more than 97% of the users I have to consider for this project. I&#8217;ll update as I get the chance to test in other browsers.<\/p>\n<p>Edit: Safari&#8217;s good.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have always been annoyed by how not-bold the standard browser-safe system fonts are at smaller font sizes. And even now, calling in a bolder typeface using @font-face is not always a viable option (like a project I&#8217;m working on &hellip; <a href=\"https:\/\/crysodenkirk.com\/blog\/2010\/05\/in-search-of-bolder-type-and-a-font-outline\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69,27],"tags":[62],"class_list":["post-1129","post","type-post","status-publish","format-standard","hentry","category-tutorials","category-web-design","tag-css","tutorials","web-design"],"_links":{"self":[{"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/posts\/1129"}],"collection":[{"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/comments?post=1129"}],"version-history":[{"count":75,"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/posts\/1129\/revisions"}],"predecessor-version":[{"id":1346,"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/posts\/1129\/revisions\/1346"}],"wp:attachment":[{"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/media?parent=1129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/categories?post=1129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/tags?post=1129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}