Visual Identity | Brand Guidelines

<!doctype html> <html lang="en-US"> <head> <title> Visual Identity | Brand Guidelines | Illinois </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="https://cdn.brand.illinois.edu/favicon.ico"> <link rel="stylesheet" href="https://cdn.toolkit.illinois.edu/2.15.0/toolkit.css"> <link rel="stylesheet" href="https://cdn.brand.illinois.edu/illinois.css"> <script src="https://cdn.toolkit.illinois.edu/2.15.0/toolkit.js" defer></script> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <title>Typography – Brand Guidelines</title> <meta name='robots' content='max-image-preview:large' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> <link rel='dns-prefetch' href='//cdn.disability.illinois.edu' /> <link rel='dns-prefetch' href='//onetrust.techservices.illinois.edu' /> <link rel='dns-prefetch' href='//www.googletagmanager.com' /> <script type="text/javascript"> /* <![CDATA[ */ window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/brand.illinois.edu\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.7.2"}}; /*! This file is auto-generated */ !function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); /* ]]> */ </script> <style id='wp-emoji-styles-inline-css' type='text/css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='wp-block-library-css' href='https://brand.illinois.edu/wp-includes/css/dist/block-library/style.min.css?ver=6.7.2' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='smb-styles-css' href='https://brand.illinois.edu/wp-content/themes/smb/style.css?ver=2.3' type='text/css' media='all' /> <link rel='stylesheet' id='tablepress-default-css' href='https://brand.illinois.edu/wp-content/plugins/tablepress/css/build/default.css?ver=3.0.4' type='text/css' media='all' /> <script type="text/javascript" src="https://brand.illinois.edu/wp-content/themes/smb/js/skiptoconf.js?ver=6.7.2" id="skipTo-js"></script> <script type="text/javascript" src="https://cdn.disability.illinois.edu/skipto.min.js" id="skipto-js"></script> <script type="text/javascript" src="https://brand.illinois.edu/wp-content/themes/smb/js/h2-landmarks.js?ver=6.7.2" id="h2-landmarks-js"></script> <script type="text/javascript" src="https://brand.illinois.edu/wp-content/themes/smb/js/pronounce.js?ver=6.7.2" id="pronounce-js"></script> <script type="text/javascript" src="https://brand.illinois.edu/wp-content/themes/smb/js/workshops-filter.js?ver=6.7.2" id="workshops-filter-js"></script> <script type="text/javascript" data-domain-script="26be7d61-2017-4ea7-8a8b-8f1704889763" src="https://onetrust.techservices.illinois.edu/scripttemplates/otSDKStub.js" id="onetrust-js"></script>   <script type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=GT-KF86KT5" id="google_gtagjs-js" async></script> <script type="text/javascript" id="google_gtagjs-js-after"> /* <![CDATA[ */ window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag("set","linker",{"domains":["brand.illinois.edu"]}); gtag("js", new Date()); gtag("set", "developer_id.dZTNiMT", true); gtag("config", "GT-KF86KT5"); /* ]]> */ </script>  <link rel="https://api.w.org/" href="https://brand.illinois.edu/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://brand.illinois.edu/wp-json/wp/v2/pages/791" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://brand.illinois.edu/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.7.2" /> <link rel="canonical" href="https://brand.illinois.edu/visual-identity/typography" /> <link rel='shortlink' href='https://brand.illinois.edu/?p=791' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://brand.illinois.edu/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fbrand.illinois.edu%2Fvisual-identity%2Ftypography" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://brand.illinois.edu/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fbrand.illinois.edu%2Fvisual-identity%2Ftypography&format=xml" /> <meta name="generator" content="Site Kit by Google 1.147.0" />  <script type="text/javascript"> /* <![CDATA[ */ ( function( w, d, s, l, i ) { w[l] = w[l] || []; w[l].push( {'gtm.start': new Date().getTime(), event: 'gtm.js'} ); var f = d.getElementsByTagName( s )[0], j = d.createElement( s ), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore( j, f ); } )( window, document, 'script', 'dataLayer', 'GTM-KDFSCX9P' ); /* ]]> */ </script>  </head> <body class="page-template-default page page-id-791 page-child parent-pageid-64">  <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KDFSCX9P" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript>  <div > <header class="page-header" aria-label="Main"> <div class="site-masthead"> <div class="section-inner"> <div class="page-header__top"> <div class="campus-wordmark"> <a class="campus-wordmark__link" href="https://illinois.edu"> <div class="block-i-container"> <svg class="block-i" role="img" aria-label="Block I logo" viewBox="0 0 55 79" xmlns="http://www.w3.org/2000/svg"> <title>Block I logo</title> <path class="block-i__outline" d="M54.2 21.1V0H0v21.1h12v36.1H0v21.1h54.2V57.2h-12V21.1z"></path> <path class="block-i__fill" d="M42.1 18.1h9V3H3v15h9c1.7 0 3 1.3 3 3v36.1c0 1.7-1.3 3-3 3H3v15h48.1v-15h-9c-1.7 0-3-1.3-3-3v-36c0-1.7 1.4-3 3-3z"></path> </svg> </div> <div class="wordmark-container"> University of Illinois Urbana-Champaign </div> </a> </div> </div> <div class="page-header__bottom"> <div class="site-wordmark"> <div class="primary-unit"> <a href="https://stratcom.illinois.edu/">Strategic Communications and Marketing</a></div> <div class="site-name"><a href="https://brand.illinois.edu">Brand Guidelines</a></div> </div> <div class="site-search"> <form role="search" method="GET" action="/" class=""> <label class="search-label" for="query">Search</label> <input class="search-field" type="search" id="query" name="s" value="" placeholder="Search this site"> <button class="search-button" type="submit"> <svg role="img" aria-label="Site Search" width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.7812 13.8438C16.0625 14.1562 16.0625 14.625 15.75 14.9062L14.875 15.7812C14.5938 16.0938 14.125 16.0938 13.8125 15.7812L10.7188 12.6875C10.5625 12.5312 10.5 12.3438 10.5 12.1562V11.625C9.375 12.5 8 13 6.5 13C2.90625 13 0 10.0938 0 6.5C0 2.9375 2.90625 0 6.5 0C10.0625 0 13 2.9375 13 6.5C13 8.03125 12.4688 9.40625 11.625 10.5H12.125C12.3125 10.5 12.5 10.5938 12.6562 10.7188L15.7812 13.8438ZM6.5 10.5C8.6875 10.5 10.5 8.71875 10.5 6.5C10.5 4.3125 8.6875 2.5 6.5 2.5C4.28125 2.5 2.5 4.3125 2.5 6.5C2.5 8.71875 4.28125 10.5 6.5 10.5Z"/> </svg> </button> </form> </div> <button class="menu-toggle"> <svg class="menu-icon" aria-label="Toggle menu" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.26 51.26"> <path d="M4.81 13h41.64a4.81 4.81 0 000-9.62H4.81a4.81 4.81 0 000 9.62zM46.45 21.27H4.81a4.81 4.81 0 000 9.62h41.64a4.81 4.81 0 000-9.62zM46.45 39.13H4.81a4.81 4.81 0 000 9.62h41.64a4.81 4.81 0 000-9.62z"></path> </svg> <svg class="menu-close" aria-label="Toggle menu" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"> <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path> </svg> <span class="menu-toggle-label">Menu</span> </button> </div> </div> </div> <nav class="site-navigation" aria-label="Main" > <div class="section-inner"> <ul class="main-nav"> <li class="mobile-search"> <div class="site-search"> <form role="search" method="GET" action="/" class=""> <label class="search-label" for="query">Search</label> <input class="search-field" type="search" id="query" name="s" value="" placeholder="Search this site"> <button class="search-button" type="submit"> <svg role="img" aria-label="Site Search" width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.7812 13.8438C16.0625 14.1562 16.0625 14.625 15.75 14.9062L14.875 15.7812C14.5938 16.0938 14.125 16.0938 13.8125 15.7812L10.7188 12.6875C10.5625 12.5312 10.5 12.3438 10.5 12.1562V11.625C9.375 12.5 8 13 6.5 13C2.90625 13 0 10.0938 0 6.5C0 2.9375 2.90625 0 6.5 0C10.0625 0 13 2.9375 13 6.5C13 8.03125 12.4688 9.40625 11.625 10.5H12.125C12.3125 10.5 12.5 10.5938 12.6562 10.7188L15.7812 13.8438ZM6.5 10.5C8.6875 10.5 10.5 8.71875 10.5 6.5C10.5 4.3125 8.6875 2.5 6.5 2.5C4.28125 2.5 2.5 4.3125 2.5 6.5C2.5 8.71875 4.28125 10.5 6.5 10.5Z"></path> </svg> </button> </form> </div> </li> <li class="main-nav_category"> <button class="main-nav_button main-nav_link" >Brand Strategy <span class="main-nav_indicator"><svg aria-label="Toggle menu" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></span></button> <section class="main-nav_dropdown visible"> <ul> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/brand-strategy/brand-essentials">Brand Essentials</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/brand-strategy/brand-platform">Brand Platform</a></li> </ul> </section> </li> <li class="main-nav_category"> <button class="main-nav_button main-nav_link" >Messaging <span class="main-nav_indicator"><svg aria-label="Toggle menu" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></span></button> <section class="main-nav_dropdown visible"> <ul> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/messaging/name-and-boilerplate">Name and Boilerplate</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/messaging/personality-voice-and-tone">Personality, Voice and Tone</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/messaging/key-audiences-messaging">Key Audiences and Messaging</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/messaging/pronunciation-guide">Pronunciation Guide</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/messaging/editorial-and-style-guide">Editorial and Style Guide</a></li> </ul> </section> </li> <li class="main-nav_category"> <button class="main-nav_button main-nav_link" >Visual Identity <span class="main-nav_indicator"><svg aria-label="Toggle menu" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></span></button> <section class="main-nav_dropdown visible"> <ul> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/visual-identity/logo">Logo</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/visual-identity/wordmarks">Wordmarks</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/visual-identity/color">Color</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/visual-identity/typography">Typography</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/visual-identity/graphic-elements-and-iconography">Graphic Elements and Iconography</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/visual-identity/photography">Photography</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/visual-identity/videography">Videography</a></li> </ul> </section> </li> <li class="main-nav_category"> <button class="main-nav_button main-nav_link" >Applying the Brand <span class="main-nav_indicator"><svg aria-label="Toggle menu" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></span></button> <section class="main-nav_dropdown visible"> <ul> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/applying-the-brand/alumni">Alumni Clubs</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/applying-the-brand/club-sports">Club Sports</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/applying-the-brand/registered-student-organizations">Registered Student Organizations (RSOs)</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/applying-the-brand/social-media">Social Media</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/applying-the-brand/name-tags">Name Tags</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/applying-the-brand/email-signature">Email Signatures</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/applying-the-brand/email-design-standards">Email Design Standards</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/applying-the-brand/trademarks-and-licensing">Trademarks and Licensing</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/applying-the-brand/stationery">Stationery</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/applying-the-brand/building-signage">Building Signage</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/applying-the-brand/vexilla-banners">Vexilla Banners</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/applying-the-brand/apparel-and-merchandise">Apparel and Merchandise</a></li> </ul> </section> </li> <li class="main-nav_category"> <button class="main-nav_button main-nav_link" >Web <span class="main-nav_indicator"><svg aria-label="Toggle menu" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></span></button> <section class="main-nav_dropdown visible"> <ul> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/web/web-design-and-navigation">Web Design and Navigation</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/web/illinois-web-theme">Illinois Web Theme</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/web/web-accessibility">Web Accessibility</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/web/website-domain">Web Domains</a></li> </ul> </section> </li> <li class="main-nav_category"> <button class="main-nav_button main-nav_link" >Resources <span class="main-nav_indicator"><svg aria-label="Toggle menu" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></span></button> <section class="main-nav_dropdown visible"> <ul> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/resources/brand-experts-program">Brand Experts Program</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/resources/brand-internship-program">Brand Internship Program</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/resources/brand-checklist">Brand Checklist</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/resources/campus-policies">Campus Policies</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/resources/vendors-and-purchasing">Vendors and Purchasing</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/resources/faq">FAQs</a></li> <li> <a class="main-nav_subitem" href="https://brand.illinois.edu/resources/support">Support</a></li> </ul> </section> </li> <li> <a class="main-nav_link" href="https://brand.illinois.edu/resources/downloads">Downloads</a> </li> </div> </nav> </header> <script> $(document).ready(function() { $('.main-nav_category').click(function() { // Remove 'active' class from all other items $('.main-nav_category').not(this).removeClass('active'); // Toggle 'active' class on the clicked item $(this).toggleClass('active'); }); // Expands mobile main navigation var menuButton = $(".menu-toggle"); $(menuButton).click(function(event) { event.stopPropagation(); var header = $(".page-header"); $(header).toggleClass("menu-visible"); }); }); </script> <main> <div class="ascend lines-fade"> <h1 class="lower-orange-bar ">Typography</h1> </div> <div class="page-content l-content"> <div class="wp-block-group l-column-80"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <p class="l-column-80 lede">The consistent use of brand fonts adds visual strength to designs while reinforcing our Illinois brand.</p> </div></div> <div class="h2-landmarks-dropdown"id="dropdown">  </div> <div class="wp-block-group l-column-80"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <p>Choosing the right typeface sets the tone for your design while reinforcing the brand identity. Do not deviate from these fonts for your university marketing and communications materials. To install these fonts, download them to your computer and follow the steps provided by <a href="https://support.apple.com/lv-lv/guide/font-book/fntbk1000/mac" data-type="link" data-id="https://support.apple.com/lv-lv/guide/font-book/fntbk1000/mac">Apple</a> and <a href="https://support.microsoft.com/en-us/windows/how-to-install-or-remove-a-font-in-windows-f12d0657-2fc8-7613-c76f-88d043b334b8" data-type="link" data-id="https://support.microsoft.com/en-us/windows/how-to-install-or-remove-a-font-in-windows-f12d0657-2fc8-7613-c76f-88d043b334b8">Microsoft</a>.</p> <h2 class="wp-block-heading">Primary Typefaces</h2> <p>Montserrat, Source Sans Pro and Georgia are our primary typefaces. They should make up the majority of your designs. All three of these fonts are free and often already installed on the programs you use.</p> <h3 class="wp-block-heading">Montserrat</h3> <figure class="wp-block-image size-full no-space-top"><img loading="lazy" decoding="async" width="4001" height="1626" src="https://brand.illinois.edu/wp-content/uploads/2024/02/Montserrat_example.png" alt="" class="wp-image-5223" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/Montserrat_example.png 4001w, https://brand.illinois.edu/wp-content/uploads/2024/02/Montserrat_example-300x122.png 300w, https://brand.illinois.edu/wp-content/uploads/2024/02/Montserrat_example-1024x416.png 1024w, https://brand.illinois.edu/wp-content/uploads/2024/02/Montserrat_example-768x312.png 768w, https://brand.illinois.edu/wp-content/uploads/2024/02/Montserrat_example-1536x624.png 1536w, https://brand.illinois.edu/wp-content/uploads/2024/02/Montserrat_example-2048x832.png 2048w" sizes="auto, (max-width: 4001px) 100vw, 4001px" /></figure> <p>Montserrat is our headline typeface. We recommend heavier weights, but pairing those with a lighter weight can also give your headlines visual interest.</p> <p>The typeface Montserrat was inspired by the signs and advertisements of the Montserrat neighborhood in Buenos Aires, Argentina. Montserrat has a geometric, modernist look and feel, with straight lines and circular forms. Given that its origins are in signage, Montserrat works very well as a headline and subhead.</p> <p class="bold-p">It should be used for:</p> <ul class="wp-block-list icon-checklist"> <li><strong>Headlines.</strong></li> <li><strong>Subheadings.</strong></li> <li><strong>Large, stand-out numbers.</strong></li> </ul> <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button orange-button"><a class="wp-block-button__link wp-element-button" href="https://uofi.box.com/s/3xhtvr2ukl34i6vnkep19mcm7wq55uhn">Get Montserrat</a></div> </div> <h3 class="wp-block-heading">Source Sans</h3> <figure class="wp-block-image size-full no-space-top"><img loading="lazy" decoding="async" width="4001" height="1617" src="https://brand.illinois.edu/wp-content/uploads/2024/02/Source_Sans_example.png" alt="" class="wp-image-5224" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/Source_Sans_example.png 4001w, https://brand.illinois.edu/wp-content/uploads/2024/02/Source_Sans_example-300x121.png 300w, https://brand.illinois.edu/wp-content/uploads/2024/02/Source_Sans_example-1024x414.png 1024w, https://brand.illinois.edu/wp-content/uploads/2024/02/Source_Sans_example-768x310.png 768w, https://brand.illinois.edu/wp-content/uploads/2024/02/Source_Sans_example-1536x621.png 1536w, https://brand.illinois.edu/wp-content/uploads/2024/02/Source_Sans_example-2048x828.png 2048w" sizes="auto, (max-width: 4001px) 100vw, 4001px" /></figure> <p>Source Sans is the workhorse of our brand typography. As Adobe’s first open source typeface family, this sans serif works well in many interfaces, making it the go-to option for the majority of your typography needs.</p> <p class="bold-p">It should be used for:</p> <ul class="wp-block-list icon-checklist"> <li><strong>Headlines (heavier weights).</strong></li> <li><strong>Body copy, captions, charts and graphs (other weights).</strong></li> </ul> <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button orange-button"><a class="wp-block-button__link wp-element-button" href="https://uofi.box.com/s/ppbdwv7gy42u5ybpmgjwua7fvdufwct0">Get Source Sans</a></div> </div> <h3 class="wp-block-heading">Georgia</h3> <figure class="wp-block-image size-full no-space-top"><img loading="lazy" decoding="async" width="4001" height="1657" src="https://brand.illinois.edu/wp-content/uploads/2024/02/Georgia_example.png" alt="" class="wp-image-5225" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/Georgia_example.png 4001w, https://brand.illinois.edu/wp-content/uploads/2024/02/Georgia_example-300x124.png 300w, https://brand.illinois.edu/wp-content/uploads/2024/02/Georgia_example-1024x424.png 1024w, https://brand.illinois.edu/wp-content/uploads/2024/02/Georgia_example-768x318.png 768w, https://brand.illinois.edu/wp-content/uploads/2024/02/Georgia_example-1536x636.png 1536w, https://brand.illinois.edu/wp-content/uploads/2024/02/Georgia_example-2048x848.png 2048w" sizes="auto, (max-width: 4001px) 100vw, 4001px" /></figure> <p>To set a more distinguished tone in your designs, consider incorporating Georgia, our serif typeface. While drawing influence from many older serif typefaces, Georgia was designed with clarity on digital screens in mind. With its wide range of weights and styles and great legibility, Georgia is best used for large blocks of text and subheadings. In comparison to Source Sans, Georgia can help imply a more elegant feel.</p> <p class="bold-p">It should be used for:</p> <ul class="wp-block-list icon-checklist"> <li><strong>Large blocks of copy in print.</strong></li> <li><strong>Subheading.</strong></li> <li><strong>Quotes on the web.</strong></li> <li><strong>Legibility.</strong></li> </ul> <p class="bold-p">It should not be used for:</p> <ul class="wp-block-list icon-checklist icon-checklist--donts"> <li>Large blocks of copy in digital.</li> </ul> <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button orange-button"><a class="wp-block-button__link wp-element-button" href="https://uofi.box.com/s/wi9jhj7i895mbjz22fobq0auvdm0i6zl">Get Georgia</a></div> </div> </div></div> <div class="wp-block-group l-column-80"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <h2 class="wp-block-heading">Special-use Typefaces</h2> <p>Occasionally, you made find a need for special-use typefaces that offer a more condensed or more playful option. For these cases, use Open Sans Condensed or Superfly.</p> <h3 class="wp-block-heading">Open Sans Condensed</h3> <figure class="wp-block-image size-full no-space-top"><img loading="lazy" decoding="async" width="4001" height="1681" src="https://brand.illinois.edu/wp-content/uploads/2024/02/Open_Sans_Condensed_example.png" alt="" class="wp-image-5226" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/Open_Sans_Condensed_example.png 4001w, https://brand.illinois.edu/wp-content/uploads/2024/02/Open_Sans_Condensed_example-300x126.png 300w, https://brand.illinois.edu/wp-content/uploads/2024/02/Open_Sans_Condensed_example-1024x430.png 1024w, https://brand.illinois.edu/wp-content/uploads/2024/02/Open_Sans_Condensed_example-768x323.png 768w, https://brand.illinois.edu/wp-content/uploads/2024/02/Open_Sans_Condensed_example-1536x645.png 1536w, https://brand.illinois.edu/wp-content/uploads/2024/02/Open_Sans_Condensed_example-2048x860.png 2048w" sizes="auto, (max-width: 4001px) 100vw, 4001px" /></figure> <p>Open Sans Condensed provides a narrower option when there isn’t enough space to use our primary typefaces. While Open Sans provides other weights, only use condensed. This font should be used very sparingly and only when necessary.</p> <p class="bold-p">It should be used for:</p> <ul class="wp-block-list icon-checklist"> <li><strong>In rare instances, with headlines and areas where space is tight  (long headlines, name badges, etc.).</strong></li> </ul> <p class="bold-p">It should not be used for:</p> <ul class="wp-block-list icon-checklist icon-checklist--donts"> <li>Large sections of body copy.</li> <li>A replacement for our primary fonts if space allows.</li> </ul> <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button orange-button"><a class="wp-block-button__link wp-element-button" href="https://uofi.box.com/s/rhjqgvempt5b94jadnstontw27kft5rf">Get Open Sans Condensed</a></div> </div> <h3 class="wp-block-heading">Superfly</h3> <figure class="wp-block-image size-full no-space-top"><img loading="lazy" decoding="async" width="4001" height="1776" src="https://brand.illinois.edu/wp-content/uploads/2024/02/Superfly_example.png" alt="" class="wp-image-5227" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/Superfly_example.png 4001w, https://brand.illinois.edu/wp-content/uploads/2024/02/Superfly_example-300x133.png 300w, https://brand.illinois.edu/wp-content/uploads/2024/02/Superfly_example-1024x455.png 1024w, https://brand.illinois.edu/wp-content/uploads/2024/02/Superfly_example-768x341.png 768w, https://brand.illinois.edu/wp-content/uploads/2024/02/Superfly_example-1536x682.png 1536w, https://brand.illinois.edu/wp-content/uploads/2024/02/Superfly_example-2048x909.png 2048w" sizes="auto, (max-width: 4001px) 100vw, 4001px" /></figure> <p>Sometimes it is helpful to add a more expressive font. Superfly adds a friendly element, but use it sparingly to achieve maximum impact. This is a paid font.</p> <p class="bold-p">It should be used for:</p> <ul class="wp-block-list icon-checklist"> <li><strong>Emphasis on one or two important words in a headline.</strong></li> <li><strong>A graphic element.</strong></li> <li><strong>A way to convey playfulness.</strong></li> </ul> <p class="bold-p">It should not be used for:</p> <ul class="wp-block-list icon-checklist icon-checklist--donts"> <li>All caps.</li> <li>Multiple words.</li> </ul> <div class="wp-block-buttons orange-button is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button orange-button"><a class="wp-block-button__link wp-element-button" href="https://creativemarket.com/SamParrett/1494945-SuperFly-Brush-Font" target="_blank" rel="noreferrer noopener">Purchase Superfly</a></div> </div> <h2 class="wp-block-heading">Atkinson Hyperlegible</h2> <figure class="wp-block-image size-full no-space-top"><img loading="lazy" decoding="async" width="4001" height="1617" src="https://brand.illinois.edu/wp-content/uploads/2024/02/Atkinson_Hyperlegible_example.png" alt="" class="wp-image-5228" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/Atkinson_Hyperlegible_example.png 4001w, https://brand.illinois.edu/wp-content/uploads/2024/02/Atkinson_Hyperlegible_example-300x121.png 300w, https://brand.illinois.edu/wp-content/uploads/2024/02/Atkinson_Hyperlegible_example-1024x414.png 1024w, https://brand.illinois.edu/wp-content/uploads/2024/02/Atkinson_Hyperlegible_example-768x310.png 768w, https://brand.illinois.edu/wp-content/uploads/2024/02/Atkinson_Hyperlegible_example-1536x621.png 1536w, https://brand.illinois.edu/wp-content/uploads/2024/02/Atkinson_Hyperlegible_example-2048x828.png 2048w" sizes="auto, (max-width: 4001px) 100vw, 4001px" /></figure> <p>Atkinson Hyperlegible is the Braille Institute’s recommended typeface for the visually impaired.</p> <p>Use this typeface when creating materials specifically for audiences with visual impairments.</p> <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button orange-button"><a class="wp-block-button__link wp-element-button" href="https://uofi.box.com/s/cysc1xjdbct0fbubqfhqvjykncrvvh73">Get Atkinson Hyperlegible</a></div> </div> </div></div> <div class="wp-block-group l-column-80"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <h2 class="wp-block-heading">Type Pairings</h2> <p>Need help with type pairings? Here are some examples to get you started.</p> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="364" height="206" src="https://brand.illinois.edu/wp-content/uploads/2024/02/type_pairing_example_1.png" alt="" class="wp-image-5230" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/type_pairing_example_1.png 364w, https://brand.illinois.edu/wp-content/uploads/2024/02/type_pairing_example_1-300x170.png 300w" sizes="auto, (max-width: 364px) 100vw, 364px" /></figure> <figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="365" height="207" src="https://brand.illinois.edu/wp-content/uploads/2024/02/type_pairing_example_3.png" alt="" class="wp-image-5232" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/type_pairing_example_3.png 365w, https://brand.illinois.edu/wp-content/uploads/2024/02/type_pairing_example_3-300x170.png 300w" sizes="auto, (max-width: 365px) 100vw, 365px" /></figure> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="364" height="206" src="https://brand.illinois.edu/wp-content/uploads/2024/02/type_pairing_example_2.png" alt="" class="wp-image-5231" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/type_pairing_example_2.png 364w, https://brand.illinois.edu/wp-content/uploads/2024/02/type_pairing_example_2-300x170.png 300w" sizes="auto, (max-width: 364px) 100vw, 364px" /></figure> <figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="365" height="207" src="https://brand.illinois.edu/wp-content/uploads/2024/02/type_pairing_example_4.png" alt="" class="wp-image-5233" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/type_pairing_example_4.png 365w, https://brand.illinois.edu/wp-content/uploads/2024/02/type_pairing_example_4-300x170.png 300w" sizes="auto, (max-width: 365px) 100vw, 365px" /></figure> </div> </div> </div></div> <div class="wp-block-group l-column-80"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <h2 class="wp-block-heading">Using Fonts</h2> <p>You do not need to use all fonts in a design and you should aim to use fonts that bring clarity to your design. Individual units may have more restrictive font selections than the university, but not additional fonts. However, if you have used vendors to develop typeface packages for your units as the brand guidelines were being developed, you may use them as you transition to the brand guidelines. Check with your college or governing unit for specialized guidance.</p> <p>The Division of Intercollegiate Athletics uses a custom typeface and numeral set.<br>All of these assets are reserved for athletics use only.</p> <h3 class="wp-block-heading">Font uses</h3> <p>If you’re not sure what would work best for your designs, use our guidance on how to apply the brand fonts.</p> <figure class="wp-block-table orangeTable"><table class="has-fixed-layout"><thead><tr><th class="has-text-align-left" data-align="left">Brand Font</th><th class="has-text-align-left" data-align="left">Uses</th></tr></thead><tbody><tr><td class="has-text-align-left" data-align="left">Montserrat</td><td class="has-text-align-left" data-align="left"><span data-metadata="“></span><span style="white-space:pre-wrap;">Headings, Subheadings, Large stand-out numbers</span><span style="white-space:pre-wrap;"></span><span style="white-space:pre-wrap;"></span><span style="white-space:pre-wrap;"></span><span style="white-space:pre-wrap;"></span></td></tr><tr><td class="has-text-align-left" data-align="left">Source Sans</td><td class="has-text-align-left" data-align="left">Headlines (heavier weights), Body copy, Captions, Charts and graphs</td></tr><tr><td class="has-text-align-left" data-align="left">Georgia</td><td class="has-text-align-left" data-align="left">Large blocks of copy in print, Subheading, Quotes on the web</td></tr><tr><td class="has-text-align-left" data-align="left"><span style="white-space:pre-wrap;">Open Sans Condensed</span></td><td class="has-text-align-left" data-align="left">Name tags, Areas with tight space, Long headlines</td></tr><tr><td class="has-text-align-left" data-align="left">Superfly</td><td class="has-text-align-left" data-align="left">Headlines (used sparingly), One or two words used for emphasis</td></tr></tbody></table></figure> <h3 class="wp-block-heading">Substitute fonts</h3> <p>We understand that you may not be able use the Illinois brand fonts everywhere. Sometimes Word documents, PowerPoint presentations and various digital applications require something different. For those instances, we’ve defined which fonts you can use in place of the brand fonts.</p> <figure class="wp-block-table orangeTable"><table><thead><tr><th class="has-text-align-left" data-align="left">Brand Font</th><th class="has-text-align-left" data-align="left">Substitute</th></tr></thead><tbody><tr><td class="has-text-align-left" data-align="left">Montserrat</td><td class="has-text-align-left" data-align="left"><span style="white-space:pre-wrap;">Arial Black</span></td></tr><tr><td class="has-text-align-left" data-align="left">Source Sans</td><td class="has-text-align-left" data-align="left">Arial</td></tr><tr><td class="has-text-align-left" data-align="left">Georgia</td><td class="has-text-align-left" data-align="left">Georgia</td></tr><tr><td class="has-text-align-left" data-align="left"><span style="white-space:pre-wrap;">Open Sans Condensed</span></td><td class="has-text-align-left" data-align="left"><span style="white-space:pre-wrap;">Arial Narrow</span></td></tr><tr><td class="has-text-align-left" data-align="left">Superfly</td><td class="has-text-align-left" data-align="left">No Available Substitute </td></tr></tbody></table></figure> <h3 class="wp-block-heading">Leading, tracking and kerning</h3> <p>Using type thoughtfully is crucial to making our designs look professional. Follow these tips to make sure our typography is consistent.</p> <h4 class="wp-block-heading">Leading</h4> <figure class="wp-block-image size-full chancellor--sign"><img loading="lazy" decoding="async" width="596" height="311" src="https://brand.illinois.edu/wp-content/uploads/2024/02/leading_example.png" alt="" class="wp-image-5234" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/leading_example.png 596w, https://brand.illinois.edu/wp-content/uploads/2024/02/leading_example-300x157.png 300w" sizes="auto, (max-width: 596px) 100vw, 596px" /></figure> <p>Leading refers to the vertical space between lines of text. It is named after the strips of lead historically used to separate lines of metal type in printing presses. Leading impacts the readability and overall aesthetics of a text by ensuring that lines are properly spaced, making it easier for readers to follow content.</p> <p>Proper leading helps prevent text from appearing too cramped or too loose, and allows readers to navigate the text comfortably. With our typefaces, text generally looks best with the leading set slightly looser than the default.</p> <h4 class="wp-block-heading">Tracking</h4> <figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="754" height="198" src="https://brand.illinois.edu/wp-content/uploads/2024/02/tracking_example.png" alt="" class="wp-image-5235" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/tracking_example.png 754w, https://brand.illinois.edu/wp-content/uploads/2024/02/tracking_example-300x79.png 300w" sizes="auto, (max-width: 754px) 100vw, 754px" /></figure> <p>Tracking, also known as letter-spacing or character spacing, involves adjusting the overall spacing between all characters in a block of text or a selected range of text. It affects the spacing uniformly for all characters in the text, unlike kerning, which targets specific character pairs.</p> <p>Tracking is used to adjust the overall density of text. You can increase tracking to create more open and airy text for display purposes or decrease tracking to enhance readability in longer passages of text.</p> <h4 class="wp-block-heading">Kerning</h4> <figure class="wp-block-image size-full chancellor--sign"><img loading="lazy" decoding="async" width="578" height="230" src="https://brand.illinois.edu/wp-content/uploads/2024/02/kerning_example.png" alt="" class="wp-image-5236" srcset="https://brand.illinois.edu/wp-content/uploads/2024/02/kerning_example.png 578w, https://brand.illinois.edu/wp-content/uploads/2024/02/kerning_example-300x119.png 300w" sizes="auto, (max-width: 578px) 100vw, 578px" /></figure> <p>Kerning is the adjustment of the space between individual pairs of letterforms. It’s used to fine-tune the spacing between specific characters to ensure that they visually align. Kerning is typically applied to address specific instances where characters might overlap or have awkward gaps.</p> <p>Kerning is most often used for characters that have irregular shapes or combinations that don’t naturally fit together, such as “AV,” “To,” or “Te.” By manually adjusting the kerning, you can achieve a more visually balanced appearance for these character pairs.</p> <h3 class="wp-block-heading" id="web-fonts">Web fonts</h3> <p>The University of Illinois default web fonts — Montserrat, Source Sans Pro and Georgia — provide consistent type styles across print and digital mediums.<br><br>Use Source Sans as the primary font in electronic communications whenever possible.<br>The font files may be hosted only on websites with <a href="https://brand.illinois.edu/web/website-domain" data-type="page" data-id="3075">*.illinois.edu domains</a>.</p> <h3 class="wp-block-heading">Hosted brand assets for web</h3> <p>Our font files have been added to the collection of hosted brand assets, also known as a content delivery network (CDN), so you can implement them to your website with simplified variable names. <a href="https://cdn.brand.illinois.edu/#fonts">Find the documentation on all the hosted brand assets</a>.</p> </div></div> <div class="pagination"><div class="il-button"><a href="https://brand.illinois.edu/visual-identity/color" title="Color">Previous: Color </a></div><div class="il-button"><a href="https://brand.illinois.edu/visual-identity/graphic-elements-and-iconography" title="Graphic Elements and Iconography">Next: Graphic Elements and Iconography</a></div></div> </div> </main> <footer class="page-footer"> <div class="site-footer"> <div class="section-inner"> <div class="site-footer__left"> <h2 class="site-title"><a href="https://brand.illinois.edu">Brand Guidelines</a></h2> <div class="il-footer-contact"> <address> <p>507 E. Green Street </p> <p>MC-426</p> <p>Champaign, IL 61820</p> <p>Phone: <a href="tel:+12173335010">217-333-5010</a></p> <p>Email: <a href="mailto:branding@illinois.edu">branding@illinois.edu</a></p> </address> </div> <div class="il-footer-parent"><a href="https://stratcom.illinois.edu/">Strategic Communications and Marketing</a></div> </div> <div class="site-footer__right"> <div class="il-footer-navigation"> <nav class="il-links" aria-label="Quick Access"> <h2>Quick access to:</h2> <ul> <li><a href="https://brand.illinois.edu/resources/brand-experts-program">Brand Experts Program</a></li> <li><a href="https://brand.illinois.edu/resources/brand-checklist">Brand Checklist</a></li> <li><a href="https://brand.illinois.edu/resources/downloads">Downloads</a></li> <li><a href="https://cdn.brand.illinois.edu/">Hosted Brand Assets</a></li> </ul> </nav> </div> </div> </div> </div> <div class="campus-footer"> <div class="section-inner"> <div class="campus-wordmark"> <a href="https://illinois.edu"> <svg version="1.1" id="Layer_1" aria-label="Illinois vertical logo" role="img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1365.9 234.4" style="enable-background:new 0 0 1365.9 234.4;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#FF5F05;} </style> <g> <g> <g> <rect x="288.3" y="31.7" class="st0" width="37.6" height="170.9"/> <polygon class="st0" points="408.2,31.7 370.6,31.7 370.6,202.6 493.4,202.6 493.4,168.5 408.2,168.5"/> <polygon class="st0" points="558.5,31.7 520.9,31.7 520.9,202.6 643.8,202.6 643.8,168.5 558.5,168.5"/> <rect x="672.2" y="31.7" class="st0" width="37.6" height="170.9"/> <polygon class="st0" points="869.2,137 789.1,31.7 754.4,31.7 754.4,202.6 791.6,202.6 791.6,94 874.4,202.6 906.3,202.6 906.3,31.7 869.2,31.7"/> <path class="st0" d="M1033,28.8c-52.7,0-91.1,39.8-91.1,88.4v0.5c0,48.6,37.9,87.9,90.6,87.9c52.7,0,91.1-39.8,91.1-88.4v-0.5 C1123.6,68.1,1085.8,28.8,1033,28.8z M1084.3,117.7c0,29.3-21,53.2-51.3,53.2c-30.3,0-51.8-24.4-51.8-53.7v-0.5 c0-29.3,21-53.2,51.3-53.2c30.3,0,51.8,24.4,51.8,53.7L1084.3,117.7L1084.3,117.7z"/> <rect x="1160" y="31.7" class="st0" width="37.6" height="170.9"/> <path class="st0" d="M1311,100.3c-29.5-7.6-36.9-11.2-36.9-22.5v-0.5c0-8.3,7.6-14.9,22-14.9c14.4,0,29.3,6.3,44.4,16.8L1360,51 c-17.3-13.9-38.6-21.7-63.5-21.7c-34.9,0-59.8,20.5-59.8,51.5v0.5c0,33.9,22.2,43.5,56.7,52.3c28.6,7.3,34.4,12.2,34.4,21.7v0.5 c0,10-9.3,16.1-24.7,16.1c-19.5,0-35.7-8.1-51-20.8l-22.2,26.6c20.5,18.3,46.6,27.4,72.5,27.4c36.9,0,62.8-19,62.8-53v-0.5 C1365.2,121.8,1345.6,109.4,1311,100.3L1311,100.3z"/> </g> <path class="st0" d="M126.3,171.2v-108h36v-63H0.3v63h36v108h-36v63h162v-63L126.3,171.2L126.3,171.2z M153.3,225.2H9.3v-45h27 c5,0,9-4,9-9v-108c0-5-4-9-9-9h-27v-45h144v45h-27c-5,0-9,4-9,9v108c0,5,4,9,9,9h27L153.3,225.2L153.3,225.2z"/> </g> <path class="st1" d="M126.3,54.1h27v-45H9.3v45h27c5,0,9,4,9,9v108c0,5-4,9-9,9h-27v45h144v-45h-27c-5,0-9-4-9-9v-108 C117.3,58.2,121.3,54.1,126.3,54.1"/> </g> </svg> </a> </div> <div class="links"> <nav aria-label="Illinois Campus Links"> <ul id="campus-footer-links"></ul> <script> fetch("https://cdn.brand.illinois.edu/footer-links.json") .then(function(response) { return response.json(); }) .then(function(data) { data.sort((a, b) => a.label.localeCompare(b.label)); appendData(data); }) .catch(function(err) { console.log('error: ' + err); }); function appendData(data) { const ul = document.getElementById("campus-footer-links"); for (var i = 0; i < data.length; i++) { const li = document.createElement("li"); const a = document.createElement("a"); a.innerHTML = data[i].label; a.setAttribute('href', data[i].href); ul.appendChild(li); li.appendChild(a); } } </script> </nav> </div> </div> </div> <div class="legal-footer links-section"> <div class="section-inner"> <nav class="il-footer-links" aria-label="Legal notices"> <ul> <li><button id="ot-sdk-btn" class="ot-sdk-show-settings">About Cookies</button></li> <li><a href="https://www.vpaa.uillinois.edu/resources/web_privacy">Privacy Policy</a></li> <li><a href="https://illinois.edu/resources/website/copyright.html">Copyright © <span id="copyright-year"></span></a></li> <li><a href="https://illinois.edu/resources/website/accessibility.html">Accessibility</a></li> </ul> </nav> </div> </div> </footer> <script> document.getElementById("copyright-year").innerHTML = new Date().getFullYear(); </script> <il-back-to-top></il-back-to-top> <style id='core-block-supports-inline-css' type='text/css'> .wp-container-core-columns-is-layout-1{flex-wrap:nowrap;} </style> <div id="fa-icons">  <svg id="fa-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"/></svg> <svg id="fa-triangle-exclamation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg> <svg id="fa-xmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </div>  <script type='text/javascript'> (function(){var g=function(e,h,f,g){ this.get=function(a){for(var a=a+"=",c=document.cookie.split(";"),b=0,e=c.length;b<e;b++){for(var d=c[b];" "==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(a))return d.substring(a.length,d.length)}return null}; this.set=function(a,c){var b="",b=new Date;b.setTime(b.getTime()+6048E5);b="; expires="+b.toGMTString();document.cookie=a+"="+c+b+"; path=/; "}; this.check=function(){var a=this.get(f);if(a)a=a.split(":");else if(100!=e)"v"==h&&(e=Math.random()>=e/100?0:100),a=[h,e,0],this.set(f,a.join(":"));else return!0;var c=a[1];if(100==c)return!0;switch(a[0]){case "v":return!1;case "r":return c=a[2]%Math.floor(100/c),a[2]++,this.set(f,a.join(":")),!c}return!0}; this.go=function(){if(this.check()){var a=document.createElement("script");a.type="text/javascript";a.src=g;document.body&&document.body.appendChild(a)}}; this.start=function(){var t=this;"complete"!==document.readyState?window.addEventListener?window.addEventListener("load",function(){t.go()},!1):window.attachEvent&&window.attachEvent("onload",function(){t.go()}):t.go()};}; try{(new g(100,"r","QSI_S_ZN_erFgPdUu30f8nFX","https://znerfgpduu30f8nfx-uiucmarketing.siteintercept.qualtrics.com/SIE/?Q_ZID=ZN_erFgPdUu30f8nFX")).start()}catch(i){}})(); </script><div id='ZN_erFgPdUu30f8nFX'></div>   <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-45XKK8YP6W'); </script> </div> </body> </html>

CINXE.COM

Visual Identity | Brand Guidelines | Illinois