{"id":1560,"date":"2010-09-07T23:59:34","date_gmt":"2010-09-08T03:59:34","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=1560"},"modified":"2011-05-14T00:38:21","modified_gmt":"2011-05-14T04:38:21","slug":"giving-challenged-font-face-fonts-the-italics-makeover","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2010\/09\/07\/giving-challenged-font-face-fonts-the-italics-makeover\/","title":{"rendered":"Giving Challenged @font-face Fonts <em>The<\/em> <em>Italics<\/em> <em>Makeover<\/em>"},"content":{"rendered":"<p>See the nice italicized text in the heading of this article?  It is not so obvious to style as you may think.  There are many great free and commercial fonts out there that allow @font-face embedding.  Unfortunately, not all of them have an italics variant for one reason or another.  For example, the font I use for my blogs headlines, <a href=\"http:\/\/www.fonts.info\/info\/press\/free-fonts-for-font-face-embedding.htm\">Graublau Sans Web<\/a>, does not have a true italics variant included with it, while the font I use for the blog&#8217;s copy, <a href=\"http:\/\/www.fontsquirrel.com\/fonts\/Droid-Sans\">Droid Sans<\/a>, does.  When a font doesn&#8217;t have an italics variant, and you try to italicize it in a web-page using <code>&lt;i&gt;<\/code> and <code>&lt;em&gt;<\/code> tags, the results depend on the browser you are using:<\/p>\n<ul>\n<li>Safari, Chrome and Opera will render the font normally <strong>without<\/strong> italicizing it.<\/li>\n<li>Internet Explorer and Firefox will attempt to italicize the font, but Internet Explorer will slant the font at a 20&deg; angle while Firefox implements a 10&deg; slant.<\/li>\n<\/ul>\n<table class=\"dataTable\">\n<thead>\n<tr>\n<th style=\"width: 33%\">Internet Explorer 6.0<\/th>\n<th style=\"width: 33%\">Firefox 3.6<\/th>\n<th style=\"width: 33%\">Safari 4\/Chrome 5\/Opera 10<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/badItalics-IE.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/badItalics-IE.png\" alt=\"Default Italics for Graublau Web in IE.\" width=\"106\" height=\"38\" class=\"alignnone size-full wp-image-1567\" \/><\/a><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/badItalics-firefox.png\" alt=\"Default Italics for Graublau Web in Firefox.\" width=\"106\" height=\"38\" class=\"alignnone size-full wp-image-1567\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/badItalics-safari.png\" alt=\"Default Italics for Graublau Web in Safari.\" width=\"106\" height=\"38\" class=\"alignnone size-full wp-image-1567\" \/><\/td>\n<\/tr>\n<\/table>\n<p>This inconsistency is quite annoying from a user-experience point of view.  However, there is a way of leveling the playing field by using the CSS3 <code>transform<\/code> property.  And even though Internet Explorer doesn&#8217;t recognize <code>transform<\/code>, there is a workaround <strong>without using JavaScript<\/strong> using the <code>Matrix<\/code> Visual Filter.<\/p>\n<h2>The CSS<\/h2>\n<p>When I was a calligraphy student, I learned that the Italics script was to be written on a 10&deg; angle.  Using the CSS3 <code>transform<\/code> property, this can be achieved by using the <code>skewX()<\/code> function:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n#content h1 em {\r\n    font-family: \"Graublau Web Bold\", Arial, sans-serif;\r\n    font-style: normal;\r\n\t\r\n<span class=\"hilite\">    -moz-transform:    skewX(-10deg);\r\n    -o-transform:      skewX(-10deg);\r\n    -webkit-transform: skewX(-10deg);\r\n    transform:         skewX(-10deg);\r\n    \r\n    display: inline-block;\r\n<\/span>\r\n}\r\n\t<\/pre>\n<\/blockquote>\n<p>The <code>display: inline-block<\/code> is there since Safari, Chrome and Opera will not allow transformations on an <code>inline<\/code> element.<\/p>\n<p>But what about Internet Explorer?  I <strong>could<\/strong> use my cssSandpaper script, but it is <strong>really<\/strong> simple to do without it:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n#content h1 em {\r\n    font-family: \"Graublau Web Bold\", Arial, sans-serif;\r\n    font-style: normal;\r\n\t\r\n    -moz-transform:    skewX(-10deg);\r\n    -o-transform:      skewX(-10deg);\r\n    -webkit-transform: skewX(-10deg);\r\n    transform:         skewX(-10deg);\r\n\r\n    display: inline-block;\r\n\r\n<span class=\"hilite\">    \/* IE8+: must be on one line. *\/ \r\n    -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')\";\r\n    \r\n    \/* IE6 and 7 *\/ \r\n    filter: progid:DXImageTransform.Microsoft.Matrix(\r\n             M11=1,\r\n             M12=-0.1763269807084645,\r\n             M21=0,\r\n             M22=1,\r\n             SizingMethod='auto expand');<\/span>\r\n}\r\n\t<\/pre>\n<\/blockquote>\n<p>This is the Microsoft <code>Matrix<\/code> Filter equivalent of <code>skewX(10deg)<\/code>. Let&#8217;s take a look at how this works in all the major browsers:<\/p>\n<table class=\"dataTable\">\n<thead>\n<tr>\n<th style=\"width: 20%\">Internet Explorer 6.0+<\/th>\n<th style=\"width: 20%\">Firefox 3.5+<\/th>\n<th style=\"width: 20%\">Safari 4+<\/th>\n<th style=\"width: 20%\">Chrome 5+<\/th>\n<th style=\"width: 20%\">Opera 10.5+<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/goodItalics-IE.png\" alt=\"Italics Fix in IE\" width=\"106\" height=\"39\" class=\"alignnone size-full wp-image-1574\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/goodItalics-firefox.png\" alt=\"Italics Fix in Firefox\" width=\"106\" height=\"39\" class=\"alignnone size-full wp-image-1574\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/goodItalics-safari.png\" alt=\"Italics Fix in Safari\" width=\"106\" height=\"39\" class=\"alignnone size-full wp-image-1574\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/goodItalics-chrome.png\" alt=\"Italics Fix in Chrome\" width=\"106\" height=\"39\" class=\"alignnone size-full wp-image-1574\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/goodItalics-opera.png\" alt=\"Italics Fix in Opera\" width=\"106\" height=\"39\" class=\"alignnone size-full wp-image-1574\" \/><\/td>\n<\/tr>\n<\/table>\n<p>Isn&#8217;t that nice and consistent?  The screenshots are from the Windows versions of the browsers, but you can expect the same results for Mac and Linux versions as well.<\/p>\n<h2>Is This <em>Really<\/em> Italics?<\/h2>\n<p>Not really.  <strong>Technically, we are creating an oblique variant of this font.<\/strong> <a href=\"http:\/\/en.wikipedia.org\/wiki\/Oblique_type\">The Wikipedia entry for Oblique fonts<\/a> states that many sans-serif fonts do not have italic variants, so this technique will be a useful one in a web developers toolkit.  <\/p>\n<h2>Caveats<\/h2>\n<ul>\n<li>If you are going to make a few words in a row oblique, make sure you wrap the <code>&lt;i&gt;<\/code> and <code>&lt;em&gt;<\/code> tags around each word.  This is because the <code>display: inline-block<\/code> rule treats multiple words wrapped in one set of these tags as one word, which will cause problems when you want the words to wrap to the next line.<br \/>\n<table>\n<thead>\n<tr>\n<th>Wrapping multiple words with <strong>one<\/strong> <code>&lt;em&gt;<\/code> tag<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/badWordWrap.png\" alt=\"Bad Word Wrap Example\" title=\"badWordWrap\" class=\"aligncenter size-full wp-image-1580\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<thead>\n<tr>\n<th>Wrapping multiple words with separate <code>&lt;em&gt;<\/code> tags<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/goodWordWrap.png\" alt=\"Good Word Wrap Example\" title=\"goodWordWrap\"  class=\"aligncenter size-full wp-image-1582\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<li>If the oblique text does not have a solid background color, it will appear &#8220;blocky&#8221; or &#8220;pixely&#8221; in IE.  To fix this, you must use IE&#8217;s Chroma Visual Filter, as described in my last blog post, <a href=\"\/blog\/2010\/09\/02\/how-to-make-cleartype-font-face-fonts-and-css-visual-filters-play-nicely-together\/\">How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together<\/a>.<\/li>\n<li>In IE, multiple oblique words may appear to have more white space than the other browsers.  In this case you may need to create IE-only CSS rules that implement negative left margin on each word, using a solution like <a href=\"http:\/\/paulirish.com\/2008\/conditional-stylesheets-vs-css-hacks-answer-neither\/\">Paul Irish\u2019s Conditional CSS Pattern<\/a>.<\/li>\n<li>Webkit browsers apply the slanting correctly if a <code>font-style: normal<\/code> is declared in the @font-face rule for the font (thanks to <a href=\"http:\/\/levien.com\/\">Raph Levien<\/a> for commenting on this below.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/italics.png\" \/> Have a font that doesn&#8217;t have an italics variant? Does your browser try to attempt to &#8220;obliquify&#8221; it (badly) or not do anything at all? There is a simple solution to this problem using CSS3 Transforms.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,9,38,10,41],"tags":[],"class_list":["post-1560","post","type-post","status-publish","format-standard","hentry","category-font-face","category-css","category-css3","category-fonts","category-transform"],"_links":{"self":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/1560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=1560"}],"version-history":[{"count":41,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/1560\/revisions"}],"predecessor-version":[{"id":1610,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/1560\/revisions\/1610"}],"wp:attachment":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=1560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=1560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=1560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}