{"id":399,"date":"2025-02-20T16:13:35","date_gmt":"2025-02-20T21:13:35","guid":{"rendered":"https:\/\/mkt.selfregional.org\/edit\/?p=399"},"modified":"2025-02-26T13:44:30","modified_gmt":"2025-02-26T18:44:30","slug":"typography","status":"publish","type":"post","link":"https:\/\/mkt.selfregional.org\/edit\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"\n<p>I\u2019ll lay out a decent selection of common typography configurations here for customizing. I create the font selection feature in the editor and add a series of custom selectable patterns to match the font combinations. This will make it easier to create consistent page layouts across different sections and sites. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Style Guide<\/h2>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-accent-2-background-color has-background wp-element-button\" href=\"https:\/\/mkt.selfregional.org\/files\/fonts\/\">Files \/ Fonts<\/a><\/div>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Century Gothic ( default ) <\/li>\n\n\n\n<li>Berkeley Pro\n<ul class=\"wp-block-list\">\n<li>uses annual licensing for .woff\/.woff2 web fonts.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><s>Myriad Pro<\/s><\/li>\n\n\n\n<li>Formata<\/li>\n\n\n\n<li><strong>ECH<\/strong> &#8211; Avant Garde Gothic Bold, Standard and Berkeley Oldstyle Bold Italic<\/li>\n\n\n\n<li><strong>AAMC<\/strong> &#8211; Trajan Pro Bold and Formata Medium.\n<ul class=\"wp-block-list\">\n<li>affiliated line &#8211; ITC Berkeley Oldstyle Italic.<\/li>\n\n\n\n<li>Entity names are Century Gothic Bold<br><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center has-berkeley-pro-font-family\" style=\"font-size:clamp(33.419px, 2.089rem + ((1vw - 3.2px) * 2.606), 60px);letter-spacing:2px;text-transform:uppercase\"><span class=\"logo-letter\">S<\/span>elf <span class=\"logo-letter\">R<\/span>egional<\/p>\n\n\n\n<p class=\"has-text-align-center\" style=\"letter-spacing:6px;text-transform:uppercase\">Healthcare<\/p>\n\n\n\n<p class=\"has-text-align-center has-century-gothic-font-family\" style=\"font-size:clamp(1.092rem, 1.092rem + ((1vw - 0.2rem) * 0.954), 1.7rem);line-height:3.4\">Healthcare. Connected.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull has-custom-content-position is-position-top-left wp-duotone-19458c-ffffff-1\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-accent-2-background-color has-background-dim\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1707\" class=\"wp-block-cover__image-background wp-image-635\" alt=\"\" src=\"https:\/\/mkt.selfregional.org\/edit\/wp-content\/uploads\/med_trans_one-scaled.jpg\" style=\"object-position:50% 70%\" data-object-fit=\"cover\" data-object-position=\"50% 70%\" srcset=\"https:\/\/mkt.selfregional.org\/edit\/wp-content\/uploads\/med_trans_one-scaled.jpg 2560w, https:\/\/mkt.selfregional.org\/edit\/wp-content\/uploads\/med_trans_one-300x200.jpg 300w, https:\/\/mkt.selfregional.org\/edit\/wp-content\/uploads\/med_trans_one-1024x683.jpg 1024w, https:\/\/mkt.selfregional.org\/edit\/wp-content\/uploads\/med_trans_one-768x512.jpg 768w, https:\/\/mkt.selfregional.org\/edit\/wp-content\/uploads\/med_trans_one-1536x1024.jpg 1536w, https:\/\/mkt.selfregional.org\/edit\/wp-content\/uploads\/med_trans_one-2048x1365.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><div class=\"wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained\">\n<div class=\"wp-block-group has-accent-2-background-color has-background is-layout-constrained wp-container-core-group-is-layout-594587f7 wp-block-group-is-layout-constrained\" style=\"border-radius:30px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--30)\">\n<p class=\"has-text-align-center has-base-color has-text-color has-link-color has-century-gothic-font-family wp-elements-4ebd76fb4152140f2a9019b3e71702a6\" style=\"font-size:clamp(2.066rem, 2.066rem + ((1vw - 0.2rem) * 2.563), 3.7rem);font-style:normal;font-weight:700\">MED-TRANS ONE<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading has-century-gothic-font-family\">Century Gothic<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Century Gothic<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Century Gothic<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Century Gothic<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Century Gothic<\/h5>\n\n\n\n<h6 class=\"wp-block-heading\">Century Gothic<\/h6>\n\n\n\n<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br>a b c d e f g h i j k l m n o p q r s t u v w x y z<br>1 2 3 4 5 6 7 8 9 0<\/p>\n\n\n\n<p>[M] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque sit amet nisi nec hendrerit. Nam pretium arcu quis metus viverra rhoncus sit amet egestas odio. Morbi dignissim, felis id placerat auctor, dolor massa condimentum erat, sed dictum neque ipsum vitae leo. In ex dui, tincidunt nec varius ut, malesuada id neque.&nbsp;<\/p>\n\n\n\n<p>[S] Vestibulum dapibus id nunc aliquet tristique. Donec vehicula diam nulla, non placerat justo ullamcorper eu. Suspendisse iaculis erat ante, quis pharetra dolor tempor vitae. Duis facilisis consequat justo, sed tincidunt purus lobortis et. Vestibulum commodo nisi sit amet felis maximus viverra. Vestibulum porttitor arcu vitae eleifend commodo. Fusce vel risus efficitur, euismod magna et, elementum ante. Pellentesque leo urna, tincidunt nec pretium vel, ornare vel lorem.<\/p>\n\n\n\n<p>[XS] Vestibulum dapibus id nunc aliquet tristique. Donec vehicula diam nulla, non placerat justo ullamcorper eu. Suspendisse iaculis erat ante, quis pharetra dolor tempor vitae. Duis facilisis consequat justo, sed tincidunt purus lobortis et. Vestibulum commodo nisi sit amet felis maximus viverra. Vestibulum porttitor arcu vitae eleifend commodo. Fusce vel risus efficitur, euismod magna et, elementum ante. Pellentesque leo urna, tincidunt nec pretium vel, ornare vel lorem.<\/p>\n\n\n\n<p>[L] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque sit amet nisi nec hendrerit. Nam pretium arcu quis metus viverra rhoncus sit amet egestas odio. Morbi dignissim, felis id placerat auctor, dolor massa condimentum erat, sed dictum neque ipsum vitae leo. In ex dui, tincidunt nec varius ut, malesuada id neque.&nbsp;<\/p>\n\n\n\n<p>[XL] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque sit amet nisi nec hendrerit. Nam pretium arcu quis metus viverra rhoncus sit amet egestas odio. Morbi dignissim, felis id placerat auctor, dolor massa condimentum erat, sed dictum neque ipsum vitae leo. In ex dui, tincidunt nec varius ut, malesuada id neque.<\/p>\n\n\n\n<p>[XXL] Lorem ipsum dolor sit amet, consectetur adipiscing elit.\u00a0<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading has-century-gothic-font-family\"><strong>Century Gothic Bold<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading has-century-gothic-font-family\"><strong>Century Gothic Bold<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-century-gothic-font-family\"><strong>Century Gothic Bold<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading has-century-gothic-font-family\"><strong>Century Gothic Bold<\/strong><\/h4>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Century Gothic Bold<\/strong><\/h5>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>Century Gothic Bold<\/strong><\/h6>\n\n\n\n<p class=\"has-century-gothic-font-family\"><strong>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br>a b c d e f g h i j k l m n o p q r s t u v w x y z<br>1 2 3 4 5 6 7 8 9 0<\/strong><\/p>\n\n\n\n<p class=\"has-century-gothic-font-family\"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque sit amet nisi nec hendrerit. Nam pretium arcu quis metus viverra rhoncus sit amet egestas odio. Morbi dignissim, felis id placerat auctor, dolor massa condimentum erat, sed dictum neque ipsum vitae leo. In ex dui, tincidunt nec varius ut, malesuada id neque. Vestibulum dapibus id nunc aliquet tristique. Donec vehicula diam nulla, non placerat justo ullamcorper eu. Suspendisse iaculis erat ante, quis pharetra dolor tempor vitae. Duis facilisis consequat justo, sed tincidunt purus lobortis et. Vestibulum commodo nisi sit amet felis maximus viverra. Vestibulum porttitor arcu vitae eleifend commodo. Fusce vel risus efficitur, euismod magna et, elementum ante. Pellentesque leo urna, tincidunt nec pretium vel, ornare vel lorem.<\/strong><\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading has-berkeley-pro-font-family\">Berkeley Pro ITC Old Style<\/h1>\n\n\n\n<h2 class=\"wp-block-heading has-berkeley-pro-font-family\">Berkeley Pro ITC Old Style<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-berkeley-pro-font-family\">Berkeley Pro ITC Old Style<\/h3>\n\n\n\n<h4 class=\"wp-block-heading has-berkeley-pro-font-family\">Berkeley Pro ITC Old Style<\/h4>\n\n\n\n<p class=\"has-berkeley-pro-font-family\">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br>a b c d e f g h i j k l m n o p q r s t u v w x y z<br>1 2 3 4 5 6 7 8 9 0<\/p>\n\n\n\n<p class=\"has-berkeley-pro-font-family\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque sit amet nisi nec hendrerit. Nam pretium arcu quis metus viverra rhoncus sit amet egestas odio. Morbi dignissim, felis id placerat auctor, dolor massa condimentum erat, sed dictum neque ipsum vitae leo. In ex dui, tincidunt nec varius ut, malesuada id neque. Vestibulum dapibus id nunc aliquet tristique. Donec vehicula diam nulla, non placerat justo ullamcorper eu. Suspendisse iaculis erat ante, quis pharetra dolor tempor vitae. Duis facilisis consequat justo, sed tincidunt purus lobortis et. Vestibulum commodo nisi sit amet felis maximus viverra. Vestibulum porttitor arcu vitae eleifend commodo. Fusce vel risus efficitur, euismod magna et, elementum ante. Pellentesque leo urna, tincidunt nec pretium vel, ornare vel lorem.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading has-berkeley-pro-font-family\"><strong>Berkeley Pro ITC Old Style<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading has-berkeley-pro-font-family\"><strong>Berkeley Pro ITC Old Style<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-berkeley-pro-font-family\"><strong>Berkeley Pro ITC Old Style<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading has-berkeley-pro-font-family\"><strong>Berkeley Pro ITC Old Style<\/strong><\/h4>\n\n\n\n<p class=\"has-berkeley-pro-font-family\" style=\"font-style:normal;font-weight:700\">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br>a b c d e f g h i j k l m n o p q r s t u v w x y z<br>1 2 3 4 5 6 7 8 9 0<\/p>\n\n\n\n<p class=\"has-berkeley-pro-font-family\" style=\"font-style:normal;font-weight:700\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque sit amet nisi nec hendrerit. Nam pretium arcu quis metus viverra rhoncus sit amet egestas odio. Morbi dignissim, felis id placerat auctor, dolor massa condimentum erat, sed dictum neque ipsum vitae leo. In ex dui, tincidunt nec varius ut, malesuada id neque. Vestibulum dapibus id nunc aliquet tristique. Donec vehicula diam nulla, non placerat justo ullamcorper eu. Suspendisse iaculis erat ante, quis pharetra dolor tempor vitae. Duis facilisis consequat justo, sed tincidunt purus lobortis et. Vestibulum commodo nisi sit amet felis maximus viverra. Vestibulum porttitor arcu vitae eleifend commodo. Fusce vel risus efficitur, euismod magna et, elementum ante. Pellentesque leo urna, tincidunt nec pretium vel, ornare vel lorem.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><\/h1>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-xx-large-font-size\"><strong>Typeset<\/strong><\/h3>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Styles<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-fira-code-font-family\">creative touches like ligatures and drop caps<\/li>\n\n\n\n<li class=\"has-fira-code-font-family\">clean fallback with woff fonts<\/li>\n\n\n\n<li class=\"has-fira-code-font-family\">avoid flash of unstyled content<\/li>\n<\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019ll lay out a decent selection of common typography configurations here for customizing. I create the font selection feature in the editor and add a series of custom selectable patterns to match the font combinations. This will make it easier to create consistent page layouts across different sections and sites. Style Guide Self Regional Healthcare [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-399","post","type-post","status-publish","format-standard","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/mkt.selfregional.org\/edit\/wp-json\/wp\/v2\/posts\/399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mkt.selfregional.org\/edit\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mkt.selfregional.org\/edit\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mkt.selfregional.org\/edit\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mkt.selfregional.org\/edit\/wp-json\/wp\/v2\/comments?post=399"}],"version-history":[{"count":77,"href":"https:\/\/mkt.selfregional.org\/edit\/wp-json\/wp\/v2\/posts\/399\/revisions"}],"predecessor-version":[{"id":828,"href":"https:\/\/mkt.selfregional.org\/edit\/wp-json\/wp\/v2\/posts\/399\/revisions\/828"}],"wp:attachment":[{"href":"https:\/\/mkt.selfregional.org\/edit\/wp-json\/wp\/v2\/media?parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mkt.selfregional.org\/edit\/wp-json\/wp\/v2\/categories?post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mkt.selfregional.org\/edit\/wp-json\/wp\/v2\/tags?post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}