\n Geoff Graham <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n","protected":false},"excerpt":{"rendered":"The font-optical-sizing CSS property allows the browser to adjust the outline of font glyphs to make them more legible at different sizes. For example, smaller text may get a thicker outline to increase its contrast. On the flip side, larger text may get something that’s more “delicate” to quote the specification. Glyphs have outlines? They […]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13921,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":250398,"url":"https:\/\/css-tricks.com\/video-screencasts\/152-font-loading-zach-leatherman\/","url_meta":{"origin":322735,"position":0},"title":"#152: Font Loading with Zach Leatherman","date":"January 30, 2017","format":false,"excerpt":"Time for another pairing screencast! This time I have Zach Leatherman on, from Filament Group. Zach has done a lot of research, writing, and speaking about web font loading the past few years. He's got a comprehensive guide on it! There are some problems with the default way that custom\u2026","rel":"","context":"In \"performance\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":261983,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant-numeric\/","url_meta":{"origin":322735,"position":1},"title":"font-variant-numeric","date":"October 31, 2017","format":false,"excerpt":"The font-variant-numeric property in CSS supports the OpenType font format by specifying which numeric glyphs to use on a class, including variations for fractions, ordinal markers and styled variations among others. A Little Context We tend to think of numbers as a static glyph. It prints and that's the way\u2026","rel":"","context":"In \"font-variant\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":256000,"url":"https:\/\/css-tricks.com\/snippets\/svg\/svg-knockout-text\/","url_meta":{"origin":322735,"position":2},"title":"SVG Knockout Text","date":"June 23, 2017","format":false,"excerpt":"The idea here is to imagine three layers stacked on top of one another where the top layer is used to cut out a shape in the second layer to reveal the third layer. If the text on the top layer of the diagram above were the shape we are\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/snipet-svg-knockout-text-featured.png?fit=1200%2C738&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3262,"url":"https:\/\/css-tricks.com\/snippets\/css\/meyer-reset\/","url_meta":{"origin":322735,"position":3},"title":"Meyer Reset","date":"August 6, 2009","format":false,"excerpt":"html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16776,"url":"https:\/\/css-tricks.com\/snippets\/css\/less-mixin-for-rem-font-sizing\/","url_meta":{"origin":322735,"position":4},"title":"Mixins for Rem Font Sizing","date":"April 10, 2012","format":false,"excerpt":"The rem font-size unit is similar to em, only instead of cascading it's always relative to the root (html) element (more information). This has pretty good modern browser support, it's just IE 8 and down we need to provide px fallbacks for. Instead of repeating ourselves everywhere, we can use\u2026","rel":"","context":"With 67 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21545,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-size\/","url_meta":{"origin":322735,"position":5},"title":"font-size","date":"May 6, 2013","format":false,"excerpt":"The font-size property specifies the size, or height, of the font. font-size affects not only the font to which it is applied, but is also used to compute the value of em, rem, and ex length units. p { font-size: 20px; } font-size can accept keywords, length units, or percentages\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/322735"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=322735"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/322735\/revisions"}],"predecessor-version":[{"id":345724,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/322735\/revisions\/345724"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=322735"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=322735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}