{"id":3913,"date":"2023-11-10T21:06:34","date_gmt":"2023-11-10T21:06:34","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?p=3913"},"modified":"2024-01-09T21:51:06","modified_gmt":"2024-01-09T21:51:06","slug":"etypography","status":"publish","type":"post","link":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/","title":{"rendered":"eTypography"},"content":{"rendered":"\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"420\" data-attachment-id=\"17\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/manraytrans\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" data-orig-size=\"420,420\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"manraytrans\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" alt=\"\" class=\"wp-image-17\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\">4D media<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/a2z\/\"><img loading=\"lazy\" decoding=\"async\" width=\"371\" height=\"371\" data-attachment-id=\"150\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/cody_am_alpha\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha.png\" data-orig-size=\"371,371\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"cody_am_alpha\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha.png\" alt=\"\" class=\"wp-image-150\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha.png 371w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha-100x100.png 100w\" sizes=\"auto, (max-width: 371px) 100vw, 371px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/a2z\/\">2 | a2z<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" data-attachment-id=\"3808\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/a2z\/etypography\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/etypography.jpg\" data-orig-size=\"500,500\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"etypography\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/etypography.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/etypography.jpg\" alt=\"\" class=\"wp-image-3808\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/etypography.jpg 500w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/etypography-300x300.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/etypography-150x150.jpg 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/etypography-100x100.jpg 100w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong>eTypography<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/div>\n<label for=\"ez-toc-cssicon-toggle-item-69f10b2ccae37\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f10b2ccae37\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#eTypography\" >eTypography<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Type_specing_and_setting\" >Type spec&#8217;ing and setting<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Metaphors_in_Web_type\" >Metaphors in Web type<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Text-based_type_fonts\" >Text-based type: fonts<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Web-safe_fonts\" >Web-safe fonts<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Serif\" >Serif<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Sans-serif\" >Sans-serif<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Monospace\" >Monospace<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Fantasy\" >Fantasy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Cursive\" >Cursive<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Cloud_to_the_rescue_font_libraries\" >Cloud to the rescue: font libraries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Generative_typography\" >Generative typography<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#From_%E2%80%9Cgenerative%E2%80%9D_to_generative\" >From &#8220;generative&#8221; to generative<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Image_as_type\" >Image as type<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Vector_type\" >Vector type<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Creating_SVG_image_replacement_type\" >Creating SVG image replacement type<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Illustrator_and_SVG\" >Illustrator and SVG<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Profile\" >Profile<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Fonts_Type_and_Subsetting\" >Fonts Type and Subsetting<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Image_embedding_versus_linking\" >Image embedding versus linking<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#More_options\" >More options<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Tweaking_raster_type_for_the_web\" >Tweaking raster type for the web<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Anti-aliasing\" >Anti-aliasing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Tracking\" >Tracking<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Resampling_in_Photoshop\" >Resampling in Photoshop<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Photoshop_text_tutorials\" >Photoshop text tutorials<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#Regarding_accessibility\" >Regarding accessibility<\/a><\/li><\/ul><\/nav><\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"531\" data-attachment-id=\"3982\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/metal_movable_type\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Metal_movable_type.jpg\" data-orig-size=\"800,531\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Metal_movable_type\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Metal_movable_type.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Metal_movable_type.jpg\" alt=\"\" class=\"wp-image-3982\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Metal_movable_type.jpg 800w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Metal_movable_type-300x199.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Metal_movable_type-768x510.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-text-align-center\"><em><em>Typesetting tools for movable type. From Wikimedia Commons<\/em><\/em>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"eTypography\"><\/span>eTypography<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Type_specing_and_setting\"><\/span>Type spec&#8217;ing and setting<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>Before the desktop publishing revolution, type specification and typesetting was a laboriously hand-crafted affair. In his illuminating blog post on&nbsp;<strong><a href=\"https:\/\/www.marksimonson.com\/notebook\/view\/the-lost-art-of-type-specing\" target=\"_blank\" rel=\"noreferrer noopener\">The Lost Art of Type Spec&#8217;ing<\/a><\/strong>, font designer Mark Simonson says:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>We are so spoiled nowadays. We can set the type ourselves, right at our desks (or laps), and instantly see what it will look like. No more spec\u2019ing, or waiting, or paying big typesetting bills. On the other hand, you do have to know a lot more about setting type than you did back then to get the same level of quality.<\/em> <sup><a href=\"#footnote_1_3913\" id=\"identifier_1_3913\" class=\"footnote-link footnote-identifier-link\" title=\"Simonson, Mark. &quot;The Lost Art of Type Spec&rsquo;ing.&quot; Mark Simonson Studio, 27 September 2008\">1<\/a><\/sup><\/p>\n<\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<p>At UCLA, Professor Johanna Drucker&#8217;s appreciation for what she calls &#8220;slow technology&#8221; <sup><a href=\"#footnote_2_3913\" id=\"identifier_2_3913\" class=\"footnote-link footnote-identifier-link\" title=\"Hewitt, Alison. &quot; Prof revives lost art of printing press.&quot; UCLA Newsroom, 9 October 2009\">2<\/a><\/sup> has revived the lost art of typesetting for a new generation. <a href=\"https:\/\/web.archive.org\/web\/20160306040022\/https:\/\/ampersand.gseis.ucla.edu\/is-celebrates-new-home-for-antique-printing-presses-on-ucla-campus\/\">Visit the article here to learn how she did this.<\/a> <\/p>\n\n\n\n<p>Are these musings of an older generation who romanticize obsolete technology, or is there any value to knowing about old-fashioned typesetting? Well: if you spend any time with graphic software you know many of the commands and tools are based on <strong>metaphors to older technologies<\/strong>. And if you don&#8217;t understand the metaphor, it&#8217;s hard to understand the software! So let&#8217;s dig in.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Metaphors_in_Web_type\"><\/span>Metaphors in Web type<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>In the typesetting studio at UCLA, students learn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The terms <strong>upper case<\/strong> and <strong>lower case<\/strong> refer to the drawers that the type was stored in. Capital letters were in the top case, others were in the bottom case. <\/li>\n\n\n\n<li><strong>Leading<\/strong> \u2014 the vertical space between baselines of type \u2014 refers to actual strips of metal inserted between rows of set type. Back in the day, that metal was (yikes!) lead.<\/li>\n\n\n\n<li><strong>Tracking<\/strong> \u2014 the spacing between letters \u2014 refers to the track in which movable type is set. <\/li>\n\n\n\n<li><strong>Kerning<\/strong> refers to the part of a letter that overhangs the edge of a type block to allow for individual space adjustments between overlapping letters (like A and T), as seen here.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"614\" data-attachment-id=\"3988\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/1024px-metal_type_kerning-svg\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/1024px-Metal_type_kerning.svg.png\" data-orig-size=\"1024,614\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1024px-Metal_type_kerning.svg\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/1024px-Metal_type_kerning.svg.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/1024px-Metal_type_kerning.svg.png\" alt=\"\" class=\"wp-image-3988\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/1024px-Metal_type_kerning.svg.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/1024px-Metal_type_kerning.svg-300x180.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/1024px-Metal_type_kerning.svg-768x461.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>The little overhang at the T on the right is a&nbsp;<strong>kern<\/strong>. From Wikimedia Commons<\/em>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>These terms, embedded as they are in the materiality of typesetting, persist as metaphors in the UI of software like Photoshop, Illustrator, and InDesign. So, when we arrive at type on the web, we gradually see these metaphorical terms get discarded. In CSS properties you will learn about in this course, <strong>tracking<\/strong> gives way to <strong>letter-spacing<\/strong> values applied to <strong>divs<\/strong>, <strong>kerning<\/strong> is done through the application of the same through spans (although there is also a property called <strong>font-kerning<\/strong>), <strong>leading<\/strong> becomes<strong> line-height<\/strong>, and so on. <strong>Uppercase<\/strong> and <strong>lowercase<\/strong> are maintained in CSS vocabulary, however, showing up as values in the <strong>text-transform<\/strong> property. Such is the persistence of metaphor!<\/p>\n\n\n\n<p>The bottom line is that the technical terminology becomes a parallel universe. In software, you need to know the older terminology; in code, not so much. But you do need to know when to use each, and how they translate.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Text-based_type_fonts\"><\/span>Text-based type: fonts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the days of movable type, a font was a specific size and style of a typeface. With digital typesetting, the terms are now interchangeable. In this title, we defer to &#8220;font&#8221; for both. Back in the day, a\u00a0typesetter would purchase a massive set of letters in a font from a type foundry, so called because the letters were cast in metal. The term foundry persists for commercial type designers, who now supply fonts as digital files that live on a hard drive.<\/p>\n\n\n\n<p>This made things a bit tricky for the web designer working in 1995 who wished to spec a particular font size, weight, or style. It was possible to specify a font using a&nbsp;&lt;font&gt;&nbsp;tag, but the font file had to be installed on the client&#8217;s drive for it to display. This remains one of the prime phenomena that distinguishes graphic design from web design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Web-safe_fonts\"><\/span>Web-safe fonts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Thus, the concept of web-safe fonts emerged as a partial solution which assumed a set of fonts most likely to be present on a client drive. This concept allowed the substitution of a generic font family if a specified font was not installed. These five families persist in the CSS specification as follows:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div style=\"height: 180px; text-align: center;\"><span style=\"font-family: 'Times New Roman', serif; font-size: 800%; text-align: center;\">Aa<\/span><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Serif\"><\/span>Serif<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Designed in antiquity in response to the need for text inscriptions carved in stone, the extra serif stroke would neaten up the ends of the carved letters. A well-designed serif font aids legibility in body type.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div style=\"height: 180px; text-align: center;\"><span style=\"font-family: Arial, sans-serif; font-size: 800%; text-align: center;\">Bb<\/span><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Sans-serif\"><\/span>Sans-serif<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Used to convey modernity, these fonts grew in popularity with mass-printed headlines and advertisements a century ago. Some sans-serif fonts are based on simplified serif font proportions, while others take on a more geometric form.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div style=\"height: 180px; text-align: center;\"><span style=\"font-family: 'Courier New', monospace; font-size: 800%; text-align: center;\">Cc<\/span><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Monospace\"><\/span>Monospace<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>(Non-CSS AKA <strong>Modern<\/strong>)<\/p>\n\n\n\n<p>Typewriters could not accommodate proportional-width letters, and this persisted with the graphical limitations of early computers. Monospace is now used for typing code or terminal emulation.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div style=\"height: 180px; text-align: center;\"><span style=\"font-family: 'Luminari', fantasy; font-size: 800%; text-align: center;\">Dd<\/span><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Fantasy\"><\/span>Fantasy<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>(Non-CSS AKA <strong>Ornamental<\/strong> or<strong> Decorative <\/strong>or<strong> Display<\/strong>)<\/p>\n\n\n\n<p>Fonts that carry a theme or specific cultural allusion, these fonts have specific uses that make them less suitable for body type.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div style=\"height: 180px; text-align: center;\"><span style=\"font-family: 'Brush Script MT', cursive; font-size: 800%; text-align: center;\">Ee<\/span><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cursive\"><\/span>Cursive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>(Non-CSS AKA <strong>Script<\/strong> or<strong> Handwriting<\/strong>)<\/p>\n\n\n\n<p>Based on the letterforms made with calligraphy pens or casual mark-making tools, some script fonts contain varied strokes that suggest handwriting.<\/p>\n\n\n\n<p>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Depending on the operating system or device, the large letterforms above will display the default it prescribes for each generic font family. On my Macbook Pro in 2023, the fantasy font-family displays <span style=\"font-family: Impact;\">Impact<\/span>, while my iPhone displays <span style=\"font-family: Papyrus;\">Papyrus<\/span>.<\/p>\n\n\n\n<p>The fonts specified in Microsoft&#8217;s <strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Core_fonts_for_the_Web\" target=\"_blank\" rel=\"noreferrer noopener\">Core Fonts for the Web<\/a><\/strong> initiative in 1996 ensured that all Web users had the following fonts installed:<\/p>\n\n\n\n<table style=\"width: 100%;\" border=\"0\">\n<tbody>\n<tr>\n<td style=\"text-align: center; border-color: #dddddd; background-color: #eeeeee; width: 20%;\">\n<p><span style=\"font-size: 100%;\"><strong>Serif<\/strong><\/p>\n<\/td>\n<td style=\"border-color: #dddddd; width: 80%;\">\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><span style=\"font-family: 'Times New Roman'; font-size: 150%;\">Times New Roman<\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><span style=\"font-family: Georgia; font-size: 150%;\">Georgia<\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><span style=\"font-family: Trebuchet; font-size: 150%;\">Trebuchet<\/span><\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border-color: #dddddd; background-color: #eeeeee; width: 20%;\">\n<p style=\"text-align: center;\"><span style=\"font-size: 100%;\"><strong>Sans-Serif<\/strong><\/span><\/p>\n<\/td>\n<td style=\"border-color: #dddddd; width: 80%;\">\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><span style=\"font-family: Arial; font-size: 150%;\">Arial<\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><span style=\"font-family: Verdana; font-size: 150%;\"><span style=\"font-family: Verdana;\">Verdana<\/span><\/span><\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border-color: #dddddd; background-color: #eeeeee; width: 20%; text-align: center;\">\n<p><span style=\"font-size: 100%;\"><strong>Monospace<\/strong><\/span><\/p>\n<\/td>\n<td style=\"border-color: #dddddd; width: 80%;\">\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><span style=\"font-family: 'Courier New'; font-size: 150%;\">Courier New<\/span>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border-color: #dddddd; background-color: #eeeeee; width: 20%; text-align: center;\">\n<p><span style=\"font-size: 100%;\"><strong>Fantasy<\/strong><\/span><\/p>\n<\/td>\n<td style=\"border-color: #dddddd; width: 80%;\">\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><span style=\"font-family: Impact; font-size: 150%;\">Impact<\/span>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><span style=\"font-family: Webdings; font-size: 150%;\">Webdings<\/span><br \/><span style=\"font-size: 100%; font-family: 'Times New Roman';\">(Webdings)<\/span><\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border-color: #dddddd; background-color: #eeeeee; width: 20%; text-align: center;\">\n<p><span style=\"font-size: 100%;\"><strong>Cursive<\/strong><\/span><\/p>\n<\/td>\n<td style=\"border-color: #dddddd; width: 80%;\">\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><span style=\"font-family: 'Comic Sans MS'; font-size: 150%;\">Comic Sans<\/span>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n<p>You can see which of these fonts persist as de-facto Web standard fonts by looking at this page on a desktop versus mobile device \u2014 on your phone, you&#8217;ll probably see the <strong>fantasy<\/strong> and <strong>cursive<\/strong> fonts show up as a <strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Fallback_font\" target=\"_blank\" rel=\"noreferrer noopener\">fallback font<\/a><\/strong> instead of the actual\u00a0<strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Webdings\" target=\"_blank\" rel=\"noreferrer noopener\">Webdings<\/a><\/strong> or\u00a0<strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Comic_Sans\" target=\"_blank\" rel=\"noreferrer noopener\">that most unfortunate of choices: Comic Sans<\/a><\/strong>.<\/p>\n\n\n\n<p>The&nbsp;<strong>Core Fonts<\/strong>&nbsp;initiative was an imperfect, incomplete solution to a thorny problem, which by the early 2000s left designers and clients wanting more than the very limited palette of options it provided.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cloud_to_the_rescue_font_libraries\"><\/span>Cloud to the rescue: font libraries<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Between CSS properties that allow a variety of styling options and the development of browsers that support them, the increasingly urgent need for a better font solution came to pass with the advent of downloadable fonts hosted on the server. This was controversial because it became so easy to download and install proprietary fonts elsewhere in breach of licensing.\u00a0It became clear that cloud-based web font servers, in combination with free (as in speech) software licenses, were the only reasonable solution. Several have opened up to serving designers in the past decade, including but not limited to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Fonts<\/a><\/strong> &#8211; serving over 800 fonts<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/edgewebfonts.adobe.com\/fonts\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Edge Web Fonts<\/a><\/strong> &#8211; serving over 500 fonts, some of which are shared with Google Fonts<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/fontlibrary.org\/en\" target=\"_blank\" rel=\"noreferrer noopener\">Font Library<\/a><\/strong> &#8211; serving over 1400 font families<\/li>\n<\/ul>\n\n\n\n<p>These services and others give designers the option of &#8220;calling&#8221; fonts from their servers or downloading the fonts to host on (and call up from) a personal server. With web fonts <strong><a href=\"https:\/\/alistapart.com\/article\/webfonts-on-the-prairie\" target=\"_blank\" rel=\"noreferrer noopener\">becoming the rule rather than the exception<\/a><\/strong>, designers have nearly the degree of control graphic designers enjoy for font selection, at least.<\/p>\n\n\n\n<p>In addition to these services, other sites have sprung up that are indispensable to typographic design on the web. Just for starters:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"http:\/\/understandingfonts.com\/2011\/fonttest\/\" target=\"_blank\" rel=\"noreferrer noopener\">Understanding Fonts Font Test<\/a><\/strong>&nbsp;&#8211; allows a drag-n-drop inspection of your system fonts in a browser<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/msol.io\/blog\/tech\/host-your-own-web-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Host your own web fonts<\/a><\/strong>&nbsp;&#8211; Mike Solomon&#8217;s tutorial for self-hosting free license fonts<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.fontsquirrel.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Font Squirrel<\/a><\/strong>\u00a0&#8211; a curated set of free fonts, as well as several tools: a\u00a0<strong><a href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" target=\"_blank\" rel=\"noreferrer noopener\">web font generator<\/a><\/strong>, a\u00a0<strong><a href=\"https:\/\/www.fontsquirrel.com\/matcherator\" target=\"_blank\" rel=\"noreferrer noopener\">font identifier<\/a><\/strong>, and more.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Generative_typography\"><\/span>Generative typography<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>At the cutting edge of web font design, we find generative typography. While not strictly generative, in the sense that letterforms are not being redrawn by an algorithm, the &#8220;averaging&#8221; experiments of some designers lead to a methodology of making fonts look less mechanical and more human. Dan Sayers created his\u00a0<strong><a href=\"http:\/\/www.iotic.com\/averia\/\" target=\"_blank\" rel=\"noreferrer noopener\">Aver\u00eda Font<\/a><\/strong>\u00a0by algorithmically averaging all the fonts in his font library. It is strangely super-legible, modern at the same time it evokes <em>Poor Richard&#8217;s Almanack<\/em> typesetting. Meanwhile, a similar experiment emerged from Process Studio, whose\u00a0<strong><a href=\"https:\/\/process.studio\/works\/average-font\/\" target=\"_blank\" rel=\"noreferrer noopener\">Average Font<\/a><\/strong>\u00a0has the visual tactility of charcoal drawing.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"517\" height=\"518\" data-attachment-id=\"4017\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/spec09-big\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/spec09-big.png\" data-orig-size=\"517,518\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"spec09-big\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/spec09-big.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/spec09-big.png\" alt=\"\" class=\"wp-image-4017\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/spec09-big.png 517w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/spec09-big-300x301.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/spec09-big-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/spec09-big-100x100.png 100w\" sizes=\"auto, (max-width: 517px) 100vw, 517px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\"><em><strong>Averia font<\/strong> is seen in the adjacent <a href=\"http:\/\/www.markfarrar.co.uk\/msqwht01.htm\">magic square<\/a><\/em>, with <em><strong>Average font<\/strong> in the gray squares<\/em><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"497\" data-attachment-id=\"4018\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/average-font_overview\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/average-font_overview.png\" data-orig-size=\"1000,497\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"average-font_overview\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/average-font_overview.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/average-font_overview.png\" alt=\"\" class=\"wp-image-4018\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/average-font_overview.png 1000w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/average-font_overview-300x149.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/average-font_overview-768x382.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>But these were not the start of this methodology. Uncertainty and imperfection in the final product had always been the norm in the physicality of the printing process from the time of Gutenberg&#8217;s invention of moveable type to Steve Jobs&#8217;s embrace of typography in the graphic user interface of the Mac. It was only with digital type that &#8220;perfect&#8221; rendering of type was possible. Before digital type, the popular minimalism of Swiss design trends had been technically challenging to pull off, so many designers found the easy perfection afforded by digital design to be icy and sterile.<\/p>\n\n\n\n<p>David Carson shook up the design world with his &#8220;digital grunge&#8221; aesthetic in the 1990s. Layered, textured, fragmented, collaged, type in Carson&#8217;s work takes on an entirely different role. He famously said:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"603\" height=\"333\" data-attachment-id=\"4024\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/0012252-005\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/0012252.005.jpg\" data-orig-size=\"603,333\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"0012252.005\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/0012252.005.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/0012252.005.jpg\" alt=\"\" class=\"wp-image-4024\" style=\"object-fit:cover\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/0012252.005.jpg 603w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/0012252.005-300x166.jpg 300w\" sizes=\"auto, (max-width: 603px) 100vw, 603px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>&#8220;Don&#8217;t mistake legibility for communication.&#8221;&nbsp;Just because something&#8217;s legible doesn&#8217;t means it communicates.&nbsp;More importantly, it doesn&#8217;t mean it communicates the right thing.&nbsp;So, what is the message sent before&nbsp;somebody actually gets into the material? <sup><a href=\"#footnote_3_3913\" id=\"identifier_3_3913\" class=\"footnote-link footnote-identifier-link\" title=\"David Carson. &quot;Design and discovery&quot; TED, February 2003\">3<\/a><\/sup><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"From_%E2%80%9Cgenerative%E2%80%9D_to_generative\"><\/span>From &#8220;generative&#8221; to generative<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Carson&#8217;s &#8220;generative&#8221; work depends on a lot of massaging of otherwise &#8220;perfect&#8221; type in Illustrator and Photoshop to achieve visual tension. But truly generative type in Carson&#8217;s generation was not a dream: in 1990, Erik van Blokland and Just van Rossum of the graphic design firm LettError developed the <strong><a href=\"https:\/\/www.moma.org\/collection\/works\/139326\">FF Beowulf<\/a><\/strong> font. They achieved truly randomized type by hacking the PostScript code of a standard font, such that no two settings of Beowulf would yield the same result.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"860\" data-attachment-id=\"4029\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/beowulf\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/beowulf.jpg\" data-orig-size=\"2000,1680\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"beowulf\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/beowulf-1024x860.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/beowulf-1024x860.jpg\" alt=\"\" class=\"wp-image-4029\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/beowulf-1024x860.jpg 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/beowulf-300x252.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/beowulf-768x645.jpg 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/beowulf-1536x1290.jpg 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/beowulf.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>Settings of <strong>Beowulf<\/strong> generative variations<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"625\" data-attachment-id=\"4032\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/gensans\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/gensans.jpg\" data-orig-size=\"1164,711\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"gensans\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/gensans-1024x625.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/gensans-1024x625.jpg\" alt=\"\" class=\"wp-image-4032\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/gensans-1024x625.jpg 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/gensans-300x183.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/gensans-768x469.jpg 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/gensans.jpg 1164w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong><em>Generative Sans<\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>More recent experiments include a randomizing script for selecting letterforms in <strong><a href=\"http:\/\/www.christianschwartz.com\/local.shtml\">Local Gothic<\/a><\/strong> by Christian Schwartz. <strong><a href=\"https:\/\/medium.com\/@leonbutler\/generative-sans-1560aa91a90a\">Generative Sans<\/a><\/strong> by Leon Butler takes this a step further by programming unique ligatures (connectors between letterforms) based on the geometry and proximity of each letter. Joshua Davis, meanwhile, uses programming to create compositions in his series <strong><a href=\"https:\/\/joshuadavis.com\/Type-as-Texture\">Type as Texture<\/a><\/strong>.<\/p>\n\n\n\n<div style=\"padding:56.25% 0 0 0;position:relative;\"><iframe src=\"https:\/\/player.vimeo.com\/video\/109835576?h=7e7a15bd0a&#038;loop=1&#038;title=0&#038;byline=0&#038;portrait=0\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Image_as_type\"><\/span>Image as type<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Image-based substitutions for text are sometimes necessary but always come at a price. Text selection becomes impossible. It&#8217;s a disadvantage for SEO (search engine optimization). And it carries significant barriers to accessibility, which we&#8217;ll discuss below. Nevertheless, there are aesthetic purposes that are well served by the judicious choice of image-as-type, particularly when text is combined with other pictorial elements, as in a logo, a button graphic, text masking a photograph, and so on. These images can be developed in both vector and raster contexts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Vector_type\"><\/span>Vector type<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_SVG_image_replacement_type\"><\/span>Creating SVG image replacement type<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p><em>(Note: not to be confused with a property callout in the <strong>@font-face<\/strong> CSS rule, for those in the know)<\/em><\/p>\n\n\n\n<p>Creating vector-based <strong>image replacement\u00a0type<\/strong> is one alternative to dependency on a font or font library. This involves generating an image in a vector program like Illustrator or Inkscape and exporting it to the SVG filetype. The clear advantage of vector work is scalability: regardless of size, it renders well, it&#8217;s low-budget bandwidth-wise, and vector art always looks amazing on a retina-screen device, even when zooming in deep. Below, observe the same SVG file incorporating text scaled from 18 to 288 pixels. Zoom your browser window way in on these babies, and they stay crisp at almost any scale. The only liability occurs at smaller scales on lower-resolution screens: the 18-pixel image begins to shed its border, but this is a function of available pixels on a monitor, not the scale of the image.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\">28 pixels<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-safe-svg-svg-icon safe-svg-cover\" style=\"text-align: center;\">\n\t\t\t\t<div class=\"safe-svg-inside safe-svg-inline\" style=\"width: 28px; height: 28px; background-color: var(--wp--preset--color--); color: var(--wp--preset--color--); padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; margin-top: ; margin-right: ; margin-bottom: ; margin-left: ;\"><?xml version=\"1.0\" encoding=\"UTF-8\"?> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 216.5 216.5\" style=\"enable-background:new 0 0 216.5 216.5;\" xml:space=\"preserve\"> <style type=\"text\/css\"> .st0{fill:none;stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;} <\/style> <title>wca<\/title> <g id=\"Layer_2_1_\"> <path d=\"M49.8,37.2c0-5,0.4-9.9,1.3-14.8L9.2,9.4v19.8h-9V77l52.1-16.2C50.6,53.1,49.7,45.2,49.8,37.2z\"><\/path> <path d=\"M58,0.2H26.8l27.8,8.6C55.6,6,56.7,3.1,58,0.2z\"><\/path> <path d=\"M162.2,42.3v28.8l-61.6,19.2c11.8,9,25.6,13.5,41.5,13.5c18.5,0,34.2-6.3,47-18.8c12.8-12.5,19.1-27.9,19.1-46 c0-9.4-1.5-17.4-4.6-23.9c-1.7-4-3.8-7.8-6.2-11.4c-0.7-1.1-1.5-2.3-2.4-3.4H87.5c-3.4,5.1-6.2,10.5-8.4,16.3L162.2,42.3z\"><\/path> <polygon points=\"9.2,177.8 111.5,146 0.2,111.5 0.2,160 9.2,160 \"><\/polygon> <path d=\"M216.2,92.9c-2.9,4-6.1,7.7-9.5,11.2c-17.8,17.8-39.2,26.7-64.4,26.7c-22.5,0-42.6-7.4-60.2-22.3c-3.4-2.9-6.7-6-9.7-9.4 L41,108.8l121.2,37.7v28.8l-132,41h186V92.9z\"><\/path> <path d=\"M75.6,30.1c-0.4,3-0.7,6-0.7,9c0,4.8,0.5,9.6,1.5,14.2l37-11.5L75.6,30.1z\"><\/path> <path d=\"M79.1,16.5L54.6,8.9c-1.5,4.4-2.7,9-3.5,13.6l24.6,7.7C76.3,25.5,77.5,20.9,79.1,16.5z\"><\/path> <path d=\"M94.5,85c-9.1-8.4-15.5-19.5-18.1-31.7l-24,7.5C55.7,75.1,62.7,88.2,72.5,99l28.1-8.8C98.5,88.6,96.5,86.9,94.5,85z\"><\/path> <\/g> <g id=\"Layer_1_1_\"> <rect x=\"0.2\" y=\"0.2\" class=\"st0\" width=\"216\" height=\"216\"><\/rect> <\/g> <\/svg> <\/div>\n\t\t\t<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\">56 pixels<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-safe-svg-svg-icon safe-svg-cover\" style=\"text-align: center;\">\n\t\t\t\t<div class=\"safe-svg-inside safe-svg-inline\" style=\"width: 56px; height: 56px; background-color: var(--wp--preset--color--); color: var(--wp--preset--color--); padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; margin-top: ; margin-right: ; margin-bottom: ; margin-left: ;\"><?xml version=\"1.0\" encoding=\"UTF-8\"?> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 216.5 216.5\" style=\"enable-background:new 0 0 216.5 216.5;\" xml:space=\"preserve\"> <style type=\"text\/css\"> .st0{fill:none;stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;} <\/style> <title>wca<\/title> <g id=\"Layer_2_1_\"> <path d=\"M49.8,37.2c0-5,0.4-9.9,1.3-14.8L9.2,9.4v19.8h-9V77l52.1-16.2C50.6,53.1,49.7,45.2,49.8,37.2z\"><\/path> <path d=\"M58,0.2H26.8l27.8,8.6C55.6,6,56.7,3.1,58,0.2z\"><\/path> <path d=\"M162.2,42.3v28.8l-61.6,19.2c11.8,9,25.6,13.5,41.5,13.5c18.5,0,34.2-6.3,47-18.8c12.8-12.5,19.1-27.9,19.1-46 c0-9.4-1.5-17.4-4.6-23.9c-1.7-4-3.8-7.8-6.2-11.4c-0.7-1.1-1.5-2.3-2.4-3.4H87.5c-3.4,5.1-6.2,10.5-8.4,16.3L162.2,42.3z\"><\/path> <polygon points=\"9.2,177.8 111.5,146 0.2,111.5 0.2,160 9.2,160 \"><\/polygon> <path d=\"M216.2,92.9c-2.9,4-6.1,7.7-9.5,11.2c-17.8,17.8-39.2,26.7-64.4,26.7c-22.5,0-42.6-7.4-60.2-22.3c-3.4-2.9-6.7-6-9.7-9.4 L41,108.8l121.2,37.7v28.8l-132,41h186V92.9z\"><\/path> <path d=\"M75.6,30.1c-0.4,3-0.7,6-0.7,9c0,4.8,0.5,9.6,1.5,14.2l37-11.5L75.6,30.1z\"><\/path> <path d=\"M79.1,16.5L54.6,8.9c-1.5,4.4-2.7,9-3.5,13.6l24.6,7.7C76.3,25.5,77.5,20.9,79.1,16.5z\"><\/path> <path d=\"M94.5,85c-9.1-8.4-15.5-19.5-18.1-31.7l-24,7.5C55.7,75.1,62.7,88.2,72.5,99l28.1-8.8C98.5,88.6,96.5,86.9,94.5,85z\"><\/path> <\/g> <g id=\"Layer_1_1_\"> <rect x=\"0.2\" y=\"0.2\" class=\"st0\" width=\"216\" height=\"216\"><\/rect> <\/g> <\/svg> <\/div>\n\t\t\t<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\">112 pixels<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-safe-svg-svg-icon safe-svg-cover\" style=\"text-align: center;\">\n\t\t\t\t<div class=\"safe-svg-inside safe-svg-inline\" style=\"width: 112px; height: 112px; background-color: var(--wp--preset--color--); color: var(--wp--preset--color--); padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; margin-top: ; margin-right: ; margin-bottom: ; margin-left: ;\"><?xml version=\"1.0\" encoding=\"UTF-8\"?> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 216.5 216.5\" style=\"enable-background:new 0 0 216.5 216.5;\" xml:space=\"preserve\"> <style type=\"text\/css\"> .st0{fill:none;stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;} <\/style> <title>wca<\/title> <g id=\"Layer_2_1_\"> <path d=\"M49.8,37.2c0-5,0.4-9.9,1.3-14.8L9.2,9.4v19.8h-9V77l52.1-16.2C50.6,53.1,49.7,45.2,49.8,37.2z\"><\/path> <path d=\"M58,0.2H26.8l27.8,8.6C55.6,6,56.7,3.1,58,0.2z\"><\/path> <path d=\"M162.2,42.3v28.8l-61.6,19.2c11.8,9,25.6,13.5,41.5,13.5c18.5,0,34.2-6.3,47-18.8c12.8-12.5,19.1-27.9,19.1-46 c0-9.4-1.5-17.4-4.6-23.9c-1.7-4-3.8-7.8-6.2-11.4c-0.7-1.1-1.5-2.3-2.4-3.4H87.5c-3.4,5.1-6.2,10.5-8.4,16.3L162.2,42.3z\"><\/path> <polygon points=\"9.2,177.8 111.5,146 0.2,111.5 0.2,160 9.2,160 \"><\/polygon> <path d=\"M216.2,92.9c-2.9,4-6.1,7.7-9.5,11.2c-17.8,17.8-39.2,26.7-64.4,26.7c-22.5,0-42.6-7.4-60.2-22.3c-3.4-2.9-6.7-6-9.7-9.4 L41,108.8l121.2,37.7v28.8l-132,41h186V92.9z\"><\/path> <path d=\"M75.6,30.1c-0.4,3-0.7,6-0.7,9c0,4.8,0.5,9.6,1.5,14.2l37-11.5L75.6,30.1z\"><\/path> <path d=\"M79.1,16.5L54.6,8.9c-1.5,4.4-2.7,9-3.5,13.6l24.6,7.7C76.3,25.5,77.5,20.9,79.1,16.5z\"><\/path> <path d=\"M94.5,85c-9.1-8.4-15.5-19.5-18.1-31.7l-24,7.5C55.7,75.1,62.7,88.2,72.5,99l28.1-8.8C98.5,88.6,96.5,86.9,94.5,85z\"><\/path> <\/g> <g id=\"Layer_1_1_\"> <rect x=\"0.2\" y=\"0.2\" class=\"st0\" width=\"216\" height=\"216\"><\/rect> <\/g> <\/svg> <\/div>\n\t\t\t<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\">224 pixels<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-safe-svg-svg-icon safe-svg-cover\" style=\"text-align: center;\">\n\t\t\t\t<div class=\"safe-svg-inside safe-svg-inline\" style=\"width: 288px; height: 288px; background-color: var(--wp--preset--color--); color: var(--wp--preset--color--); padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; margin-top: ; margin-right: ; margin-bottom: ; margin-left: ;\"><?xml version=\"1.0\" encoding=\"UTF-8\"?> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 216.5 216.5\" style=\"enable-background:new 0 0 216.5 216.5;\" xml:space=\"preserve\"> <style type=\"text\/css\"> .st0{fill:none;stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;} <\/style> <title>wca<\/title> <g id=\"Layer_2_1_\"> <path d=\"M49.8,37.2c0-5,0.4-9.9,1.3-14.8L9.2,9.4v19.8h-9V77l52.1-16.2C50.6,53.1,49.7,45.2,49.8,37.2z\"><\/path> <path d=\"M58,0.2H26.8l27.8,8.6C55.6,6,56.7,3.1,58,0.2z\"><\/path> <path d=\"M162.2,42.3v28.8l-61.6,19.2c11.8,9,25.6,13.5,41.5,13.5c18.5,0,34.2-6.3,47-18.8c12.8-12.5,19.1-27.9,19.1-46 c0-9.4-1.5-17.4-4.6-23.9c-1.7-4-3.8-7.8-6.2-11.4c-0.7-1.1-1.5-2.3-2.4-3.4H87.5c-3.4,5.1-6.2,10.5-8.4,16.3L162.2,42.3z\"><\/path> <polygon points=\"9.2,177.8 111.5,146 0.2,111.5 0.2,160 9.2,160 \"><\/polygon> <path d=\"M216.2,92.9c-2.9,4-6.1,7.7-9.5,11.2c-17.8,17.8-39.2,26.7-64.4,26.7c-22.5,0-42.6-7.4-60.2-22.3c-3.4-2.9-6.7-6-9.7-9.4 L41,108.8l121.2,37.7v28.8l-132,41h186V92.9z\"><\/path> <path d=\"M75.6,30.1c-0.4,3-0.7,6-0.7,9c0,4.8,0.5,9.6,1.5,14.2l37-11.5L75.6,30.1z\"><\/path> <path d=\"M79.1,16.5L54.6,8.9c-1.5,4.4-2.7,9-3.5,13.6l24.6,7.7C76.3,25.5,77.5,20.9,79.1,16.5z\"><\/path> <path d=\"M94.5,85c-9.1-8.4-15.5-19.5-18.1-31.7l-24,7.5C55.7,75.1,62.7,88.2,72.5,99l28.1-8.8C98.5,88.6,96.5,86.9,94.5,85z\"><\/path> <\/g> <g id=\"Layer_1_1_\"> <rect x=\"0.2\" y=\"0.2\" class=\"st0\" width=\"216\" height=\"216\"><\/rect> <\/g> <\/svg> <\/div>\n\t\t\t<\/div><\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Illustrator_and_SVG\"><\/span>Illustrator and SVG<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>You&#8217;d think that, like other file type exports, you&#8217;d find SVG under the list at <strong>File > Export<\/strong>, but the .svg extension is a non-proprietary XML-based vector alternative to .ai, so technically it&#8217;s not an exported image. You&#8217;ll create an SVG under <strong>File > Save As<\/strong>.<\/p>\n\n\n\n<p>Be aware of the <strong>Use Artboards<\/strong> option in the <strong>Save As<\/strong> dialog. Check or uncheck it accordingly. A nifty time-saver, if you&#8217;re making a batch of individual symbols, is to create one individual artboard per symbol and <strong>Save As<\/strong> with <strong>Use Artboards<\/strong> checked. This will output individual SVG files for each symbol in the batch.<\/p>\n\n\n\n<p>If you need a bit of padding around your image, say if you have a drop shadow effect that you want to fade at an edge, create a rectangle with no stroke and no fill that is slightly larger than your image, keeping the edge of this geometry wider and taller than the image by a small but uniformly distributed dimension, then <strong>Save As<\/strong> with <strong>Use Artboards<\/strong> unchecked. Alternatively, size the artboard itself slightly but uniformly larger than the centered image and <strong>Save As<\/strong> with <strong>Use Artboards<\/strong> checked.<\/p>\n\n\n\n<p>Once you click on Save in the Save As dialog, inspect the SVG Options dialog that opens:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Use the options as shown on the screenshot at right:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Profile<\/strong>: SVG 1.1<\/li>\n\n\n\n<li><strong>Type<\/strong>: SVG<\/li>\n\n\n\n<li><strong>Subsetting<\/strong>: Only glyphs used OR Convert to outline (see below)<\/li>\n\n\n\n<li><strong>Image location<\/strong>: Link OR Embed<\/li>\n\n\n\n<li><strong>CSS Properties<\/strong>: Style Elements<\/li>\n\n\n\n<li><strong>Decimal Places<\/strong>: 1<\/li>\n\n\n\n<li><strong>Check<\/strong>&nbsp;Output fewer &lt;tspan&gt; elements<\/li>\n\n\n\n<li><strong>Check<\/strong>&nbsp;Use &lt;textPath&gt; element for Text on Path&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Some detail on these settings is described below.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"521\" height=\"651\" data-attachment-id=\"4044\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/svg-options\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/svg-options.png\" data-orig-size=\"521,651\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"svg-options\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/svg-options.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/svg-options.png\" alt=\"\" class=\"wp-image-4044\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/svg-options.png 521w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/svg-options-240x300.png 240w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/svg-options-300x375.png 300w\" sizes=\"auto, (max-width: 521px) 100vw, 521px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Profile\"><\/span>Profile<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>SVG 1.1 is the option recommended by the W3C. The others were created for first-generation mobile devices \u2014 think old-timey Blackberry \u2014 and are not relevant unless you&#8217;re aiming at that kind of device for whatever reason.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Fonts_Type_and_Subsetting\"><\/span>Fonts Type and Subsetting<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>Under <strong>Fonts<\/strong>, web designers MUST choose the<strong> SVG<\/strong> option to enable the font format recommended by the W3C. This will embed the font in the resulting document. Embedding affects file size, so if you don&#8217;t need the entire glyph set embedded, selecting <strong>Only glyphs used<\/strong> will save space.<\/p>\n\n\n\n<p>Alternatively, choosing <strong>Convert to outline<\/strong> changes the font into geometry, much like the <strong>Create Outlines<\/strong> function. This is a great choice for simple type, but if you are using a complex script or ornamental type that results in complex vector paths, it can increase file size.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Image_embedding_versus_linking\"><\/span>Image embedding versus linking<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>If you are combining SVG text with a raster image in Illustrator and then outputting an SVG, you can choose between embedding the raster information within the SVG file or linking to an external file. This is a tough call. <strong>Embed<\/strong> leads to a larger file with a wall of human-unreadable raster code, but it&#8217;s unlikely you&#8217;ll ever have to look at it. Linking leads to a much smaller file size, but the link Illustrator creates points to a raster file on your local hard drive, not a web server, and this needs to be hand-coded to correct. As you become more comfortable with code, the best way is to select the Link option, then modify the href tag to point to your image file, which you can control the compression for in Photoshop.<\/p>\n\n\n\n<p>Note underneath these options is a check box for <strong>Preserve Illustrator Editing capabilities<\/strong>. Generally, you want to uncheck this. The file is living on the web and read by a web browser, not Illustrator, and the proprietary data this adds to a file can increase the file size by 1000% \u2014 that&#8217;s not a typo!<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"More_options\"><\/span>More options<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>Under the More options button, you&#8217;ll see important goodies to help a web designer reduce the weight of an SVG file:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choosing<strong> Style Elements<\/strong> under<strong> CSS Properties<\/strong> for images destined for the web means Illustrator will translate graphic styles created in Illustrator into CSS properties at the top of the code. Highly useful as you become increasingly CSS savvy.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Decimal places<\/strong> will control the precision of the vector paths exported. Selecting <strong>1<\/strong> can dramatically reduce file size, and even with complex paths, it&#8217;s hard to detect a difference.<\/li>\n\n\n\n<li>Checking <strong>Output fewer &lt;tspan> elements<\/strong> and <strong>Use &lt;textPath> element for Text on Path<\/strong> dramatically reduces the size for embedded fonts or text created on paths. Use as appropriate.<\/li>\n<\/ul>\n\n\n\n<p><strong>Raster type<\/strong><\/p>\n\n\n\n<p>Raster-based text images still significantly outnumber their SVG-base siblings on the web, and there will be many times you&#8217;ll be called upon to generate a GIF, JPG, or PNG-based image replacement solution. Raster remains a viable option for certain aesthetic outcomes, especially when combining text with photos.<\/p>\n\n\n\n<p>The big foe with raster-based images remains, as always, scale. The raster image below is 112 pixels square. It&#8217;s only sharp when downsampled:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\">28 pixels<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"113\" height=\"113\" data-attachment-id=\"4048\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/print-5\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg\" data-orig-size=\"113,113\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;Print&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"Print\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg\" alt=\"\" class=\"wp-image-4048\" style=\"object-fit:contain;width:28px;height:28px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg 113w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113-100x100.jpg 100w\" sizes=\"auto, (max-width: 113px) 100vw, 113px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\">56 pixels<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"113\" height=\"113\" data-attachment-id=\"4048\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/print-5\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg\" data-orig-size=\"113,113\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;Print&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"Print\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg\" alt=\"\" class=\"wp-image-4048\" style=\"object-fit:contain;width:56px;height:56px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg 113w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113-100x100.jpg 100w\" sizes=\"auto, (max-width: 113px) 100vw, 113px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\">112 pixels<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"113\" height=\"113\" data-attachment-id=\"4048\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/print-5\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg\" data-orig-size=\"113,113\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;Print&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"Print\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg\" alt=\"\" class=\"wp-image-4048\" style=\"object-fit:cover;width:112px;height:112px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg 113w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113-100x100.jpg 100w\" sizes=\"auto, (max-width: 113px) 100vw, 113px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\">224 pixels<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"113\" height=\"113\" data-attachment-id=\"4048\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/print-5\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg\" data-orig-size=\"113,113\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;Print&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"Print\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg\" alt=\"\" class=\"wp-image-4048\" style=\"object-fit:contain;width:224px;height:224px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113.jpg 113w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/wcb_113-100x100.jpg 100w\" sizes=\"auto, (max-width: 113px) 100vw, 113px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>One can argue that working with a giant file solves this problem, but there are issues with this lazy fix, not the least of which is performance on a mobile device. Working close to the intended size and screen resolution is preferred, although an exception can be made for an image that is served up at multiple sizes on a page. Be aware that <strong>retinal screen resolution<\/strong>, which doubles the traditional 72 ppi resolution for Mac monitors, can affect how the browser renders an image.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tweaking_raster_type_for_the_web\"><\/span>Tweaking raster type for the web<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>When creating raster type, some subtle but important tweaks affect legibility, especially as the type becomes smaller on lower-resolution screens.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Anti-aliasing\"><\/span>Anti-aliasing<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p><strong>Anti-aliasing<\/strong> allows one to produce a smooth edge by partially filling in the opacity of edge pixels. The effect causes an optical illusion whereby the edges of the type blend into the background. Using anti-alias edges on a GIF increases the number of indexed colors in the file, so you want to be aware if keeping a small file size is critical.<\/p>\n\n\n\n<p>To apply anti-aliasing to type when working in Photoshop, open the Type Tool and observe the Options bar. We find the <strong>anti-alias options<\/strong> at the little  <strong><sup>a<\/sup><sub>a\u00a0 <\/sub><\/strong>icon to the right of the font-size dropout. With text selected, you can choose <strong>None<\/strong>,\u00a0<strong>Sharp<\/strong>,\u00a0<strong>Crisp<\/strong>,\u00a0<strong>Strong<\/strong>, or <strong>Smooth <\/strong>among anti-aliasing options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1003\" height=\"36\" data-attachment-id=\"4049\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/type_options_bar\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/type_options_bar.png\" data-orig-size=\"1003,36\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"type_options_bar\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/type_options_bar.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/type_options_bar.png\" alt=\"\" class=\"wp-image-4049\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/type_options_bar.png 1003w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/type_options_bar-300x11.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/type_options_bar-768x28.png 768w\" sizes=\"auto, (max-width: 1003px) 100vw, 1003px\" \/><\/figure>\n\n\n\n<p>Let&#8217;s apply all of the anti-alias options to a condition that is at the edge of legibility: a line of 10 pt Arial type at 72 ppi. This results in capital letterforms that are a glyph-decimating 7 pixels tall. Below, we enlarge them to show the effects of anti-aliasing, and next to that, we display them at the true intended size. It may seem counter-intuitive, but that &#8220;blur&#8221; that seems so terrible when zoomed in creates more readable letterforms:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"720\" data-attachment-id=\"4050\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/500percent_anti-alias\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/500percent_anti-alias.png\" data-orig-size=\"720,720\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"500percent_anti-alias\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/500percent_anti-alias.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/500percent_anti-alias.png\" alt=\"\" class=\"wp-image-4050\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/500percent_anti-alias.png 720w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/500percent_anti-alias-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/500percent_anti-alias-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/500percent_anti-alias-100x100.png 100w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"144\" height=\"144\" data-attachment-id=\"4051\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/anti-aliasing\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing.png\" data-orig-size=\"144,144\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"anti-aliasing\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing.png\" alt=\"\" class=\"wp-image-4051\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing.png 144w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing-100x100.png 100w\" sizes=\"auto, (max-width: 144px) 100vw, 144px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Which option produces the best results in this context? <strong>None<\/strong> is a non-viable option, but we can debate the merits of the others. There&#8217;s another trick that can help us decide&#8230;<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tracking\"><\/span>Tracking<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>Recall tracking as the manipulation of negative space between letterforms on an entire line of type. Kerning at this scale is too subtle, but tracking creates a remarkable difference. To the same sample as above, apply a tracking of 100, and compare side by side:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"144\" height=\"144\" data-attachment-id=\"4051\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/anti-aliasing\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing.png\" data-orig-size=\"144,144\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"anti-aliasing\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing.png\" alt=\"\" class=\"wp-image-4051\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing.png 144w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing-100x100.png 100w\" sizes=\"auto, (max-width: 144px) 100vw, 144px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Tracking = 0<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"144\" height=\"144\" data-attachment-id=\"4054\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/anti-aliasing_tracking\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_tracking.png\" data-orig-size=\"144,144\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"anti-aliasing_tracking\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_tracking.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_tracking.png\" alt=\"\" class=\"wp-image-4054\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_tracking.png 144w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_tracking-100x100.png 100w\" sizes=\"auto, (max-width: 144px) 100vw, 144px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Tracking = 100<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Wide tracking is the same trick used for highway roadsigns to allow letterforms to be legible from a distance, where they appear to be quite tiny. In our tracking sample, we can still debate the merits of the various anti-aliasing options, but <strong>Sharp<\/strong> appears to have the best balance between crispness and maintaining the glyph design. <strong>Strong<\/strong> almost borders on a bold styling.<strong> Smooth<\/strong> and<strong> Crisp<\/strong> seemed like better candidates before the tracking was applied, but now seem a bit blurrier than desired.&nbsp;<\/p>\n\n\n\n<p>This is counterintuitive, but at these tiny scales, it can often be true that a smaller font with wider tracking is <strong>more legible<\/strong> than a larger font with narrow tracking!<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Resampling_in_Photoshop\"><\/span>Resampling in Photoshop<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>We try to avoid resizing blocks of text whenever possible, but from time to time you will encounter line art or scanned graphics that contain a block of type it&#8217;s just not practical to rebuild.<\/p>\n\n\n\n<p>Below we resample the 6 X 6 block of type from above down to a 2 X 2 size. After selecting <strong>Image&gt;Image Size&#8230;<\/strong> in the&nbsp;<strong>Image Size<\/strong> dialog box we first resample by using a <strong>Resample: Bilinear <\/strong>option. Then, we resample using <strong>Bicubic Sharper<\/strong> to compare:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"144\" height=\"144\" data-attachment-id=\"4058\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/anti-aliasing_larger_resampledbilinear\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_larger_resampledbilinear.png\" data-orig-size=\"144,144\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"anti-aliasing_larger_resampledbilinear\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_larger_resampledbilinear.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_larger_resampledbilinear.png\" alt=\"\" class=\"wp-image-4058\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_larger_resampledbilinear.png 144w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_larger_resampledbilinear-100x100.png 100w\" sizes=\"auto, (max-width: 144px) 100vw, 144px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Resample: Bilinear<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"144\" height=\"144\" data-attachment-id=\"4060\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/anti-aliasing_larger_resampledbicubicsharper\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_larger_resampledbicubicsharper.png\" data-orig-size=\"144,144\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"anti-aliasing_larger_resampledbicubicsharper\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_larger_resampledbicubicsharper.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_larger_resampledbicubicsharper.png\" alt=\"\" class=\"wp-image-4060\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_larger_resampledbicubicsharper.png 144w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/anti-aliasing_larger_resampledbicubicsharper-100x100.png 100w\" sizes=\"auto, (max-width: 144px) 100vw, 144px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Resample: Bicubic Sharper<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Neither result is better than the file that was produced originally at 2 X 2, but here we are pretending this is line art or a scanned graphic we can&#8217;t otherwise reproduce.&nbsp;The moral: when resampling, don&#8217;t assume the default option for <strong>Resample:<\/strong> will automatically yield the best results. Experiment with a couple of options and choose the best result.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Photoshop_text_tutorials\"><\/span>Photoshop text tutorials<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p>To prepare for our upcoming image-based text exercises, take the Photoshop text tutorials found at <strong>Photoshop Essentials<\/strong>. These tutorials are presented in reverse order: the first one you should take starts at the <strong>bottom<\/strong>, and then move your way up to the more advanced tutorials at the top!<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/www.photoshopessentials.com\/basics\/type\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the Photoshop Essentials <\/a><\/em><\/strong><br><strong><em><a href=\"https:\/\/www.photoshopessentials.com\/basics\/type\/\" target=\"_blank\" rel=\"noreferrer noopener\">type tutorial page \u00bb<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Regarding_accessibility\"><\/span>Regarding accessibility<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We mentioned earlier that image replacement text can adversely affect a variety of functionality, including how your web page shows up in searches. Some of that can be dealt with using other SEO (search engine optimization) strategies, but one issue that it&#8217;s hard to work around is <strong>accessibility<\/strong>.<\/p>\n\n\n\n<p>In web design, accessibility is a principle responding to the <strong><a href=\"https:\/\/www.ada.gov\/\" target=\"_blank\" rel=\"noreferrer noopener\">Americans with Disabilities Act<\/a><\/strong>, a legislative initiative protecting the civil rights of alternatively abled citizens. In some contexts, client needs require that web designers adhere to accessibility guidelines for vision, hearing, touch, and other conditions that their clients may need accommodation for. This is especially true in corporate or public institution contexts.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>At the <strong>Web Accessibility In Mind (WebAIM)<\/strong> website, there is a wealth of information on achieving an accessible site. Here you&#8217;ll find tools that allow you to <strong><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noreferrer noopener\">check the contrast of text with background in your design<\/a><\/strong> and other useful helpers.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/webaim.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the WebAIM website \u00bb<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>One of the keys to accessibility regarding images on the web is the use of the&nbsp;<code>alt=\" \"<\/code>&nbsp;attribute in the&nbsp;<code>&lt;img&gt;<\/code>&nbsp;tag for images. The HTML standard requires the presence of an&nbsp;alt&nbsp;attribute, and it can be used to help sight-challenged clients using <strong>screen readers<\/strong> understand where an image is placed and what that image might contain or do. So for a text-heavy logo image, you&#8217;d need to include an&nbsp;<code>alt=\"Joe's Logo\"<\/code>&nbsp;or an&nbsp;<code>alt=\"click here to go to Joe's website\"<\/code>&nbsp;&nbsp;to assist those clients.<\/p>\n<ol class=\"footnotes\"><li id=\"footnote_1_3913\" class=\"footnote\">Simonson, Mark. &#8220;<a href=\"http:\/\/www.marksimonson.com\/notebook\/view\/the-lost-art-of-type-specing\">The Lost Art of Type Spec\u2019ing.<\/a>&#8221; Mark Simonson Studio, 27 September 2008<span class=\"footnote-back-link-wrapper\">[<a href=\"#identifier_1_3913\" class=\"footnote-link footnote-back-link\">&#8617;<\/a>]<\/span><\/li><li id=\"footnote_2_3913\" class=\"footnote\">Hewitt, Alison. &#8221; <a href=\"http:\/\/newsroom.ucla.edu\/stories\/prof-revives-lost-art-of-printing-press-111145\">Prof revives lost art of printing press.<\/a>&#8221; UCLA Newsroom, 9 October 2009<span class=\"footnote-back-link-wrapper\">[<a href=\"#identifier_2_3913\" class=\"footnote-link footnote-back-link\">&#8617;<\/a>]<\/span><\/li><li id=\"footnote_3_3913\" class=\"footnote\">David Carson. &#8220;<a href=\"https:\/\/www.ted.com\/talks\/david_carson_design_and_discovery\">Design and discovery<\/a>&#8221; TED, February 2003<span class=\"footnote-back-link-wrapper\">[<a href=\"#identifier_3_3913\" class=\"footnote-link footnote-back-link\">&#8617;<\/a>]<\/span><\/li><\/ol>","protected":false},"excerpt":{"rendered":"<p>4D media 2 | a2z eTypography Typesetting tools for movable type. From Wikimedia Commons. eTypography Type spec&#8217;ing and setting Before the desktop publishing revolution, type specification and typesetting was a laboriously hand-crafted affair. In his illuminating blog post on&nbsp;The Lost Art of Type Spec&#8217;ing, font designer Mark Simonson says: We are so spoiled nowadays. We&#8230; <a href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/\">read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5,10],"tags":[],"class_list":["post-3913","post","type-post","status-publish","format-standard","hentry","category-4d-media","category-references"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>eTypography - newMediaWiki<\/title>\n<meta name=\"description\" content=\"eTypography: We explore how digital praxis has changed the way designers think about this fundamental visual element.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"eTypography - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"eTypography: We explore how digital praxis has changed the way designers think about this fundamental visual element.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/etypography\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-10T21:06:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-09T21:51:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" \/>\n<meta name=\"author\" content=\"williamCromar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"williamCromar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/\"},\"author\":{\"name\":\"williamCromar\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"headline\":\"eTypography\",\"datePublished\":\"2023-11-10T21:06:34+00:00\",\"dateModified\":\"2024-01-09T21:51:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/\"},\"wordCount\":3800,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"articleSection\":[\"4d media\",\"References\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/\",\"name\":\"eTypography - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"datePublished\":\"2023-11-10T21:06:34+00:00\",\"dateModified\":\"2024-01-09T21:51:06+00:00\",\"description\":\"eTypography: We explore how digital praxis has changed the way designers think about this fundamental visual element.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/#primaryimage\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"contentUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"width\":420,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/etypography\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"eTypography\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\",\"name\":\"newMediaWiki\",\"description\":\"because all media are new\",\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\",\"name\":\"williamCromar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"width\":1754,\"height\":1754,\"caption\":\"williamCromar\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\"},\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/author\\\/williamcromar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"eTypography - newMediaWiki","description":"eTypography: We explore how digital praxis has changed the way designers think about this fundamental visual element.","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:\/\/williamcromar.com\/newmediawiki\/etypography\/","og_locale":"en_US","og_type":"article","og_title":"eTypography - newMediaWiki","og_description":"eTypography: We explore how digital praxis has changed the way designers think about this fundamental visual element.","og_url":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/","og_site_name":"newMediaWiki","article_published_time":"2023-11-10T21:06:34+00:00","article_modified_time":"2024-01-09T21:51:06+00:00","og_image":[{"url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","type":"","width":"","height":""}],"author":"williamCromar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"williamCromar","Est. reading time":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#article","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/"},"author":{"name":"williamCromar","@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"headline":"eTypography","datePublished":"2023-11-10T21:06:34+00:00","dateModified":"2024-01-09T21:51:06+00:00","mainEntityOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/"},"wordCount":3800,"commentCount":0,"publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","articleSection":["4d media","References"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/williamcromar.com\/newmediawiki\/etypography\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/","url":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/","name":"eTypography - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","datePublished":"2023-11-10T21:06:34+00:00","dateModified":"2024-01-09T21:51:06+00:00","description":"eTypography: We explore how digital praxis has changed the way designers think about this fundamental visual element.","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/etypography\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#primaryimage","url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","contentUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","width":420,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/williamcromar.com\/newmediawiki\/etypography\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":"eTypography"}]},{"@type":"WebSite","@id":"https:\/\/williamcromar.com\/newmediawiki\/#website","url":"https:\/\/williamcromar.com\/newmediawiki\/","name":"newMediaWiki","description":"because all media are new","publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/williamcromar.com\/newmediawiki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3","name":"williamCromar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","url":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","contentUrl":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","width":1754,"height":1754,"caption":"williamCromar"},"logo":{"@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1"},"url":"https:\/\/williamcromar.com\/newmediawiki\/author\/williamcromar\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/3913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/comments?post=3913"}],"version-history":[{"count":19,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/3913\/revisions"}],"predecessor-version":[{"id":5920,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/3913\/revisions\/5920"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=3913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/categories?post=3913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/tags?post=3913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}