{"id":423,"date":"2022-02-20T15:56:28","date_gmt":"2022-02-20T19:56:28","guid":{"rendered":"http:\/\/wp.ollieweb.org\/?p=423"},"modified":"2022-12-30T11:01:36","modified_gmt":"2022-12-30T15:01:36","slug":"typography","status":"publish","type":"post","link":"https:\/\/wp.ollieweb.org\/index.php\/2022\/02\/20\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Using fonts effectively on websites is a real challenge for most web developers. In years past, fonts were a least-common-denominator kind of a consideration, since as a web developer you couldn&#8217;t count on users having the particular fonts you wanted to use. So, as often as not, you just went with the generic font categories, e.g., Serif, Sans-serif, Mono, etc. and lived with whatever the browser used to fulfill your selection.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"google-fonts\">Google Fonts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a rel=\"noreferrer noopener\" href=\"https:\/\/fonts.google.com\" data-type=\"URL\" data-id=\"https:\/\/fonts.google.com\" target=\"_blank\">Google Fonts<\/a> revolutionized this. Not only have they make it easy to embed fonts in your site that were visible to all your audience, but the fonts are FREE!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Their website says:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Google Fonts is a library of 1,359 free licensed font families and APIs for convenient use via CSS and Android. The library also has delightful and beautifully crafted icons for common actions and items. Download them for use in your digital products for Android, iOS, and web.<\/p><cite><a href=\"https:\/\/fonts.google.com\/knowledge?vfonly=true&amp;sort=popularity\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/fonts.google.com\/knowledge?vfonly=true&amp;sort=popularity<\/a><\/cite><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">That same page is a jumping off point to a library of articles <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While searching 1,300+ fonts for your particular favorites is daunting, the site&#8217;s sorting, popularity measures, filtering by type, etc. all make quick work of selecting families.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The site also generates the link codes for your page headers and the css needed to invoke the fonts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"a-visual-type-scale\">A Visual Type Scale<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A site I highly recommend, <a rel=\"noreferrer noopener\" href=\"https:\/\/type-scale.com\" data-type=\"URL\" data-id=\"https:\/\/type-scale.com\" target=\"_blank\">A Visual Type Scale<\/a>, can take you further with your selected Google fonts by pairing and displaying different fonts for body and headers while letting you adjust:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>base font weight &amp; size<\/li><li>different line heights<\/li><li>the size ratio between body size and each of the headers<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When you see what you like, you can download the CSS to implement the selections on your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"font-squirrel\">Font Squirrel<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lots more fonts, free and otherwise, are available at <a rel=\"noreferrer noopener\" href=\"https:\/\/www.fontsquirrel.com\" target=\"_blank\">Font Squirrel<\/a>. They also give access to FontTalk discussion boards and their Blog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using fonts effectively on websites is a real challenge for most web developers. In years past, fonts were a least-common-denominator kind of a consideration, since as a web developer you couldn&#8217;t count on users having the particular fonts you wanted to use. So, as often as not, you just went with the generic font categories,&hellip; <a class=\"more-link\" href=\"https:\/\/wp.ollieweb.org\/index.php\/2022\/02\/20\/typography\/\">Continue reading <span class=\"screen-reader-text\">Typography<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[55],"tags":[],"class_list":["post-423","post","type-post","status-publish","format-standard","hentry","category-webdev","entry"],"_links":{"self":[{"href":"https:\/\/wp.ollieweb.org\/index.php\/wp-json\/wp\/v2\/posts\/423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.ollieweb.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.ollieweb.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.ollieweb.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.ollieweb.org\/index.php\/wp-json\/wp\/v2\/comments?post=423"}],"version-history":[{"count":2,"href":"https:\/\/wp.ollieweb.org\/index.php\/wp-json\/wp\/v2\/posts\/423\/revisions"}],"predecessor-version":[{"id":432,"href":"https:\/\/wp.ollieweb.org\/index.php\/wp-json\/wp\/v2\/posts\/423\/revisions\/432"}],"wp:attachment":[{"href":"https:\/\/wp.ollieweb.org\/index.php\/wp-json\/wp\/v2\/media?parent=423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.ollieweb.org\/index.php\/wp-json\/wp\/v2\/categories?post=423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.ollieweb.org\/index.php\/wp-json\/wp\/v2\/tags?post=423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}