Fonts and typography - Red Hat brand standards

<!DOCTYPE html> <html lang="en" dir="ltr" prefix="og: https://ogp.me/ns#"> <head> <script>performance.mark('HEAD Start');</script> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Fonts and typography - Red Hat brand standards</title> <link rel="preconnect" href="https://static.redhat.com"> <link rel="preconnect" href="https://consent.trustarc.com"> <script id="rhdc_js_errors_js">window.sentryOnLoad=function(){Sentry.init({dsn:"https://676ea2c2d4a147c2834066d24c04a9e4@o490301.ingest.sentry.io/5370002",ignoreErrors:[],integrations:[Sentry.browserTracingIntegration()],environment:'prod',tracesSampleRate:0.75,sampleRate:0.75});};</script> <script id="rhdc_analytics_get_top_eddl_pagedata">var pageData = {"pageCategory":"about","pageName":"rh|about|brand|standards|typography","pageTitle":"Fonts and typography - Red Hat brand standards","pageType":"page","pageSubType":"","siteExperience":"","siteLanguage":"en","subsection":"brand","subsection2":"standards","subsection3":"typography","cms":"RH CMS 1.0","analyticsTitle":"","contentID":"440461","contentType":"","destinationURL":"https:\/\/www.redhat.com\/en\/about\/brand\/standards\/typography","gated":"false","offerID":"","errorType":"","contentPublishDate":"2020-05-21","siteName":"rh","dataObject":"appEventData","pageStatus":"published"};</script> <script id="rhdc_analytics_get_top_eddl_js">!function(e,a){"use strict";e.appEventData=e.appEventData||[],e.pageData=e.pageData||[];var t={event:"Page Load Started",page:pageData};if(a.referrer){var r=a.createElement("a");r.href=a.referrer,t.page.previousPage=r.href}t.page.siteExperience=e.innerWidth<=768?"tablet":"desktop",appEventData.push(t)}(window,document);</script> <script id="dpal" src="https://www.redhat.com/dtm.js" async></script> <script id="trustarc" src="https://static.redhat.com/libs/redhat/marketing/latest/trustarc/trustarc.js" async></script> <script src="https://static.redhat.com/libs/redhat/marketing/latest/trustarc/trustecm/js/trustecm.js" data-domain="www.redhat.com" async></script> <script class="trustecm" data-src="https://static.redhat.com/libs/redhat/marketing/latest/trustarc/trustecm/js/trustecm-functional.js" data-tracker-type="functional"></script> <script class="trustecm" data-src="https://static.redhat.com/libs/redhat/marketing/latest/trustarc/trustecm/js/trustecm-advertising.js" data-tracker-type="advertising"></script> <script type="importmap">{"imports":{"@rhds/elements/":"/modules/contrib/red_hat_shared_libs/dist/rhds-elements/modules/"},"scopes":{}}</script> <script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","pathPrefix":"en\/","currentPath":"node\/440461","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","suppressDeprecationErrors":true,"ajaxPageState":{"libraries":"eJyNk0Fy2zAMRS9kWYdIl53uuuaAJCyhoQgNADnV7QuZqq04k0k2GvD9LwIEQaxGtgacIuY-wWzE9VRg5cVCJk18RVl7rpi4nARzGMHCpeBfigVDM_a7f8OfenSJM5ih1KAzJKrD3aojbGGhqL2MXYUrDbAV0qmnrRlk_cxr8NjGIOpTRRs6yRgiKIaF-qFwhPIyCk945PMFXwyeyC-4_qRhtB88HRVP59l-K8qRLpW8UwrF_9o4U05hggoDSp8EwbCxVAiruSWnfvt0GWfB5Ho-wAuz3RK8B909zUFqh_oAOk1Cs-lBULSuQB26xPxKeFOC11hWo6T9-2XAnEuIbHY7_5dOFGH5jlHJe6EIksZnu8mi5sLZr129Tee9g2eYqXn_aEu0b31fNnXCujRh319XNZz67ZZObxhl9LD6uCBkb28jCSQHT2hA9QF9HO5RmJZitN01pZ0O6N7HSniZ95gmr7g9qJ34LB2Geoc-vJASL9W6LDxnfvuvbM8D5R9ZfGby","theme":"rhdc","theme_token":null},"ajaxTrustedUrl":[],"rh_oidc_manager":{"debug":false,"cookie_settings":{"rh_sso_session_enabled":true},"oidc_settings":{"authority":"https:\/\/sso.redhat.com\/auth\/realms\/redhat-external","client_id":"rhcom","loadUserInfo":true,"post_logout_redirect_uri":"https:\/\/www.redhat.com\/en","redirect_uri":"https:\/\/www.redhat.com\/en","scope":"openid profile_level.rh_events id.email id.idp id.job.title id.job.department id.name id.organization id.sub id.username roles api.graphql","silent_redirect_uri":"https:\/\/www.redhat.com\/en\/silent-renew.html"}},"rhdc_analytics":{"searchTerm":null},"rhdc_bulk_tagging":{"should_skip_product_primary_product_requirement":true,"field_taxonomy_product":{"add":"If there is currently no \u003Cb\u003EPrimary Product\u003C\/b\u003E value before this operation,\n a \u003Cb\u003EProduct\u003C\/b\u003E value will be chosen as the \u003Cb\u003EPrimary Product\u003C\/b\u003E.","remove":"\u003Cul\u003E\n \u003Cli\u003EIf removing all existing \u003Cb\u003EProduct\u003C\/b\u003E value(s), the \u003Cb\u003EPrimary Product\u003C\/b\u003E will also be removed.\u003C\/li\u003E\n \u003Cli\u003EIf not, please choose a new valid \u003Cb\u003EPrimary Product\u003C\/b\u003E in a previous operation\n before removing the \u003Cb\u003EProduct\u003C\/b\u003E.\u003C\/li\u003E\n \u003C\/ul\u003E","replace":"If the \u003Cb\u003EProduct\u003C\/b\u003E that is being replaced is the \u003Cb\u003EPrimary Product\u003C\/b\u003E,\n please change the \u003Cb\u003EPrimary Product\u003C\/b\u003E in a previous operation."},"field_taxonomy_product_primary":{"add":"The \u003Cb\u003EPrimary Product\u003C\/b\u003E that is being added must be a value of an existing \u003Cb\u003EProduct\u003C\/b\u003E value.\n If the \u003Cb\u003EPrimary Product\u003C\/b\u003E value to add is not, please add that \u003Cb\u003EProduct\u003C\/b\u003E in a previous operation.","remove":"You cannot remove the \u003Cb\u003EPrimary Product\u003C\/b\u003E. This operation will be skipped.","replace":"If the new \u003Cb\u003EPrimary Product\u003C\/b\u003E value is not an existing \u003Cb\u003EProduct\u003C\/b\u003E value,\n please add that \u003Cb\u003EProduct\u003C\/b\u003E in a previous operation."}},"rhdcCore":{"webrh":{"version":"1.209.0"}},"rhdc_style":{"flag_myrh_popover":1},"rhdc_solr_listing":{"testmode":false},"csp":{"nonce":"s60NsHmVOAAanpsdkT3Bcw"},"user":{"uid":0,"permissionsHash":"925c93e5e058a38840206e2faeb20be77d5863a368189af16a0faa928225c714"}}</script> <script src="/rhdc/system-files/js/js_o8NShEaoNof4B_K0ELLqBNLU3LEWsLuVeGykOiply_Y.js?scope=header&delta=0&language=en&theme=rhdc&include=eJyNUkGS3DAI_JA9fsTmmMotZxWSGJuNLFyAZ-PfB481s95NbSUnIVo0amiZcgpQoWxGSQf5cA2YcwmRzXjuZApMjs4OjyhDEgTDI5cKYbVO_k2m5DWKIGn6n-cowtLppobzEEFx_8Z-hpWGsXCE8jIJz9i9YZRpWK7YV7jRCEZc7x3uvP3x9q9Er0loMT0BitYXqGOfmH8RnpArs6H0a6Ubin5gO6DPikxWNZd6SVzVB3Rps7vAQu3DyeA9CvNajHZ9lFp2FF6XFtPsxQHniPlRA5KDkxtQ9fatBD12AsEcJrBwLfibYsFQYOPVhuO4p798o2tcwFxSDbpAojo28v327BShejlC3qU3JoOonzrtqa7FmTSxj28buGLi0vlYyLZDletZjr01Mp1gDwvF3R6nzfqWXHYG2b56azCe9pNxEUzu13w2kLvlB9y-0zjZt8PhD-S5Y8ebWOeElHit1mfhJfNbPVd4b__FT324YMa6HpZ-uv3c98X3fkdf9TB58__z-gci-Wby"></script> <script src="/modules/contrib/rh_oidc_manager/libraries/dist/js/index.min.js?snbk8m" type="module"></script> <script src="https://static.redhat.com/libs/@redhat/marketing/latest/rh.mktg.js" async></script> <link rel="stylesheet" media="all" href="/rhdc/system-files/css/css_mUI15nW1sSDXcFPgyiobifSM8ZkYRcOH09aj4R-NZ-Q.css?delta=0&language=en&theme=rhdc&include=eJyNUkGS3DAI_JA9fsTmmMotZxWSGJuNLFyAZ-PfB481s95NbSUnIVo0amiZcgpQoWxGSQf5cA2YcwmRzXjuZApMjs4OjyhDEgTDI5cKYbVO_k2m5DWKIGn6n-cowtLppobzEEFx_8Z-hpWGsXCE8jIJz9i9YZRpWK7YV7jRCEZc7x3uvP3x9q9Er0loMT0BitYXqGOfmH8RnpArs6H0a6Ubin5gO6DPikxWNZd6SVzVB3Rps7vAQu3DyeA9CvNajHZ9lFp2FF6XFtPsxQHniPlRA5KDkxtQ9fatBD12AsEcJrBwLfibYsFQYOPVhuO4p798o2tcwFxSDbpAojo28v327BShejlC3qU3JoOonzrtqa7FmTSxj28buGLi0vlYyLZDletZjr01Mp1gDwvF3R6nzfqWXHYG2b56azCe9pNxEUzu13w2kLvlB9y-0zjZt8PhD-S5Y8ebWOeElHit1mfhJfNbPVd4b__FT324YMa6HpZ-uv3c98X3fkdf9TB58__z-gci-Wby" /> <link rel="stylesheet" media="print" href="https://static.redhat.com/libs/redhat/marketing/latest/trustarc/trustecm/css/trustecm.css" data-onload-media="all" onload="this.onload=null;this.media=this.dataset.onloadMedia" /> <link rel="stylesheet" media="all" href="/rhdc/system-files/css/css_pm3eN3NI48UUHPtyTIyq5XJm9zHjarJe8qXSN99hZeg.css?delta=2&language=en&theme=rhdc&include=eJyNUkGS3DAI_JA9fsTmmMotZxWSGJuNLFyAZ-PfB481s95NbSUnIVo0amiZcgpQoWxGSQf5cA2YcwmRzXjuZApMjs4OjyhDEgTDI5cKYbVO_k2m5DWKIGn6n-cowtLppobzEEFx_8Z-hpWGsXCE8jIJz9i9YZRpWK7YV7jRCEZc7x3uvP3x9q9Er0loMT0BitYXqGOfmH8RnpArs6H0a6Ubin5gO6DPikxWNZd6SVzVB3Rps7vAQu3DyeA9CvNajHZ9lFp2FF6XFtPsxQHniPlRA5KDkxtQ9fatBD12AsEcJrBwLfibYsFQYOPVhuO4p798o2tcwFxSDbpAojo28v327BShejlC3qU3JoOonzrtqa7FmTSxj28buGLi0vlYyLZDletZjr01Mp1gDwvF3R6nzfqWXHYG2b56azCe9pNxEUzu13w2kLvlB9y-0zjZt8PhD-S5Y8ebWOeElHit1mfhJfNbPVd4b__FT324YMa6HpZ-uv3c98X3fkdf9TB58__z-gci-Wby" /> <link rel="stylesheet" media="all" href="/rhdc/system-files/css/css_q4r0sDAsbwNwpp-QHJP1XYXybtvONbE_kmNdFcQ_1RE.css?delta=3&language=en&theme=rhdc&include=eJyNUkGS3DAI_JA9fsTmmMotZxWSGJuNLFyAZ-PfB481s95NbSUnIVo0amiZcgpQoWxGSQf5cA2YcwmRzXjuZApMjs4OjyhDEgTDI5cKYbVO_k2m5DWKIGn6n-cowtLppobzEEFx_8Z-hpWGsXCE8jIJz9i9YZRpWK7YV7jRCEZc7x3uvP3x9q9Er0loMT0BitYXqGOfmH8RnpArs6H0a6Ubin5gO6DPikxWNZd6SVzVB3Rps7vAQu3DyeA9CvNajHZ9lFp2FF6XFtPsxQHniPlRA5KDkxtQ9fatBD12AsEcJrBwLfibYsFQYOPVhuO4p798o2tcwFxSDbpAojo28v327BShejlC3qU3JoOonzrtqa7FmTSxj28buGLi0vlYyLZDletZjr01Mp1gDwvF3R6nzfqWXHYG2b56azCe9pNxEUzu13w2kLvlB9y-0zjZt8PhD-S5Y8ebWOeElHit1mfhJfNbPVd4b__FT324YMa6HpZ-uv3c98X3fkdf9TB58__z-gci-Wby" /> <link rel="stylesheet" media="all" href="/rhdc/system-files/css/css_ilfGrGPMQlD8LeC2M49V0J07YCnQCFb2g1Mqroi7XDs.css?delta=4&language=en&theme=rhdc&include=eJyNUkGS3DAI_JA9fsTmmMotZxWSGJuNLFyAZ-PfB481s95NbSUnIVo0amiZcgpQoWxGSQf5cA2YcwmRzXjuZApMjs4OjyhDEgTDI5cKYbVO_k2m5DWKIGn6n-cowtLppobzEEFx_8Z-hpWGsXCE8jIJz9i9YZRpWK7YV7jRCEZc7x3uvP3x9q9Er0loMT0BitYXqGOfmH8RnpArs6H0a6Ubin5gO6DPikxWNZd6SVzVB3Rps7vAQu3DyeA9CvNajHZ9lFp2FF6XFtPsxQHniPlRA5KDkxtQ9fatBD12AsEcJrBwLfibYsFQYOPVhuO4p798o2tcwFxSDbpAojo28v327BShejlC3qU3JoOonzrtqa7FmTSxj28buGLi0vlYyLZDletZjr01Mp1gDwvF3R6nzfqWXHYG2b56azCe9pNxEUzu13w2kLvlB9y-0zjZt8PhD-S5Y8ebWOeElHit1mfhJfNbPVd4b__FT324YMa6HpZ-uv3c98X3fkdf9TB58__z-gci-Wby" /> <link type="text/css" href="/ux/webdms/css/styles.min.css" rel="stylesheet" /> <link type="text/css" href="https://www.redhat.com/themes/custom/rhdc/dist/modules/rh-secondary-nav-lightdom.css" rel="stylesheet" /> <link type="text/css" href="/ux/webdms/css/projects/rh-secondary-nav-component.min.css" rel="stylesheet" /> <link rel="preload" href="/themes/custom/rh_base_ui/src/fonts/red_hat_text/RedHatTextVFModified.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/themes/custom/rh_base_ui/src/fonts/red_hat_display/RedHatDisplayVFModified.woff2" as="font" type="font/woff2" crossorigin> <script type="speculationrules">{"prerender": [{"urls": ["/en"]}]}</script> <meta name="description" content="Use this Red Hat typography guide to explore how and when to incorporate the various fonts available within the Red Hat font family." /> <link rel="canonical" href="https://www.redhat.com/en/about/brand/standards/typography" /> <link rel="image_src" href="https://www.redhat.com/themes/custom/rhdc/img/red-hat-social-share.jpg" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://www.redhat.com/en/about/brand/standards/typography" /> <meta property="og:title" content="Fonts and typography - Red Hat brand standards" /> <meta property="og:description" content="Use this Red Hat typography guide to explore how and when to incorporate the various fonts available within the Red Hat font family." /> <meta property="og:image" content="https://www.redhat.com/themes/custom/rhdc/img/red-hat-social-share.jpg" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:description" content="Use this Red Hat typography guide to explore how and when to incorporate the various fonts available within the Red Hat font family." /> <meta name="twitter:title" content="Fonts and typography - Red Hat brand standards" /> <meta name="twitter:url" content="https://www.redhat.com/en/about/brand/standards/typography" /> <meta name="twitter:image" content="https://www.redhat.com/themes/custom/rhdc/img/red-hat-social-share.jpg" /> <meta name="Generator" content="Drupal 10 (https://www.drupal.org)" /> <meta name="MobileOptimized" content="width" /> <meta name="HandheldFriendly" content="true" />  <style>.dx-gap-y,.dx-row{row-gap:32px !important;}[class*=dx-border]{border-style:solid;border-width:0;}.dx-border-t-3{border-top-width:3px !important;}.dx-row+.dx-row{padding-top:32px;}.dx-row{--bs-gutter-x:32px !important;--bs-gutter-y:0 !important;display:flex !important;flex-wrap:wrap !important;margin-top:calc(var(--bs-gutter-y) * -1) !important;margin-right:calc(var(--bs-gutter-x) / -2) !important;margin-left:calc(var(--bs-gutter-x) / -2) !important;}.dx-col-12{flex:0 0 auto !important;width:100% !important;}.dx-items-center{align-items:center !important;}.dx-row>*{box-sizing:border-box;padding-right:calc(var(--bs-gutter-x) / 2);padding-left:calc(var(--bs-gutter-x) / 2);}.dx-container,.dx-container-fluid{padding-right:16px;padding-left:16px;}.dx-container{margin-right:auto;margin-left:auto;}.dx-relative{position:relative !important;}.dx-flex{display:flex !important;}.dx-pb-12{padding-bottom:96px !important;}.dx-pb-6{padding-bottom:48px !important;}.dx-pb-8{padding-bottom:64px !important;}.dx-pt-10{padding-top:80px !important;}.dx-pt-8{padding-top:64px !important;}.dx-font-mono{font-family:RedHatMono,"Red Hat Mono","Courier New",Courier,monospace !important;}@media (min-width:576px){.sm\:dx-gap-y,.sm\:dx-row{row-gap:32px !important;}.sm\:dx-border-t-3{border-top-width:3px !important;}.sm\:dx-row+.sm\:dx-row{padding-top:32px;}.sm\:dx-row{--bs-gutter-x:32px !important;--bs-gutter-y:0 !important;display:flex !important;flex-wrap:wrap !important;margin-top:calc(var(--bs-gutter-y) * -1) !important;margin-right:calc(var(--bs-gutter-x) / -2) !important;margin-left:calc(var(--bs-gutter-x) / -2) !important;}.sm\:dx-col-12{flex:0 0 auto !important;width:100% !important;}.sm\:dx-items-center{align-items:center !important;}.sm\:dx-relative{position:relative !important;}.sm\:dx-flex{display:flex !important;}.sm\:dx-pb-12{padding-bottom:96px !important;}.sm\:dx-pb-6{padding-bottom:48px !important;}.sm\:dx-pb-8{padding-bottom:64px !important;}.sm\:dx-pt-10{padding-top:80px !important;}.sm\:dx-pt-8{padding-top:64px !important;}}@media (min-width:768px){.md\:dx-gap-y,.md\:dx-row{row-gap:32px !important;}.md\:dx-border-t-3{border-top-width:3px !important;}.md\:dx-row+.md\:dx-row{padding-top:32px;}.md\:dx-row{--bs-gutter-x:32px !important;--bs-gutter-y:0 !important;display:flex !important;flex-wrap:wrap !important;margin-top:calc(var(--bs-gutter-y) * -1) !important;margin-right:calc(var(--bs-gutter-x) / -2) !important;margin-left:calc(var(--bs-gutter-x) / -2) !important;}.md\:dx-col-4{flex:0 0 auto !important;width:33.333333333333% !important;}.md\:dx-col-6{flex:0 0 auto !important;width:50% !important;}.md\:dx-col-8{flex:0 0 auto !important;width:66.666666666667% !important;}.md\:dx-col-10{flex:0 0 auto !important;width:83.333333333333% !important;}.md\:dx-col-11{flex:0 0 auto !important;width:91.666666666667% !important;}.md\:dx-col-12{flex:0 0 auto !important;width:100% !important;}.md\:dx-items-center{align-items:center !important;}.dx-container{max-width:750px;}.md\:dx-relative{position:relative !important;}.md\:dx-flex{display:flex !important;}.md\:dx-pb-12{padding-bottom:96px !important;}.md\:dx-pb-6{padding-bottom:48px !important;}.md\:dx-pb-8{padding-bottom:64px !important;}.md\:dx-pt-10{padding-top:80px !important;}.md\:dx-pt-8{padding-top:64px !important;}}@media (min-width:992px){.lg\:dx-gap-y,.lg\:dx-row{row-gap:32px !important;}.lg\:dx-border-t-3{border-top-width:3px !important;}.lg\:dx-row+.lg\:dx-row{padding-top:32px;}.lg\:dx-row{--bs-gutter-x:32px !important;--bs-gutter-y:0 !important;display:flex !important;flex-wrap:wrap !important;margin-top:calc(var(--bs-gutter-y) * -1) !important;margin-right:calc(var(--bs-gutter-x) / -2) !important;margin-left:calc(var(--bs-gutter-x) / -2) !important;}.lg\:dx-col-12{flex:0 0 auto !important;width:100% !important;}.lg\:dx-items-center{align-items:center !important;}.dx-container{max-width:970px;}.lg\:dx-relative{position:relative !important;}.lg\:dx-flex{display:flex !important;}.lg\:dx-pb-12{padding-bottom:96px !important;}.lg\:dx-pb-6{padding-bottom:48px !important;}.lg\:dx-pb-8{padding-bottom:64px !important;}.lg\:dx-pt-10{padding-top:80px !important;}.lg\:dx-pt-8{padding-top:64px !important;}}@media (min-width:1200px){.xl\:dx-gap-y,.xl\:dx-row{row-gap:32px !important;}.xl\:dx-border-t-3{border-top-width:3px !important;}.xl\:dx-row+.xl\:dx-row{padding-top:32px;}.xl\:dx-row{--bs-gutter-x:32px !important;--bs-gutter-y:0 !important;display:flex !important;flex-wrap:wrap !important;margin-top:calc(var(--bs-gutter-y) * -1) !important;margin-right:calc(var(--bs-gutter-x) / -2) !important;margin-left:calc(var(--bs-gutter-x) / -2) !important;}.xl\:dx-col-12{flex:0 0 auto !important;width:100% !important;}.xl\:dx-items-center{align-items:center !important;}.dx-container{max-width:1170px;}.xl\:dx-relative{position:relative !important;}.xl\:dx-flex{display:flex !important;}.xl\:dx-pb-12{padding-bottom:96px !important;}.xl\:dx-pb-6{padding-bottom:48px !important;}.xl\:dx-pb-8{padding-bottom:64px !important;}.xl\:dx-pt-10{padding-top:80px !important;}.xl\:dx-pt-8{padding-top:64px !important;}}@media (min-width:1440px){.\32xl\:dx-gap-y,.\32xl\:dx-row{row-gap:32px !important;}.\32xl\:dx-border-t-3{border-top-width:3px !important;}.\32xl\:dx-row+.\32xl\:dx-row{padding-top:32px;}.\32xl\:dx-row{--bs-gutter-x:32px !important;--bs-gutter-y:0 !important;display:flex !important;flex-wrap:wrap !important;margin-top:calc(var(--bs-gutter-y) * -1) !important;margin-right:calc(var(--bs-gutter-x) / -2) !important;margin-left:calc(var(--bs-gutter-x) / -2) !important;}.\32xl\:dx-col-12{flex:0 0 auto !important;width:100% !important;}.\32xl\:dx-items-center{align-items:center !important;}.\32xl\:dx-relative{position:relative !important;}.\32xl\:dx-flex{display:flex !important;}.\32xl\:dx-pb-12{padding-bottom:96px !important;}.\32xl\:dx-pb-6{padding-bottom:48px !important;}.\32xl\:dx-pb-8{padding-bottom:64px !important;}.\32xl\:dx-pt-10{padding-top:80px !important;}.\32xl\:dx-pt-8{padding-top:64px !important;}}</style> <meta http-equiv="content-language" content="en" /> <meta name="last-publish-date" content="Mon, 21 Aug 2023 00:00:00 GMT" /> <meta name="node-type" content="page" /> <meta name="source" content="rhdc_drupal" /> <meta name="rhdc_key" content="edd0933add9f5ed12a5ff9862d0384a1" /> <meta name="dateline" content="2023-08-21T00:00:00.00Z" /> <meta name="source_title" content="Fonts and typography - Red Hat brand standards" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="alternate" hreflang="zh" href="https://www.redhat.com/zh/about/brand/standards/typography" /> <link rel="alternate" hreflang="en" href="https://www.redhat.com/en/about/brand/standards/typography" /> <link rel="alternate" hreflang="fr" href="https://www.redhat.com/fr/about/brand/standards/typography" /> <link rel="alternate" hreflang="de" href="https://www.redhat.com/de/about/brand/standards/typography" /> <link rel="alternate" hreflang="it" href="https://www.redhat.com/it/about/brand/standards/typography" /> <link rel="alternate" hreflang="ja" href="https://www.redhat.com/ja/about/brand/standards/typography" /> <link rel="alternate" hreflang="ko" href="https://www.redhat.com/ko/about/brand/standards/typography" /> <link rel="alternate" hreflang="pt-br" href="https://www.redhat.com/pt-br/about/brand/standards/typography" /> <link rel="alternate" hreflang="es" href="https://www.redhat.com/es/about/brand/standards/typography" /> <script>performance.mark('HEAD End'); performance.measure('HEAD Time', 'HEAD Start', 'HEAD End');</script> </head> <body class="updated path-node rhdc-node-type-page page-node-440461" > <a href="#rhb-main-content" class="visually-hidden skip-link">Skip to content</a><nav id="universal-nav" class="unav" aria-labelledby="unav-label" data-analytics-region="universal-navigation"><h2 id="unav-label" class="unav__visually-hidden">Featured links</h2><div class="unav__wrapper"><ul class="unav__menu"><li><a href="https://access.redhat.com/" class="unav__link" data-analytics-text="Support" data-analytics-category="Featured Links" >Support</a></li><li><a href="https://docs.redhat.com/en" class="unav__link" data-analytics-text="Documentation" data-analytics-category="Featured Links" >Documentation</a></li><li><a href="https://cloud.redhat.com/" class="unav__link" data-analytics-text="Console" data-analytics-category="Featured Links" >Console</a></li><li><a href="https://developers.redhat.com/" class="unav__link" data-analytics-text="Developers" data-analytics-category="Featured Links" >Developers</a></li><li><a href="/en/products/trials" class="unav__link" data-analytics-text="Start a trial" data-analytics-category="Featured Links" >Start a trial</a></li><li><button class="unav__link" data-analytics-text="All Red Hat" data-analytics-category="Featured Links" aria-expanded="false" data-analytics-linktype="tab" > All Red Hat<svg class="unav__arrow" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" aria-hidden="true"><path d="M810.642 511.557c0 8.905-3.447 16.776-10.284 23.613L322.31 1013.216c-6.835 6.837-14.706 10.284-23.61 10.284s-16.776-3.447-23.613-10.284l-51.303-51.303c-6.837-6.837-10.284-14.707-10.284-23.612s3.447-16.775 10.284-23.61L626.972 511.5 223.784 108.31c-6.837-6.835-10.284-14.706-10.284-23.61s3.447-16.776 10.284-23.613l51.303-51.303C281.924 2.947 289.794-.5 298.7-.5s16.775 3.447 23.61 10.284L800.36 487.83c6.837 6.837 10.284 14.708 10.284 23.613v.114"/></svg></button><div class="unav__drop-down"><ul><li><span >For customers</span><ul><li><a href="https://access.redhat.com/" data-analytics-category="All Red Hat|For customers" data-analytics-text="Customer support" >Customer support</a></li><li><a href="https://access.redhat.com/management" data-analytics-category="All Red Hat|For customers" data-analytics-text="Subscription management" >Subscription management</a></li><li><a href="https://access.redhat.com/support/cases" data-analytics-category="All Red Hat|For customers" data-analytics-text="Support cases" >Support cases</a></li><li><a href="https://catalog.redhat.com/" data-analytics-category="All Red Hat|For customers" data-analytics-text="Red Hat Ecosystem Catalog" >Red Hat Ecosystem Catalog</a></li><li><a href="https://catalog.redhat.com/partners" data-analytics-category="All Red Hat|For customers" data-analytics-text="Find a partner" >Find a partner</a></li></ul></li><li><span >For partners</span><ul><li><a href="https://connect.redhat.com/partner-admin/dashboard" data-analytics-category="All Red Hat|For partners" data-analytics-text="Partner portal" >Partner portal</a></li><li><a href="https://connect.redhat.com/en/support" data-analytics-category="All Red Hat|For partners" data-analytics-text="Partner support" >Partner support</a></li><li><a href="https://connect.redhat.com/" data-analytics-category="All Red Hat|For partners" data-analytics-text="Become a partner " >Become a partner </a></li></ul></li><li><span >Try, buy, & sell</span><ul><li><a href="https://marketplace.redhat.com/en-us" data-analytics-category="All Red Hat|Try, buy, & sell" data-analytics-text="Red Hat Marketplace" >Red Hat Marketplace</a></li><li><a href="https://www.redhat.com/en/store" data-analytics-category="All Red Hat|Try, buy, & sell" data-analytics-text="Red Hat Store" >Red Hat Store</a></li><li><a href="/en/contact" data-analytics-category="All Red Hat|Try, buy, & sell" data-analytics-text="Contact sales" >Contact sales</a></li><li><a href="/en/products/trials" data-analytics-category="All Red Hat|Try, buy, & sell" data-analytics-text="Start a trial" >Start a trial</a></li></ul></li><li><span >Learning resources</span><ul><li><a href="https://docs.redhat.com/en" data-analytics-category="All Red Hat|Learning resources" data-analytics-text="Documentation" >Documentation</a></li><li><a href="/en/services/training-and-certification" data-analytics-category="All Red Hat|Learning resources" data-analytics-text="Training and certification " >Training and certification </a></li><li><a href="https://cloud.redhat.com/learn" data-analytics-category="All Red Hat|Learning resources" data-analytics-text="Hybrid cloud learning hub" >Hybrid cloud learning hub</a></li><li><a href="/en/interactive-labs" data-analytics-category="All Red Hat|Learning resources" data-analytics-text="Interactive labs" >Interactive labs</a></li><li><a href="https://learn.redhat.com/" data-analytics-category="All Red Hat|Learning resources" data-analytics-text="Learning community" >Learning community</a></li><li><a href="https://tv.redhat.com" data-analytics-category="All Red Hat|Learning resources" data-analytics-text="Red Hat TV" >Red Hat TV</a></li></ul></li><li><span >Open source communities</span><ul><li><a href="https://www.ansible.com/community" data-analytics-category="All Red Hat|Open source communities" data-analytics-text="Ansible" >Ansible</a></li><li><a href="https://access.redhat.com/accelerators" data-analytics-category="All Red Hat|Open source communities" data-analytics-text="Global advocacy" >Global advocacy</a></li><li><a href="/en/about/our-community-contributions" data-analytics-category="All Red Hat|Open source communities" data-analytics-text="How we contribute" >How we contribute</a></li></ul></li></ul></div></li></ul></div></nav><pfe-navigation search-button-translation="Search" pfe-full-width pfe-sticky pfe-close-on-click="external" mobile-menu-translation=Menu id="pfe-navigation" data-analytics-region="mega menu" lang="en"><nav class="pfe-navigation" aria-label="Main Navigation" data-analytics-region="main nav"><div class="pfe-navigation__logo-wrapper" id="pfe-navigation__logo-wrapper"><a href="/en" class="pfe-navigation__logo-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613 145" class="redhat-logo" style="margin:0; width: 135px; display:block" height="32" width="135" role="img"><title>Red Hat</title><path d="M127.47 83.49c12.51 0 30.61-2.58 30.61-17.46a14 14 0 0 0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89 8.69 103.76.5 97.51.5 91.69.5 90 8 83.06 8c-6.68 0-11.64-5.6-17.89-5.6-6 0-9.91 4.09-12.93 12.5 0 0-8.41 23.72-9.49 27.16a6.43 6.43 0 0 0-.22 1.94c0 9.22 36.3 39.45 84.94 39.45M160 72.07c1.73 8.19 1.73 9.05 1.73 10.13 0 14-15.74 21.77-36.43 21.77-46.76.03-87.72-27.37-87.72-45.48a18.45 18.45 0 0 1 1.51-7.33C22.27 52 .5 55 .5 74.22c0 31.48 74.59 70.28 133.65 70.28 45.28 0 56.7-20.48 56.7-36.65 0-12.72-11-27.16-30.83-35.78" fill="#e00"/><path d="M160 72.07c1.73 8.19 1.73 9.05 1.73 10.13 0 14-15.74 21.77-36.43 21.77-46.76.03-87.72-27.37-87.72-45.48a18.45 18.45 0 0 1 1.51-7.33l3.66-9.06a6.43 6.43 0 0 0-.22 1.9c0 9.22 36.3 39.45 84.94 39.45 12.51 0 30.61-2.58 30.61-17.46a14 14 0 0 0-.31-3.42Z"/><path d="M579.74 92.8c0 11.89 7.15 17.67 20.19 17.67a52.11 52.11 0 0 0 11.89-1.68V95a24.84 24.84 0 0 1-7.68 1.16c-5.37 0-7.36-1.68-7.36-6.73V68.3h15.56V54.1h-15.56v-18l-17 3.68V54.1h-11.29v14.2h11.25Zm-53 .32c0-3.68 3.69-5.47 9.26-5.47a43.12 43.12 0 0 1 10.1 1.26v7.15a21.51 21.51 0 0 1-10.63 2.63c-5.46 0-8.73-2.1-8.73-5.57m5.2 17.56c6 0 10.84-1.26 15.36-4.31v3.37h16.82V74.08c0-13.56-9.14-21-24.39-21-8.52 0-16.94 2-26 6.1l6.1 12.52c6.52-2.74 12-4.42 16.83-4.42 7 0 10.62 2.73 10.62 8.31v2.73a49.53 49.53 0 0 0-12.62-1.58c-14.31 0-22.93 6-22.93 16.73 0 9.78 7.78 17.24 20.19 17.24m-92.44-.94h18.09V80.92h30.29v28.82H506V36.12h-18.07v28.29h-30.29V36.12h-18.09Zm-68.86-27.9c0-8 6.31-14.1 14.62-14.1A17.22 17.22 0 0 1 397 72.09v19.45A16.36 16.36 0 0 1 385.24 96c-8.2 0-14.62-6.1-14.62-14.09m26.61 27.87h16.83V32.44l-17 3.68v20.93a28.3 28.3 0 0 0-14.2-3.68c-16.19 0-28.92 12.51-28.92 28.5a28.25 28.25 0 0 0 28.4 28.6 25.12 25.12 0 0 0 14.93-4.83ZM320 67c5.36 0 9.88 3.47 11.67 8.83h-23.2C310.15 70.3 314.36 67 320 67m-28.67 15c0 16.2 13.25 28.82 30.28 28.82 9.36 0 16.2-2.53 23.25-8.42l-11.26-10c-2.63 2.74-6.52 4.21-11.14 4.21a14.39 14.39 0 0 1-13.68-8.83h39.65v-4.23c0-17.67-11.88-30.39-28.08-30.39a28.57 28.57 0 0 0-29 28.81M262 51.58c6 0 9.36 3.78 9.36 8.31S268 68.2 262 68.2h-17.89V51.58Zm-36 58.16h18.09V82.92h13.77l13.89 26.82H292l-16.2-29.45a22.27 22.27 0 0 0 13.88-20.72c0-13.25-10.41-23.45-26-23.45H226Z" fill="#fff"/></svg></a></div><pfe-navigation-main role="navigation" aria-label="Main"><ul><li><pfe-navigation-item><div slot="trigger"><a href="https://www.redhat.com/en/technologies/all-products" data-nav-trigger-id="products" data-analytics-text="Products" tabindex="-1">Products</a></div><div slot="tray" hidden><div class="pfe-navigation-grid"><div class="pfe-navigation--column desktop-col-span-4 tablet-col-span-all"><slot name="custom-slot-products"></slot></div></div></div></pfe-navigation-item></li><li><pfe-navigation-item><div slot="trigger"><a href="https://www.redhat.com/en/solutions" data-nav-trigger-id="solutions" data-analytics-text="Solutions" tabindex="-1">Solutions</a></div><div slot="tray" hidden><div class="pfe-navigation-grid"><div class="pfe-navigation--column desktop-col-span-4 tablet-col-span-all"><slot name="custom-slot-solutions"></slot></div></div></div></pfe-navigation-item></li><li><pfe-navigation-item><div slot="trigger"><a href="https://www.redhat.com/en/services" data-nav-trigger-id="training-services" data-analytics-text="Training & services" tabindex="-1">Training & services</a></div><div slot="tray" hidden><div class="pfe-navigation-grid"><div class="pfe-navigation--column desktop-col-span-4 tablet-col-span-all"><slot name="custom-slot-training-services"></slot></div></div></div></pfe-navigation-item></li><li><pfe-navigation-item><div slot="trigger"><a href="https://www.redhat.com/en/resources" data-nav-trigger-id="resources" data-analytics-text="Resources" tabindex="-1">Resources</a></div><div slot="tray" hidden><div class="pfe-navigation-grid"><div class="pfe-navigation--column desktop-col-span-4 tablet-col-span-all"><slot name="custom-slot-resources"></slot></div></div></div></pfe-navigation-item></li><li><pfe-navigation-item><div slot="trigger"><a href="" data-nav-trigger-id="partners" data-analytics-text="Partners" tabindex="-1">Partners</a></div><div slot="tray" hidden><div class="pfe-navigation-grid"><div class="pfe-navigation--column desktop-col-span-4 tablet-col-span-all"><slot name="custom-slot-partners"></slot></div></div></div></pfe-navigation-item></li><li><pfe-navigation-item><div slot="trigger"><a href="https://www.redhat.com/en/about" data-nav-trigger-id="about" data-analytics-text="About" tabindex="-1">About</a></div><div slot="tray" hidden><div class="pfe-navigation-grid"><div class="pfe-navigation--column desktop-col-span-4 tablet-col-span-all"><slot name="custom-slot-about"></slot></div></div></div></pfe-navigation-item></li><li class="universal-nav-link hidden-at-desktop hidden-at-tablet" data-analytics-region="universal-navigation"><pfe-navigation-item><div slot="trigger"><a href="#" data-analytics-text="Explore more" >Explore more</a></div><div slot="tray"><div class="pfe-navigation-item__tray--container"><div class="pfe-navigation-grid"><slot name="custom-slot-explore-more"></slot></div></div></div></pfe-navigation-item></li></ul></pfe-navigation-main></nav><div slot="custom-slot-products" class="custom-nav-slot"><div class="pfe-navigation-grid"><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header nolink"><h3 data-analytics-category="Products" data-analytics-text="Platform products" class="link-header nolink">Platform products</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Products|Platform products" data-analytics-text="Red Hat Enterprise Linux" href="/en/technologies/linux-platforms/enterprise-linux" ><span class="custom-nav-overview-title">Red Hat Enterprise Linux</span><span class="custom-nav-overview-body">A flexible, stable operating system to support hybrid cloud innovation. </span></a></li><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Products|Platform products" data-analytics-text="Red Hat OpenShift" href="/en/technologies/cloud-computing/openshift" ><span class="custom-nav-overview-title">Red Hat OpenShift</span><span class="custom-nav-overview-body">A container platform to build, modernize, and deploy applications at scale. </span></a></li><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Products|Platform products" data-analytics-text="Red Hat Ansible Automation Platform" href="/en/technologies/management/ansible" ><span class="custom-nav-overview-title">Red Hat Ansible Automation Platform</span><rh-tag color="blue" variant="filled" size="compact">New version</rh-tag><span class="custom-nav-overview-body">A foundation for implementing enterprise-wide automation. </span></a></li></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header "><h3 data-analytics-category="Products" data-analytics-text="Try & buy" class="link-header nolink">Try & buy</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Products|Try & buy" data-analytics-text="Start a trial" href="/en/products/trials" ><span class="custom-nav-overview-title">Start a trial</span><span class="custom-nav-overview-body">Assess a product with a no-cost trial. </span></a></li><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Products|Try & buy" data-analytics-text="Buy online" href="https://www.redhat.com/en/store" ><span class="custom-nav-overview-title">Buy online</span><span class="custom-nav-overview-body">Buy select products and services in the Red Hat Store. </span></a></li><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Products|Try & buy" data-analytics-text="Integrate with major cloud providers" href="/en/partners/certified-cloud-and-service-providers" ><span class="custom-nav-overview-title">Integrate with major cloud providers</span><span class="custom-nav-overview-body">Buy Red Hat solutions using committed spend from providers, including: <img src="https://www.redhat.com/rhdc/managed-files/cloud-providers-2x.png" alt="Cloud providers: Amazon Web Services, Microsoft Azure, and Google Cloud" ></span></a></li></ul></div></div><div class="pfe-navigation--column nav-card-lg"><div class="pfe-link-list"><div class="pfe-link-list--header "><h3 data-analytics-category="Products" data-analytics-text="Featured" class="link-header nolink">Featured</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Products|Featured" data-analytics-text="Red Hat Enterprise Linux AI" href="/en/technologies/linux-platforms/enterprise-linux/ai" > Red Hat Enterprise Linux AI </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Products|Featured" data-analytics-text="Red Hat OpenShift AI" href="/en/technologies/cloud-computing/openshift/openshift-ai" > Red Hat OpenShift AI </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Products|Featured" data-analytics-text="Red Hat OpenShift Virtualization" href="/en/technologies/cloud-computing/openshift/virtualization" > Red Hat OpenShift Virtualization </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Products|Featured" data-analytics-text="Red Hat OpenShift Service on AWS" href="/en/technologies/cloud-computing/openshift/aws" > Red Hat OpenShift Service on AWS </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Products|Featured" data-analytics-text="Microsoft Azure Red Hat OpenShift" href="/en/technologies/cloud-computing/openshift/azure" > Microsoft Azure Red Hat OpenShift </a></li></ul></div></div></div><div class="pfe-navigation--footer"><div class="pfe-navigation--column "><pfe-cta pfe-priority="primary" class="PFElement" pfelement has_link><a href="/en/technologies/all-products" data-analytics-category="Products" data-analytics-linkType="cta" data-analytics-text="See all products">See all products </a></pfe-cta></div></div></div><div slot="custom-slot-solutions" class="custom-nav-slot"><div class="pfe-navigation-grid"><div class="pfe-navigation--column"><div class="pfe-link-list"><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Solutions" data-analytics-text="Application platform" href="/en/solutions/application-platform" ><span class="custom-nav-overview-title">Application platform</span><span class="custom-nav-overview-body">Simplify the way you build, deploy, manage, and secure apps across the hybrid cloud. </span></a></li><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Solutions" data-analytics-text="Artificial intelligence" href="/en/solutions/ai" ><span class="custom-nav-overview-title">Artificial intelligence</span><span class="custom-nav-overview-body">Build, deploy, and monitor AI models and apps with Red Hat's open source platforms. </span></a></li><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Solutions" data-analytics-text="Edge computing" href="/en/products/edge" ><span class="custom-nav-overview-title">Edge computing</span><span class="custom-nav-overview-body">Deploy workloads closer to the source with security-focused edge technology. </span></a></li></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Solutions" data-analytics-text="IT automation" href="/en/solutions/it-automation" ><span class="custom-nav-overview-title">IT automation</span><span class="custom-nav-overview-body">Unite disparate tech, teams, and environments with 1 comprehensive automation platform. </span></a></li><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Solutions" data-analytics-text="Linux standardization" href="/en/solutions/linux-standardization" ><span class="custom-nav-overview-title">Linux standardization</span><span class="custom-nav-overview-body">Get consistency across operating environments with an open, flexible infrastructure. </span></a></li></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Solutions" data-analytics-text="Security" href="/en/solutions/trusted-software-supply-chain" ><span class="custom-nav-overview-title">Security</span><span class="custom-nav-overview-body">Deliver software using trusted platforms and real-time security scanning and remediation. </span></a></li><li class="pfe-link-list--group-item"><a class="custom-nav-overview-link" data-analytics-category="Solutions" data-analytics-text="Virtualization" href="/en/solutions/virtualization" ><span class="custom-nav-overview-title">Virtualization</span><span class="custom-nav-overview-body">Modernize operations using a single platform for virtualized and containerized workloads. </span></a></li></ul></div></div><div class="pfe-navigation--column nav-card"><div class="pfe-link-list"><div class="pfe-link-list--header nolink"><h3 data-analytics-category="Solutions" data-analytics-text="By industry" class="link-header nolink">By industry</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Solutions|By industry" data-analytics-text="Automotive" href="/en/solutions/automotive" > Automotive </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Solutions|By industry" data-analytics-text="Financial services" href="/en/solutions/financial-services" > Financial services </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Solutions|By industry" data-analytics-text="Healthcare" href="/en/solutions/healthcare" > Healthcare </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Solutions|By industry" data-analytics-text="Industrial sector" href="/en/solutions/industrial-sector" > Industrial sector </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Solutions|By industry" data-analytics-text="Media and entertainment" href="/en/solutions/media-entertainment" > Media and entertainment </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Solutions|By industry" data-analytics-text="Public sector" href="/en/solutions/public-sector" > Public sector </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Solutions|By industry" data-analytics-text="Telecommunications" href="/en/solutions/telecommunications" > Telecommunications </a></li></ul></div></div></div><div class="pfe-navigation--footer"><div class="pfe-navigation--column pfe-navigation--column-span-2"><pfe-cta pfe-priority="primary" class="PFElement" pfelement has_link><a href="/en/solutions" data-analytics-category="Solutions" data-analytics-linkType="cta" data-analytics-text="Explore solutions">Explore solutions </a></pfe-cta></div></div></div><div slot="custom-slot-training-services" class="custom-nav-slot"><div class="pfe-navigation-grid"><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header "><h3><a href="/en/services" class="link-header" data-analytics-category="Training & services" data-analytics-text="Services" > Services </a></h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Services" data-analytics-text="Consulting" href="/en/services/consulting" > Consulting </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Services" data-analytics-text="Open Innovation Labs" href="/en/services/consulting/open-innovation-labs" > Open Innovation Labs </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Services" data-analytics-text="Technical Account Management" href="/en/services/support/technical-account-management" > Technical Account Management </a></li></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header zh-tw"><h3><a href="/en/services/training-and-certification" class="link-header" data-analytics-category="Training & services" data-analytics-text="Training & certification" > Training & certification </a></h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Training & certification" data-analytics-text="All courses and exams" href="/en/services/training/all-courses-exams" > All courses and exams </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Training & certification" data-analytics-text="All certifications" href="/en/services/certifications" > All certifications </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Training & certification" data-analytics-text="Verify a certification" href="https://www.redhat.com/rhtapps/services/verify/" > Verify a certification </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Training & certification" data-analytics-text="Skills assessment" href="https://skills.ole.redhat.com" > Skills assessment </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Training & certification" data-analytics-text="Learning subscription" href="/en/services/training/learning-subscription" > Learning subscription </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Training & certification" data-analytics-text="Learning community" href="https://learn.redhat.com/" > Learning community </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Training & certification" data-analytics-text="Red Hat Academy" href="/en/services/training/red-hat-academy" > Red Hat Academy </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Training & certification" data-analytics-text="FAQs" href="/en/services/training-and-certification/faq" > FAQs </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Training & certification" data-analytics-text="Connect with learning experts" href="/en/services/training-and-certification/contact-us" > Connect with learning experts </a></li></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header "><h3 data-analytics-category="Training & services" data-analytics-text="Featured" class="link-header nolink">Featured</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Featured" data-analytics-text="Ansible Basics: Automation Technical Overview (No cost)" href="/en/services/training/do007-ansible-essentials-simplicity-automation-technical-overview" > Ansible Basics: Automation Technical Overview (No cost) </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Featured" data-analytics-text="Containers, Kubernetes and Red Hat OpenShift Technical Overview (No cost)" href="/en/services/training/do080-deploying-containerized-applications-technical-overview" > Containers, Kubernetes and Red Hat OpenShift Technical Overview (No cost) </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Featured" data-analytics-text="Red Hat Enterprise Linux Technical Overview (No cost)" href="/en/services/training/rh024-red-hat-linux-technical-overview" > Red Hat Enterprise Linux Technical Overview (No cost) </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Featured" data-analytics-text="Red Hat Certified System Administrator exam" href="/en/services/training/ex200-red-hat-certified-system-administrator-rhcsa-exam" > Red Hat Certified System Administrator exam </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Training & services|Featured" data-analytics-text="Red Hat System Administration I" href="/en/services/training/rh124-red-hat-system-administration-i" > Red Hat System Administration I </a></li></ul></div></div></div><div class="pfe-navigation--footer"><div class="pfe-navigation--column pfe-navigation--column-span-2 desktop-col-span-2"><pfe-cta pfe-priority="primary" class="PFElement" pfelement has_link><a href="/en/services" data-analytics-category="Training & services" data-analytics-linkType="cta" data-analytics-text="Explore services">Explore services </a></pfe-cta></div></div></div><div slot="custom-slot-resources" class="custom-nav-slot"><div class="pfe-navigation-grid"><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header "><h3 data-analytics-category="Resources" data-analytics-text="Topics" class="link-header nolink">Topics</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Topics" data-analytics-text="AI" href="/en/topics/ai" > AI </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Topics" data-analytics-text="Application modernization" href="/en/topics/application-modernization" > Application modernization </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Topics" data-analytics-text="Automation" href="/en/topics/automation" > Automation </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Topics" data-analytics-text="Cloud computing" href="/en/topics/cloud-computing" > Cloud computing </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Topics" data-analytics-text="Cloud-native applications" href="/en/topics/cloud-native-apps" > Cloud-native applications </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Topics" data-analytics-text="Containers" href="/en/topics/containers" > Containers </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Topics" data-analytics-text="DevOps" href="/en/topics/devops" > DevOps </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Topics" data-analytics-text="Edge computing" href="/en/topics/edge-computing" > Edge computing </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Topics" data-analytics-text="Linux" href="/en/topics/linux" > Linux </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Topics" data-analytics-text="Virtualization" href="/en/topics/virtualization" > Virtualization </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Topics" data-analytics-text="See all topics" href="/en/topics" > See all topics </a></li></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header "><h3 data-analytics-category="Resources" data-analytics-text="Articles" class="link-header nolink">Articles</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Articles" data-analytics-text="What is InstructLab?" href="/en/topics/ai/what-is-instructlab" > What is InstructLab? </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Articles" data-analytics-text="What are cloud services?" href="/en/topics/cloud-computing/what-are-cloud-services" > What are cloud services? </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Articles" data-analytics-text="What is edge computing?" href="/en/topics/edge-computing/what-is-edge-computing" > What is edge computing? </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Articles" data-analytics-text="What is hybrid cloud?" href="/en/topics/cloud-computing/what-is-hybrid-cloud" > What is hybrid cloud? </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Articles" data-analytics-text="Why build a Red Hat cloud?" href="/en/topics/cloud-computing/why-choose-red-hat-cloud" > Why build a Red Hat cloud? </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Articles" data-analytics-text="Cloud vs. edge" href="/en/topics/cloud-computing/cloud-vs-edge" > Cloud vs. edge </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Articles" data-analytics-text="Red Hat OpenShift vs. Kubernetes" href="/en/technologies/cloud-computing/openshift/red-hat-openshift-kubernetes" > Red Hat OpenShift vs. Kubernetes </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Articles" data-analytics-text="Learning Ansible basics" href="/en/topics/automation/learning-ansible-tutorial" > Learning Ansible basics </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|Articles" data-analytics-text="What is Linux?" href="/en/topics/linux/what-is-linux" > What is Linux? </a></li></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header "><h3 data-analytics-category="Resources" data-analytics-text="More to explore" class="link-header nolink">More to explore</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|More to explore" data-analytics-text="Blog" href="/en/blog" > Blog </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|More to explore" data-analytics-text="Customer success stories" href="/en/success-stories" > Customer success stories </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|More to explore" data-analytics-text="Events and webinars" href="/en/events" > Events and webinars </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|More to explore" data-analytics-text="Newsroom" href="/en/about/newsroom" > Newsroom </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|More to explore" data-analytics-text="Podcasts and video series" href="/en/red-hat-original-series" > Podcasts and video series </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|More to explore" data-analytics-text="Documentation" href="https://docs.redhat.com/en" > Documentation </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|More to explore" data-analytics-text="Resource library" href="/en/resources" > Resource library </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Resources|More to explore" data-analytics-text="Training and certification" href="/en/services/training-and-certification" > Training and certification </a></li></ul></div></div></div><div class="pfe-navigation--footer"><div class="pfe-navigation--column pfe-navigation--column-span-2"><pfe-cta pfe-priority="primary" class="PFElement" pfelement has_link><a href="/en/resources" data-analytics-category="Resources" data-analytics-linkType="cta" data-analytics-text="Explore resources">Explore resources </a></pfe-cta></div></div></div><div slot="custom-slot-partners" class="custom-nav-slot"><div class="pfe-navigation-grid"><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header "><h3 data-analytics-category="Partners" data-analytics-text="For customers" class="link-header nolink">For customers</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Partners|For customers" data-analytics-text="Our partners" href="/en/partners" > Our partners </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Partners|For customers" data-analytics-text="Red Hat Ecosystem Catalog" href="https://catalog.redhat.com/" > Red Hat Ecosystem Catalog </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Partners|For customers" data-analytics-text="Find a partner" href="https://catalog.redhat.com/partners" > Find a partner </a></li></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header "><h3 data-analytics-category="Partners" data-analytics-text="For partners" class="link-header nolink">For partners</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Partners|For partners" data-analytics-text="Partner Connect" href="https://connect.redhat.com" > Partner Connect </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Partners|For partners" data-analytics-text="Become a partner" href="https://connect.redhat.com/en/benefits-of-being-a-partner" > Become a partner </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Partners|For partners" data-analytics-text="Training" href="https://connect.redhat.com/en/training" > Training </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Partners|For partners" data-analytics-text="Support" href="https://connect.redhat.com/en/support" > Support </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="Partners|For partners" data-analytics-text="Access the partner portal" href="https://connect.redhat.com/partner-admin/dashboard" > Access the partner portal </a></li></ul></div></div></div></div><div slot="custom-slot-about" class="custom-nav-slot"><div class="pfe-navigation-grid"><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header "><h3 data-analytics-category="About" data-analytics-text="About us" class="link-header nolink">About us</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|About us" data-analytics-text="Our company" href="/en/about/company" > Our company </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|About us" data-analytics-text="How we work" href="/en/about/our-culture" > How we work </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|About us" data-analytics-text="Our social impact" href="/en/about/community-social-responsibility" > Our social impact </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|About us" data-analytics-text="Development model" href="/en/about/development-model" > Development model </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|About us" data-analytics-text="Subscription model" href="/en/about/value-of-Red-Hat" > Subscription model </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|About us" data-analytics-text="Product support" href="/en/services/support" > Product support </a></li></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header "><h3 data-analytics-category="About" data-analytics-text="Open source" class="link-header nolink">Open source</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|Open source" data-analytics-text="Open source commitments" href="/en/about/open-source" > Open source commitments </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|Open source" data-analytics-text="How we contribute" href="/en/about/our-community-contributions" > How we contribute </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|Open source" data-analytics-text="Red Hat on GitHub" href="https://github.com/RedHatOfficial" > Red Hat on GitHub </a></li></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header "><h3 data-analytics-category="About" data-analytics-text="Company details" class="link-header nolink">Company details</h3></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|Company details" data-analytics-text="Analyst relations" href="/en/about/analysts" > Analyst relations </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|Company details" data-analytics-text="Blog" href="/en/blog" > Blog </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|Company details" data-analytics-text="Locations" href="/en/about/office-locations" > Locations </a></li><li class="pfe-link-list--group-item"><a class="custom-nav-link" data-analytics-category="About|Company details" data-analytics-text="Newsroom" href="/en/about/newsroom" > Newsroom </a></li></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"></div></div></div><div class="pfe-navigation--footer"><div class="pfe-navigation--column tablet-col-span-all"><pfe-cta pfe-priority="primary" class="PFElement" pfelement has_link><a href="/en/about" data-analytics-category="About" data-analytics-linkType="cta" data-analytics-text="Explore Red Hat">Explore Red Hat </a></pfe-cta></div><div class="pfe-navigation--column tablet-col-span-all"><pfe-cta class="PFElement" pfelement has_link><a href="/en/contact" data-analytics-category="About" data-analytics-linkType="cta" data-analytics-text="Contact us">Contact us </a></pfe-cta></div></div></div><div slot="custom-slot-explore-more" class="custom-nav-slot"><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header"><span class="link-header nolink" >For customers</span></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a href="https://access.redhat.com/" data-analytics-category="All Red Hat|For customers" data-analytics-text="Customer support" >Customer support</a><li class="pfe-link-list--group-item"><a href="https://access.redhat.com/management" data-analytics-category="All Red Hat|For customers" data-analytics-text="Subscription management" >Subscription management</a><li class="pfe-link-list--group-item"><a href="https://access.redhat.com/support/cases" data-analytics-category="All Red Hat|For customers" data-analytics-text="Support cases" >Support cases</a><li class="pfe-link-list--group-item"><a href="https://catalog.redhat.com/" data-analytics-category="All Red Hat|For customers" data-analytics-text="Red Hat Ecosystem Catalog" >Red Hat Ecosystem Catalog</a><li class="pfe-link-list--group-item"><a href="https://catalog.redhat.com/partners" data-analytics-category="All Red Hat|For customers" data-analytics-text="Find a partner" >Find a partner</a></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header"><span class="link-header nolink" >For partners</span></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a href="https://connect.redhat.com/partner-admin/dashboard" data-analytics-category="All Red Hat|For partners" data-analytics-text="Partner portal" >Partner portal</a><li class="pfe-link-list--group-item"><a href="https://connect.redhat.com/en/support" data-analytics-category="All Red Hat|For partners" data-analytics-text="Partner support" >Partner support</a><li class="pfe-link-list--group-item"><a href="https://connect.redhat.com/" data-analytics-category="All Red Hat|For partners" data-analytics-text="Become a partner " >Become a partner </a></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header"><span class="link-header nolink" >Try, buy, & sell</span></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a href="https://marketplace.redhat.com/en-us" data-analytics-category="All Red Hat|Try, buy, & sell" data-analytics-text="Red Hat Marketplace" >Red Hat Marketplace</a><li class="pfe-link-list--group-item"><a href="https://www.redhat.com/en/store" data-analytics-category="All Red Hat|Try, buy, & sell" data-analytics-text="Red Hat Store" >Red Hat Store</a><li class="pfe-link-list--group-item"><a href="/en/contact" data-analytics-category="All Red Hat|Try, buy, & sell" data-analytics-text="Contact sales" >Contact sales</a><li class="pfe-link-list--group-item"><a href="/en/products/trials" data-analytics-category="All Red Hat|Try, buy, & sell" data-analytics-text="Start a trial" >Start a trial</a></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header"><span class="link-header nolink" >Learning resources</span></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a href="https://docs.redhat.com/en" data-analytics-category="All Red Hat|Learning resources" data-analytics-text="Documentation" >Documentation</a><li class="pfe-link-list--group-item"><a href="/en/services/training-and-certification" data-analytics-category="All Red Hat|Learning resources" data-analytics-text="Training and certification " >Training and certification </a><li class="pfe-link-list--group-item"><a href="https://cloud.redhat.com/learn" data-analytics-category="All Red Hat|Learning resources" data-analytics-text="Hybrid cloud learning hub" >Hybrid cloud learning hub</a><li class="pfe-link-list--group-item"><a href="/en/interactive-labs" data-analytics-category="All Red Hat|Learning resources" data-analytics-text="Interactive labs" >Interactive labs</a><li class="pfe-link-list--group-item"><a href="https://learn.redhat.com/" data-analytics-category="All Red Hat|Learning resources" data-analytics-text="Learning community" >Learning community</a><li class="pfe-link-list--group-item"><a href="https://tv.redhat.com" data-analytics-category="All Red Hat|Learning resources" data-analytics-text="Red Hat TV" >Red Hat TV</a></ul></div></div><div class="pfe-navigation--column"><div class="pfe-link-list"><div class="pfe-link-list--header"><span class="link-header nolink" >Open source communities</span></div><ul class="pfe-link-list--group"><li class="pfe-link-list--group-item"><a href="https://www.ansible.com/community" data-analytics-category="All Red Hat|Open source communities" data-analytics-text="Ansible" >Ansible</a><li class="pfe-link-list--group-item"><a href="https://access.redhat.com/accelerators" data-analytics-category="All Red Hat|Open source communities" data-analytics-text="Global advocacy" >Global advocacy</a><li class="pfe-link-list--group-item"><a href="/en/about/our-community-contributions" data-analytics-category="All Red Hat|Open source communities" data-analytics-text="How we contribute" >How we contribute</a></ul></div></div></div><div slot="secondary-links" class="for-you hidden-at-mobile"><button class="pfe-navigation__secondary-link" data-analytics-category="For you" data-analytics-text="For you"><pfe-icon icon="rh-icon-paper-lined" aria-hidden="true"></pfe-icon> For you <span class="newitem-dot visually-hidden"><span class="visually-hidden">New</span></span></button><pfe-navigation-dropdown dropdown-width="single"><h3 data-analytics-category="For you" data-analytics-text="Recommendations">Recommendations</h3><div class="at" id="for-you-mbox"><div class="one-column"><div class="dx-relative content-region"><p>As you browse redhat.com, we'll recommend resources you may like. For now, try these.</p><hr><ul><li><a href="/en/technologies/all-products" data-analytics-category="For you" data-analytics-level="3" data-analytics-text="All Red Hat products">All Red Hat products</a></li><li><a href="/en/topics" data-analytics-category="For you" data-analytics-level="3" data-analytics-text="Tech topics">Tech topics</a></li><li><a href="/en/resources" data-analytics-category="For you" data-analytics-level="3" data-analytics-text="Red Hat resources">Red Hat resources</a></li></ul></div></div></div><button class="for-you-close"><img src="https://static.redhat.com/libs/redhat/rh-iconfont/latest/svg/web-icon-close.svg" alt="close"></button></pfe-navigation-dropdown></div><script>window.appEventData=window.appEventData||[];window.appEventData.push({event:"Inline Mbox Rendered",targetInlineMbox:{latest_inline_mbox:{name:"for-you-mbox",selector:"#for-you-mbox"},},__adobe:{target:{"lang":document.documentElement.lang,"taxonomyTopic":window._rhTarget?.util?.arrayToString(pageData?.taxonomyTopic),"taxonomyProduct":window._rhTarget?.util?.arrayToString(pageData?.taxonomyProduct),"taxonomyPrimaryProduct":document.querySelector('meta[name="taxonomy-primary-product-tid"]')?.content||"","taxonomySubType":window._rhTarget?.util?.arrayToString(pageData?.taxonomySubType),"taxonomyChallenge":window._rhTarget?.util?.arrayToString(pageData?.taxonomyChallenge)}}})</script><div slot="secondary-links"><div class="hidden-at-desktop hidden-at-tablet buttons"><a href="https://access.redhat.com/" data-analytics-category="More Red Hat" data-analytics-text="Support" class="" >Support</a><a href="https://docs.redhat.com/en" data-analytics-category="More Red Hat" data-analytics-text="Documentation" class="" >Documentation</a><a href="https://cloud.redhat.com/" data-analytics-category="More Red Hat" data-analytics-text="Console" class="" >Console</a><a href="https://developers.redhat.com/" data-analytics-category="More Red Hat" data-analytics-text="Developers" class="" >Developers</a><a href="/en/products/trials" data-analytics-category="More Red Hat" data-analytics-text="Start a trial" class="" >Start a trial</a><a href="/en/contact" data-analytics-category="More Red Hat" data-analytics-text="Contact" >Contact</a></div><div class="hidden-at-desktop hidden-at-tablet mobile-lang-select"><label for="lang_selection">Select a language</label><select id="lang_selection"><option value="/zh/about/brand/standards/typography">简体中文</option><option value="/en/about/brand/standards/typography" selected>English</option><option value="/fr/about/brand/standards/typography">Français</option><option value="/de/about/brand/standards/typography">Deutsch</option><option value="/it/about/brand/standards/typography">Italiano</option><option value="/ja/about/brand/standards/typography">日本語</option><option value="/ko/about/brand/standards/typography">한국어</option><option value="/pt-br/about/brand/standards/typography">Português</option><option value="/es/about/brand/standards/typography">Español</option></select></div><a href="/en/contact" data-analytics-text="contact" class="hidden-at-mobile"><pfe-icon icon="local-talk-bubble" pfe-size="md" aria-hidden="true"></pfe-icon> Contact us </a></div><div slot="secondary-links" id="utility-globe" class="hidden-at-mobile"><button class="pfe-navigation__secondary-link" data-analytics-text="English"><pfe-icon icon="web-globe" size="sm" aria-hidden="true"></pfe-icon> English </button><pfe-navigation-dropdown dropdown-width="full"><div class="pfe-navigation-item__tray--container"><div class="language-picker hidden-at-mobile"><h3 class="pfe-headline-2" data-analytics-category="English" data-analytics-text="Select a language">Select a language</h3><ul><li><a href="/zh/about/brand/standards/typography" class="language-link" xml:lang="zh" hreflang="zh" data-analytics-category="Language" data-analytics-text="Chinese">简体中文</a></li><li><a href="/en/about/brand/standards/typography" class="language-link" xml:lang="en" hreflang="en" data-analytics-category="Language" data-analytics-text="English">English</a></li><li><a href="/fr/about/brand/standards/typography" class="language-link" xml:lang="fr" hreflang="fr" data-analytics-category="Language" data-analytics-text="French">Français</a></li><li><a href="/de/about/brand/standards/typography" class="language-link" xml:lang="de" hreflang="de" data-analytics-category="Language" data-analytics-text="German">Deutsch</a></li><li><a href="/it/about/brand/standards/typography" class="language-link" xml:lang="it" hreflang="it" data-analytics-category="Language" data-analytics-text="Italian">Italiano</a></li><li><a href="/ja/about/brand/standards/typography" class="language-link" xml:lang="ja" hreflang="ja" data-analytics-category="Language" data-analytics-text="Japanese">日本語</a></li><li><a href="/ko/about/brand/standards/typography" class="language-link" xml:lang="ko" hreflang="ko" data-analytics-category="Language" data-analytics-text="Korean">한국어</a></li><li><a href="/pt-br/about/brand/standards/typography" class="language-link" xml:lang="pt-br" hreflang="pt-br" data-analytics-category="Language" data-analytics-text="Portuguese">Português</a></li><li><a href="/es/about/brand/standards/typography" class="language-link" xml:lang="es" hreflang="es" data-analytics-category="Language" data-analytics-text="Spanish">Español</a></li></ul></div></div></pfe-navigation-dropdown></div><template><div class="hidden-at-desktop hidden-at-tablet mobile-lang-select"><label for="lang_selection" >Select a language</label><select id="lang_selection"><option value="/zh/about/brand/standards/typography">简体中文</option><option value="/en/about/brand/standards/typography" selected>English</option><option value="/fr/about/brand/standards/typography">Français</option><option value="/de/about/brand/standards/typography">Deutsch</option><option value="/it/about/brand/standards/typography">Italiano</option><option value="/ja/about/brand/standards/typography">日本語</option><option value="/ko/about/brand/standards/typography">한국어</option><option value="/pt-br/about/brand/standards/typography">Português</option><option value="/es/about/brand/standards/typography">Español</option></select></div></template><form slot="search" class="search-form rhb-search-tray--form" autocomplete="off" action="https://www.redhat.com/en/search/node" method="post" id="rhdc_search_form" accept-charset="UTF-8"><div><div class="form-wrapper" id="edit-basic"><div class="form-item form-type-textfield form-item-search-field"><input maxlength="128" size="15" placeholder="What are you looking for?" type="text" data-drupal-selector="edit-search-field" id="edit-search-field" name="search_field" value="" class="form-text" aria-label="Search"></div><div class="form-actions form-wrapper" id="edit-actions"><input type="submit" data-drupal-selector="edit-submit" id="edit-submit" name="op" value="Search" class="form-submit rhb-search-tray--submit" data-analytics-linktype="cta" data-analytics-text="Search" data-analytics-category="Search"></div></div></div></form><rh-account-dropdown slot="account" lang="en" login-link="https://sso.redhat.com" ></rh-account-dropdown></pfe-navigation><nav class="pfe-nav-light-dom"><img src="/themes/custom/rh_base_ui/dist/img/talk-bubble.svg" alt="" style="display: none" /><img src="https://static.redhat.com/libs/redhat/rh-iconfont/4/svg/web-icon-globe.svg" alt="" style="display: none" /><img src="https://static.redhat.com/libs/redhat/rh-iconfont/4/svg/web-icon-user.svg" alt="" style="display: none" /><img src="https://static.redhat.com/libs/redhat/rh-iconfont/4/svg/web-icon-search.svg" alt="" style="display: none" /><div class="pfe-nav-light-dom__logo"><a href="/en" class="pfe-nav-light-dom__logo-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613 145" class="redhat-logo" style="margin:0; width: 135px; display:block" height="32" width="135" role="img"><title>Red Hat</title><path d="M127.47 83.49c12.51 0 30.61-2.58 30.61-17.46a14 14 0 0 0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89 8.69 103.76.5 97.51.5 91.69.5 90 8 83.06 8c-6.68 0-11.64-5.6-17.89-5.6-6 0-9.91 4.09-12.93 12.5 0 0-8.41 23.72-9.49 27.16a6.43 6.43 0 0 0-.22 1.94c0 9.22 36.3 39.45 84.94 39.45M160 72.07c1.73 8.19 1.73 9.05 1.73 10.13 0 14-15.74 21.77-36.43 21.77-46.76.03-87.72-27.37-87.72-45.48a18.45 18.45 0 0 1 1.51-7.33C22.27 52 .5 55 .5 74.22c0 31.48 74.59 70.28 133.65 70.28 45.28 0 56.7-20.48 56.7-36.65 0-12.72-11-27.16-30.83-35.78" fill="#e00"/><path d="M160 72.07c1.73 8.19 1.73 9.05 1.73 10.13 0 14-15.74 21.77-36.43 21.77-46.76.03-87.72-27.37-87.72-45.48a18.45 18.45 0 0 1 1.51-7.33l3.66-9.06a6.43 6.43 0 0 0-.22 1.9c0 9.22 36.3 39.45 84.94 39.45 12.51 0 30.61-2.58 30.61-17.46a14 14 0 0 0-.31-3.42Z"/><path d="M579.74 92.8c0 11.89 7.15 17.67 20.19 17.67a52.11 52.11 0 0 0 11.89-1.68V95a24.84 24.84 0 0 1-7.68 1.16c-5.37 0-7.36-1.68-7.36-6.73V68.3h15.56V54.1h-15.56v-18l-17 3.68V54.1h-11.29v14.2h11.25Zm-53 .32c0-3.68 3.69-5.47 9.26-5.47a43.12 43.12 0 0 1 10.1 1.26v7.15a21.51 21.51 0 0 1-10.63 2.63c-5.46 0-8.73-2.1-8.73-5.57m5.2 17.56c6 0 10.84-1.26 15.36-4.31v3.37h16.82V74.08c0-13.56-9.14-21-24.39-21-8.52 0-16.94 2-26 6.1l6.1 12.52c6.52-2.74 12-4.42 16.83-4.42 7 0 10.62 2.73 10.62 8.31v2.73a49.53 49.53 0 0 0-12.62-1.58c-14.31 0-22.93 6-22.93 16.73 0 9.78 7.78 17.24 20.19 17.24m-92.44-.94h18.09V80.92h30.29v28.82H506V36.12h-18.07v28.29h-30.29V36.12h-18.09Zm-68.86-27.9c0-8 6.31-14.1 14.62-14.1A17.22 17.22 0 0 1 397 72.09v19.45A16.36 16.36 0 0 1 385.24 96c-8.2 0-14.62-6.1-14.62-14.09m26.61 27.87h16.83V32.44l-17 3.68v20.93a28.3 28.3 0 0 0-14.2-3.68c-16.19 0-28.92 12.51-28.92 28.5a28.25 28.25 0 0 0 28.4 28.6 25.12 25.12 0 0 0 14.93-4.83ZM320 67c5.36 0 9.88 3.47 11.67 8.83h-23.2C310.15 70.3 314.36 67 320 67m-28.67 15c0 16.2 13.25 28.82 30.28 28.82 9.36 0 16.2-2.53 23.25-8.42l-11.26-10c-2.63 2.74-6.52 4.21-11.14 4.21a14.39 14.39 0 0 1-13.68-8.83h39.65v-4.23c0-17.67-11.88-30.39-28.08-30.39a28.57 28.57 0 0 0-29 28.81M262 51.58c6 0 9.36 3.78 9.36 8.31S268 68.2 262 68.2h-17.89V51.58Zm-36 58.16h18.09V82.92h13.77l13.89 26.82H292l-16.2-29.45a22.27 22.27 0 0 0 13.88-20.72c0-13.25-10.41-23.45-26-23.45H226Z" fill="#fff"/></svg></a></div><ul class="pfe-nav-light-dom__primary"><li><a href="https://www.redhat.com/en/technologies/all-products">Products</a></li><li><a href="https://www.redhat.com/en/solutions">Solutions</a></li><li><a href="https://www.redhat.com/en/services">Training & services</a></li><li><a href="https://www.redhat.com/en/resources">Resources</a></li><li><a href="">Partners</a></li><li><a href="https://www.redhat.com/en/about">About</a></li></ul><div class="pfe-nav-light-dom__secondary"><a class="pfe-nav-light-dom__secondary-link pfe-nav-light-dom__burger" href="#mobile-menu"><div class="pfe-nav-light-dom__burger-icon"></div><span class="pfe-nav-light-dom__mobile-text">Menu</span></a><a class="pfe-nav-light-dom__secondary-link display-at-desktop" href="/en/search"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" class="white-fill" width="18" height="18"><path d="M15.85 15.153l-5.13-5.13a5.51 5.51 0 1 0-.708.708l5.13 5.13a.507.507 0 0 0 .707 0 .5.5 0 0 0 0-.707zM6.5 11.007a4.5 4.5 0 1 1 4.5-4.5 4.505 4.505 0 0 1-4.5 4.5z"/></svg> Search </a><a class="pfe-nav-light-dom__secondary-link display-at-desktop"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="white-fill" width="28" height="28"><path d="M26.75 29V7a.75.75 0 0 0-.75-.73H14a.63.63 0 0 0-.19 0h-.07a.66.66 0 0 0-.22.15l-4 4a.86.86 0 0 0-.15.22.64.64 0 0 0 0 .07.58.58 0 0 0 0 .19V29a.76.76 0 0 0 .75.75H26a.76.76 0 0 0 .75-.75zM13.25 8.83v1.44h-1.44zm12 19.44h-14.5v-16.5H14a.76.76 0 0 0 .75-.75V7.77h10.5z"/><path d="M12.25 14a.76.76 0 0 0 .75.75h5a.75.75 0 0 0 0-1.5h-5a.75.75 0 0 0-.75.75zM12.25 17a.76.76 0 0 0 .75.75h10a.75.75 0 0 0 0-1.5H13a.75.75 0 0 0-.75.75zM23 19.27H13a.75.75 0 1 0 0 1.5h10a.75.75 0 0 0 0-1.5zM23 22.27H13a.75.75 0 1 0 0 1.5h10a.75.75 0 0 0 0-1.5z"/></svg> For you </a><a class="pfe-nav-light-dom__secondary-link display-at-desktop" href="/en/contact" data-analytics-text="contact"><svg viewBox="0 0 29 29" width="18" height="18" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="10"><path fill="none" d="M0 0h29v29H0z"/><path d="M31.7 23.1H14.8c-.2 0-.4.1-.5.2l-5.2 5.2v-4.7c0-.2-.1-.4-.2-.5-.1-.1-.3-.2-.5-.2H4.3V6.5h27.4v16.6Z" fill="none" stroke="#fff" stroke-width="1.4" transform="matrix(1 0 0 1 -3.507 -.472)"/></svg> Contact us </a><a class="pfe-nav-light-dom__secondary-link display-at-desktop" href="#switch-language"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" class="white-fill" width="18" height="18"><path d="M8.5 1A7.5 7.5 0 1 0 16 8.5 7.508 7.508 0 0 0 8.5 1zm0 13.73a9.636 9.636 0 0 1-1.94-3.723h3.88A9.647 9.647 0 0 1 8.5 14.73zm-2.148-4.723a9.688 9.688 0 0 1 0-3.007h4.3a9.75 9.75 0 0 1 0 3.007zM2 8.5A6.45 6.45 0 0 1 2.182 7h3.153a10.74 10.74 0 0 0 0 3.007H2.182A6.515 6.515 0 0 1 2 8.5zM10.442 6H6.557A9.636 9.636 0 0 1 8.5 2.268 9.625 9.625 0 0 1 10.442 6zm1.222 1h3.154a6.268 6.268 0 0 1 0 3.007h-3.155a10.78 10.78 0 0 0 0-3.007zM14.5 6h-3.026a10.62 10.62 0 0 0-1.82-3.89A6.513 6.513 0 0 1 14.5 6zM7.34 2.11A10.61 10.61 0 0 0 5.525 6H2.5a6.52 6.52 0 0 1 4.84-3.89zM2.5 11.006h3.028a10.6 10.6 0 0 0 1.82 3.887A6.5 6.5 0 0 1 2.5 11.007zm7.153 3.884a10.6 10.6 0 0 0 1.82-3.883H14.5a6.518 6.518 0 0 1-4.847 3.884z"/></svg> English </a><a class="pfe-nav-light-dom__secondary-link" href="https://sso.redhat.com/auth/realms/redhat-external/protocol/saml/clients/legacy-idp-servlets"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" class="white-fill" width="18" height="18"><path d="M10.7 8.343a4 4 0 1 0-4.4 0A7.51 7.51 0 0 0 1 15.507a.5.5 0 1 0 1 0 6.5 6.5 0 1 1 13 0 .5.5 0 1 0 1 0 7.51 7.51 0 0 0-5.3-7.164zM5.5 5.007a3 3 0 1 1 3 3 3 3 0 0 1-3-3z"/></svg> Log in </a></div></nav><ul class="pfe-nav-light-dom-mobile-menu" id="mobile-menu"><li class="pfe-nav-light-dom-mobile-menu__item"><a class="pfe-nav-light-dom-mobile-menu__link" href="https://www.redhat.com/en/technologies/all-products">Products</a></li><li class="pfe-nav-light-dom-mobile-menu__item"><a class="pfe-nav-light-dom-mobile-menu__link" href="https://www.redhat.com/en/solutions">Solutions</a></li><li class="pfe-nav-light-dom-mobile-menu__item"><a class="pfe-nav-light-dom-mobile-menu__link" href="https://www.redhat.com/en/services">Training & services</a></li><li class="pfe-nav-light-dom-mobile-menu__item"><a class="pfe-nav-light-dom-mobile-menu__link" href="https://www.redhat.com/en/resources">Resources</a></li><li class="pfe-nav-light-dom-mobile-menu__item"><a class="pfe-nav-light-dom-mobile-menu__link" href="">Partners</a></li><li class="pfe-nav-light-dom-mobile-menu__item"><a class="pfe-nav-light-dom-mobile-menu__link" href="https://www.redhat.com/en/about">About</a></li><li class="pfe-nav-light-dom-mobile-menu__item"><a class="pfe-nav-light-dom-mobile-menu__link" href="/en/contact">Contact us</a></li></ul><div class="pfe-nav-light-dom-switcher" id="switch-language"><div class="language-picker hidden-at-mobile"><h3 class="pfe-headline-2" data-analytics-category="English" data-analytics-text="Select a language">Select a language</h3><ul><li><a href="/zh/about/brand/standards/typography" class="language-link" xml:lang="zh" hreflang="zh" data-analytics-category="Language" data-analytics-text="Chinese">简体中文</a></li><li><a href="/en/about/brand/standards/typography" class="language-link" xml:lang="en" hreflang="en" data-analytics-category="Language" data-analytics-text="English">English</a></li><li><a href="/fr/about/brand/standards/typography" class="language-link" xml:lang="fr" hreflang="fr" data-analytics-category="Language" data-analytics-text="French">Français</a></li><li><a href="/de/about/brand/standards/typography" class="language-link" xml:lang="de" hreflang="de" data-analytics-category="Language" data-analytics-text="German">Deutsch</a></li><li><a href="/it/about/brand/standards/typography" class="language-link" xml:lang="it" hreflang="it" data-analytics-category="Language" data-analytics-text="Italian">Italiano</a></li><li><a href="/ja/about/brand/standards/typography" class="language-link" xml:lang="ja" hreflang="ja" data-analytics-category="Language" data-analytics-text="Japanese">日本語</a></li><li><a href="/ko/about/brand/standards/typography" class="language-link" xml:lang="ko" hreflang="ko" data-analytics-category="Language" data-analytics-text="Korean">한국어</a></li><li><a href="/pt-br/about/brand/standards/typography" class="language-link" xml:lang="pt-br" hreflang="pt-br" data-analytics-category="Language" data-analytics-text="Portuguese">Português</a></li><li><a href="/es/about/brand/standards/typography" class="language-link" xml:lang="es" hreflang="es" data-analytics-category="Language" data-analytics-text="Spanish">Español</a></li></ul></div></div><div class="rhb-region rhb-region--highlighted"><div data-drupal-messages-fallback class="hidden"></div></div> <div class="rhdc-header--background-image"></div> <div class="rhb-region rhb-region--content" id="rhb-main-content" role="main"> <article> <div> <div class="one-column"> <div class="dx-relative content-region">  <div class="one-column"> <div class="dx-relative content-region"> <div id="secondary-nav-component-container"> <rh-navigation-secondary id="secondary-nav-component" role="navigation" data-analytics-region="secondary-navigation-brand-standards"> <a href="/en/about/brand/standards" title="Red Hat brand standards" data-analytics-text="Brand standards" data-analytics-category="Brand standards nav" slot="logo">Brand standards</a> <ul slot="nav">  <li> <rh-navigation-secondary-dropdown> <a href="#" data-analytics-text="Foundations" data-analytics-category="Brand Standards nav" slot="link">Foundations</a> <rh-navigation-secondary-menu slot="menu"> <rh-navigation-secondary-menu-section> <ul slot="links"> <li> <a href="/en/about/brand/standards/history" data-analytics-text="Brand history" data-analytics-category="Brand Standards nav|Foundations">History</a> </li> <li> <a href="/en/about/brand/standards/platform" data-analytics-text="Brand platform" data-analytics-category="Brand Standards nav|Foundations">Brand platform</a> <rh-tag color="purple">New</rh-tag> </li> <li> <a href="/en/about/brand/standards/personality" data-analytics-text="Brand personality" data-analytics-category="Brand Standards nav|Foundations">Brand personality</a> <rh-tag color="purple">New</rh-tag> </li> <li> <a href="/en/about/brand/standards/the-hat" data-analytics-text="The hat" data-analytics-category="Brand Standards nav|Logos">The hat</a> <rh-tag color="purple">New</rh-tag> </li> <li> <a href="/en/about/brand/standards/naming-and-trademarks" data-analytics-text="Naming and trademarks" data-analytics-category="Brand Standards nav|Foundations">Naming and trademarks</a> <rh-tag color="purple">New</rh-tag> </li> <li> <a href="/en/about/brand/standards/red-hat-and-ibm-logos" data-analytics-text="Red Hat and IBM" data-analytics-category="Brand Standards nav|Foundations">Red Hat and IBM</a> </li> </ul> </rh-navigation-secondary-menu-section> </rh-navigation-secondary-menu> </rh-navigation-secondary-dropdown> </li>  <li> <rh-navigation-secondary-dropdown> <a href="#" data-analytics-text="Logos" data-analytics-category="Brand Standards nav" slot="link">Logos</a> <rh-navigation-secondary-menu slot="menu"> <ul> <li> <a href="/en/about/brand/standards/logo" data-analytics-text="Red Hat logo" data-analytics-category="Brand Standards nav|Logos">Red Hat logo</a> </li> <li> <a href="/en/about/brand/standards/product-logos" data-analytics-text="Product logos" data-analytics-category="Brand Standards nav|Logos">Product logos</a> </li> <li> <a href="/en/about/brand/standards/universal-logos" data-analytics-text="Universal logos" data-analytics-category="Brand Standards nav|Logos">Universal logos</a> </li> <li> <a href="/en/redhat.com/about/brand/standards/initiative-logos" data-analytics-text="Initiative logos" data-analytics-category="Brand Standards nav|Logos">Initiative logos</a> </li> <li> <a href="/en/about/brand/standards/summit-logo" data-analytics-text="Red Hat Summmit logo" data-analytics-category="Brand Standards nav|Logos">Red Hat Summit logo</a> </li> </ul> <ul> <li> <a href="/en/about/brand/standards/endorsement-logos" data-analytics-text="Endorsement logos" data-analytics-category="Brand Standards nav|Logos">Endorsement logos</a> </li> <li> <a href="/en/about/brand/standards/co-branding/red-hat-led" data-analytics-text="Co-branding" data-analytics-category="Brand Standards nav|Logos">Co-branding</a> </li> <li> <a href="/en/about/brand/standards/technical-partner-buttons" data-analytics-text="Technical partner buttons" data-analytics-category="Brand Standards nav|Logos">Technical partner buttons</a> </li> <li> <a href="/en/about/brand/standards/digital-badges" data-analytics-text="Digital badges" data-analytics-category="Brand Standards nav|Logos">Digital badges</a> </li> </ul> </rh-navigation-secondary-menu> </rh-navigation-secondary-dropdown> </li>  <li> <rh-navigation-secondary-dropdown> <a href="#" data-analytics-category="Brand Standards nav" data-analytics-text="Design language" slot="link">Design language</a> <rh-navigation-secondary-menu slot="menu"> <ul> <li> <a href="/en/about/brand/standards/color" data-analytics-text="Color" data-analytics-category="Brand Standards nav|Design language">Color</a> </li> <li> <a href="/en/about/brand/standards/typography" data-analytics-text="Typography" data-analytics-category="Brand Standards nav|Design language">Fonts and typography</a> <rh-tag color="purple">New</rh-tag> </li> <li> <a href="/en/about/brand/standards/photography" data-analytics-text="Photography" data-analytics-category="Brand Standards nav|Design language">Photography</a> </li> <li> <a href="/en/about/brand/standards/illustration" data-analytics-text="Illustration" data-analytics-category="Brand Standards nav|Design language">Illustration</a> </ul> <ul> </li> <li> <a href="/en/about/brand/standards/icons/standard-icons" data-analytics-text="Icons" data-analytics-category="Brand Standards nav|Design language">Icons</a> </li> <li> <a href="/en/about/brand/standards/icons/technology-icons" data-analytics-text="Technology icons" data-analytics-category="Brand Standards nav|Design language">Technology icons</a> </li> <li> <a href="/en/about/brand/standards/icons/ui-icons" data-analytics-text="UI icons" data-analytics-category="Brand Standards nav|Design language">UI Icons</a> </li> </ul> </rh-navigation-secondary-menu> </rh-navigation-secondary-dropdown> </li>  <li> <rh-navigation-secondary-dropdown> <a href="#" slot="link" data-analytics-category="Brand Standards nav" data-analytics-text="Handbooks">Handbooks</a> <rh-navigation-secondary-menu slot="menu"> <ul> <li> <a href="/en/about/brand/standards/handbooks/DEI-Community-handbook" data-analytics-text="DEI Community handbook" data-analytics-category="Brand Standards nav|Logos">DEI Community handbook</a> <rh-tag color="purple">New</rh-tag> </li> <li> <a href="/en/about/brand/standards/handbooks/partners/partner-led" data-analytics-text="Partner handbook" data-analytics-category="Brand Standards nav|Handbooks">Partner handbook</a> </li> <li> <a href="/en/about/brand/standards/handbooks/product-branding-handbook" data-analytics-text="Product branding handbook" data-analytics-category="Brand Standards nav|Handbooks">Product branding handbook</a> <rh-tag color="purple">New</rh-tag> </li> <li> <a href="/en/about/brand/standards/handbooks/red-hat-marketplace" data-analytics-text="Red Hat Marketplace handbook" data-analytics-category="Brand Standards nav|Handbooks">Red Hat Marketplace handbook</a> </li> </ul> </rh-navigation-secondary-menu> </rh-navigation-secondary-dropdown> </li>  <li> <rh-navigation-secondary-dropdown> <a href="#" slot="link" data-analytics-category="Brand Standards nav" data-analytics-text="Templates and resources">Templates and resources</a> <rh-navigation-secondary-menu slot="menu"> <ul> <li> <a href="/en/about/brand/standards/templates" data-analytics-text="Templates" data-analytics-category="Brand Standards nav|Templates and resources">Templates</a> </li> <li> <a href="/en/about/brand/standards/additional-resources" data-analytics-text="Additional resources" data-analytics-category="Brand Standards nav|Templates and resources">Additional resources</a> </li> <li> <a href="https://ux.redhat.com/" data-analytics-text="ux.redhat.com" data-analytics-category="Brand Standards nav|Templates and resources">Digital design system</a> <rh-tag color="blue">External link</rh-tag> </li> <li> <a href="https://www.patternfly.org" data-analytics-text="PatternFly" data-analytics-category="Brand Standards nav|Templates and resources">PatternFly</a> <rh-tag color="blue">External link</rh-tag> </li> </ul> </rh-navigation-secondary-menu> </rh-navigation-secondary-dropdown> </li>  <li> <a class="dx-border-t-3" href="https://www.redhat.com/en/about/brand/standards/whats-new" data-analytics-text="What's new" data-analytics-category="Brand Standards nav|What's new" > What's new </a> </li> </ul> </ul> </rh-navigation-secondary> </div>  </div> </div> </div> </div> <section class="dx-pt-10 dx-pb-6" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h1><strong>Fonts and typography</strong></h1><p dir="ltr">The fonts we use and the way we apply them affect the way our audience perceives our brand just as much as the words that we write. To make our words unmistakably Red Hat, we use the Red Hat® font family—with straightforward and approachable typography.</p> </div> </div> </div> </div> </div> </div> </section> <section class="dx-pt-8 dx-pb-8" section-properties-enabled> <div class="dx-container"> <div class="dx-row"> <rh-tabs class="dx-col-12" box="box"> <rh-tab slot="tab">Font family</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="font-family"> <section class="dx-pt-8 dx-pb-8" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--component" data-rh-align=left ><h2 class="rh-band-header-subsection-headline" >Font family</h2> </div>  <div class="rh-generic--component" data-rh-align="left" > <p>Launched as part of the Open Brand Project in 2019, our font family was created for Red Hat in collaboration with type designer <a href="https://mckltype.com/">Jeremy Mickel</a>. The family includes 3 fonts: Red Hat Display, Red Hat Text, and Red Hat Mono. Their design is based on who we are: real people with big ideas creating platforms that power technology innovation.</p><p>We’re committed to making the things that we create available to everyone. Just like our software, our fonts are open source. They’re free for anyone to download and use under the SIL International license.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="2x-large" > </div> </div> <div class="dx-col-12 md:dx-col-12 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3 style="color:#ee0000;">Red Hat Display</h3> </div> </div> </div>   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Red_Hat_Display-Diagram.svg" alt="A diagram highlights the unique features of Red Hat Display font letterforms. Highlighted features include wide letters, tall x-height, open apertures, even strokes, a 12º angle on ascenders, and natural curves." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p dir="ltr">Our default font—and the one used in our logo—is Red Hat Display. Geometric, sans serif letterforms with even strokes reinforce our <a href="https://www.redhat.com/en/about/brand/standards/personality">tone of voice</a> and reflect our technical expertise and engineering. Meanwhile, human touches—like curved details, tapered links, and angled ascenders—disrupt the rigidity to represent our people and call back to our brand’s history.</p><p dir="ltr">We use Red Hat Display at large sizes or in bold (or both) to grab attention. If you’re not sure which font to use, default to Display.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="3x-large" > </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3 style="color:#ee0000;">Red Hat Text</h3> </div> </div> </div>   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Red_Hat_Text_0.svg" alt="Various weights of Red Hat Text." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="medium" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p dir="ltr">Red Hat Text takes all of the personality from Display and optimizes it for more demanding applications. As the name implies, it’s easier to read in paragraphs or when text is used at small sizes—like in a whitepaper or tooltip.</p><p dir="ltr">To increase readability, Text has more height difference between the upper- and lowercase letters, more space between narrow characters, and more variation in letterform stroke weights.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3 style="color:#ee0000;">Red Hat Mono</h3> </div> </div> </div>   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Red_Hat_Mono_0.svg" alt="Various weights of Red Hat Mono." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="medium" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p dir="ltr">Red Hat Mono was created to distinguish code from natural-language text. Mono stands for monospaced, meaning each letter takes up the same amount of horizontal space. This creates neat columns of text and makes scanning code easier.</p><p>Mono should only be used when demonstrating code snippets in communications and interfaces, or as a stylistic approach for a more technical audience like the <a href="https://developers.redhat.com/">Red Hat Developer Program</a> or the <a href="https://www.redhat.com/en/code-comments-podcast">Code Comments podcast</a>.</p> </div> </div> </div> </div> </div> </div> </section> <section class="dx-pt-8 dx-pb-8" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row dx-items-center "> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Type-Noto.svg" alt="An example of Noto Sans in simplified Chinese." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3 style="color:#ee0000;">Non-Latin character sets</h3><p>The Red Hat font family supports the extended Latin character set. For languages that use other character sets—like Chinese, Japanese, Korean, and Cyrillic—use <a href="https://fonts.google.com/?query=Noto+Sans">the Noto Sans font family</a>.</p><p>Noto is an open licensed font from Google Developed to support all languages without the little boxes—known as tofu—that show up when a font doesn’t support a character. The simple, clean design makes it a good counterpart to the Red Hat font family.</p> </div> </div> </div> </div> </div> </div> </section> <section class="dx-pt-8 dx-pb-8" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--component" data-rh-align=left ><h2 class="rh-band-header-subsection-headline" >Gallery</h2> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column"> </div> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Gallery-1.jpg" alt="A screenshot shows the Red Hat solutions homepage featuring a large, prominent headline." height="904" width="1368" loading="lazy" > </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Gallery-2.svg" alt="A social media post for Developer Sandbox for Red Hat OpenShift uses Red Hat Mono font." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="x-large" > </div>   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Gallery-3.jpg" alt="A photo shows a large display of the Red Hat brand personality traits on a window at Red Hat Tower." height="716" width="1111" loading="lazy" > </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-The_hat-Kernel_of_truth.svg" alt="A graphic shows the hat used as a mask containing code from the Linux kernel typed in Red Hat Display font. The shape of the mask is the exact trademarked shape from the Red Hat logo." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Gallery-5.jpg" alt="A wall at Red Hat Summit features very large text that reads "Same soul. New hat."" height="718" width="1368" loading="lazy" > </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="dx-pt-8 dx-pb-8" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h2>Other font contributions</h2><p>At Red Hat, our approach to open source extends beyond software: we hope that if we make something that’s useful to us, it can be useful to others. That’s why we’ve contributed a few other open source fonts over the years. We don’t use these fonts as part of the Red Hat brand, but they’re available online for the world to download and use.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column"> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Liberation.svg" alt="Liberation Sans" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="large" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>In the 2000s, adoption of Linux on the desktop was hampered by practical issues, including trouble with fonts when moving between open and proprietary software tools. To solve this, <a href="https://www.redhat.com/en/blog/liberation-fonts">Red Hat worked with type foundry Ascender Corp.</a> in 2007 to release <a href="https://github.com/liberationfonts">Liberation Sans</a> as an open source substitute for popular proprietary fonts like Times New Roman, Arial, and Courier New.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Overpass.svg" alt="Overpass" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="large" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p><a href="https://overpassfont.org/">Overpass</a> was developed by Delve Fonts in 2011 on commission from Red Hat. It’s based on Highway Gothic—the iconic font used since 1945 for roadway signage by the U.S. Federal Highway Administration—but was optimized for screen-based viewing. The font family has been expanded multiple times by various designers since its initial release and now includes 9 weights, true italics, and a monospaced version.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Because%20we%20had%20to.svg" alt="Because We Had To" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="large" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Created in 2018 by designers at Red Hat for an article series of the same name, the <a href="https://github.com/RedHatOfficial/bwht-fonts">Because We Had To</a> font family includes 6 handwritten styles, each representing the women working in open source technology featured in the articles.</p> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Typography</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="typography"> <section class="dx-pt-8 dx-pb-8" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row match-region-heights "> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--component" data-rh-align=left ><h2 class="rh-band-header-subsection-headline" >Typography</h2> </div>  <div class="rh-generic--component" data-rh-align="left" > <p dir="ltr">How we apply our fonts, also known as typography, can be just as impactful as the design of the fonts themselves. We write the way that real people talk, so we use our fonts in a way that reflects that.</p><p dir="ltr">The basics of typography at Red Hat align to our brand personality traits.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern" data-at-card="flex" data-rh-background="white" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3 style="color:#ee0000;">Make it open</h3><p>Highlight the message using white space rather than filling the entire page with text. Use generous margins and consider editing the length of the copy before decreasing margins or font size to fit more.</p><p>Our font family is designed with large, open letterforms, so there’s no need to increase the space between letters (tracking).</p> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern" data-at-card="flex" data-rh-background="white" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3 style="color:#ee0000;">Make it authentic</h3><p>Our words should be real and friendly, so we always type in sentence case rather than title case or all caps (yes, even for headlines).</p><p>We follow a straightforward approach to typography, letting the words speak for themselves with minimal formatting or ornamentation. Lean into how text naturally occurs on screens, because that’s where our audience spends their time.</p> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern" data-at-card="flex" data-rh-background="white" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3 style="color:#ee0000;">Make it helpful</h3><p>We’re consistent with how we apply our fonts across applications so that our audience knows what to expect when they hear from us.</p><p>Being helpful also means making our words accessible to everyone. Make text readable—with comfortable line spacing (leading) and line length—and legible—with appropriate contrast against the background.</p> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern" data-at-card="flex" data-rh-background="white" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3 style="color:#ee0000;">Make it brave</h3><p>Our font has a lot of personality and we like to show it off. We use prominent headlines that grab attention. Make it big, make it bold, or make it both.</p><p>Respect the reader’s time and be confident in what we’re saying. Make the copy concise and compelling, then use type hierarchy to guide the reader through the story.</p> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="dx-pb-12" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row match-region-heights "> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--component" data-rh-align=left data-rh-size=small ><h2 class="rh-band-header-nested-section-headline" >Do these things</h2> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column"> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern " data-at-card="flex" data-rh-background="gray" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/check_mark-fill-card.svg" alt="Check mark" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--hash-offset" data-rh-hash="true"id="use-our-fonts-red-hat-display-text-and-mono"></div><div class="rh-band-header--component" data-rh-align=left ><h3 class="rh-band-header-xs-headline" >Use our fonts: Red Hat Display, Text, and Mono.</h3> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern " data-at-card="flex" data-rh-background="gray" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/check_mark-fill-card.svg" alt="Check mark" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--hash-offset" data-rh-hash="true"id="use-generous-margins-and-a-lot-of-white-space"></div><div class="rh-band-header--component" data-rh-align=left ><h3 class="rh-band-header-xs-headline" >Use generous margins and a lot of white space.</h3> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern " data-at-card="flex" data-rh-background="gray" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/check_mark-fill-card.svg" alt="Check mark" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--hash-offset" data-rh-hash="true"id="use-sentence-case-yes-even-for-headlines"></div><div class="rh-band-header--component" data-rh-align=left ><h3 class="rh-band-header-xs-headline" >Use sentence case (yes, even for headlines).</h3> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern " data-at-card="flex" data-rh-background="gray" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/check_mark-fill-card.svg" alt="Check mark" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--hash-offset" data-rh-hash="true"id="make-sure-text-is-readable-and-legible"></div><div class="rh-band-header--component" data-rh-align=left ><h3 class="rh-band-header-xs-headline" >Make sure text is readable and legible.</h3> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern " data-at-card="flex" data-rh-background="gray" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/check_mark-fill-card.svg" alt="Check mark" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--hash-offset" data-rh-hash="true"id="let-the-words-speak-for-themselves"></div><div class="rh-band-header--component" data-rh-align=left ><h3 class="rh-band-header-xs-headline" >Let the words speak for themselves.</h3> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern " data-at-card="flex" data-rh-background="gray" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/check_mark-fill-card.svg" alt="Check mark" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--hash-offset" data-rh-hash="true"id="grab-attention-by-making-headlines-big-bold-or-both"></div><div class="rh-band-header--component" data-rh-align=left ><h3 class="rh-band-header-xs-headline" >Grab attention by making headlines big, bold, or both.</h3> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="dx-pb-8" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row match-region-heights "> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--component" data-rh-align=left data-rh-size=small ><h2 class="rh-band-header-nested-section-headline" >Avoid these things</h2> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column"> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern " data-at-card="flex" data-rh-background="gray" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/x_mark-fill-card.svg" alt="X mark" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--hash-offset" data-rh-hash="true"id="dont-use-random-fonts"></div><div class="rh-band-header--component" data-rh-align=left ><h3 class="rh-band-header-xs-headline" >Don't use random fonts.</h3> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern " data-at-card="flex" data-rh-background="gray" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/x_mark-fill-card.svg" alt="X mark" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--hash-offset" data-rh-hash="true"id="dont-fill-an-entire-space-with-text-its-overwhelming"></div><div class="rh-band-header--component" data-rh-align=left ><h3 class="rh-band-header-xs-headline" >Don't fill an entire space with text, it's overwhelming.</h3> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern " data-at-card="flex" data-rh-background="gray" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/x_mark-fill-card.svg" alt="X mark" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--hash-offset" data-rh-hash="true"id="never-use-all-caps-its-too-aggressive"></div><div class="rh-band-header--component" data-rh-align=left ><h3 class="rh-band-header-xs-headline" >Never use all caps, it's too aggressive.</h3> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern " data-at-card="flex" data-rh-background="gray" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/x_mark-fill-card.svg" alt="X mark" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--hash-offset" data-rh-hash="true"id="avoid-text-that-lacks-appropriate-contrast"></div><div class="rh-band-header--component" data-rh-align=left ><h3 class="rh-band-header-xs-headline" >Avoid text that lacks appropriate contrast.</h3> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern " data-at-card="flex" data-rh-background="gray" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/x_mark-fill-card.svg" alt="X mark" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--hash-offset" data-rh-hash="true"id="avoid-unnecessary-ornamentation"></div><div class="rh-band-header--component" data-rh-align=left ><h3 class="rh-band-header-xs-headline" >Avoid unnecessary ornamentation.</h3> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern " data-at-card="flex" data-rh-background="gray" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <div class="rh-card-content" data-rh-layout="min-stacked">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/x_mark-fill-card.svg" alt="X mark" height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>   <div class="rh-group--layout" data-at-card="flex" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--hash-offset" data-rh-hash="true"id="dont-increase-or-decrease-text-tracking"></div><div class="rh-band-header--component" data-rh-align=left ><h3 class="rh-band-header-xs-headline" >Don't increase or decrease text tracking.</h3> </div> </div> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-spacer--component" data-rh-vheight="5x-large" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--component" data-rh-align=left data-rh-size=small ><h2 class="rh-band-header-nested-section-headline" >Typography specifics</h2> </div>  <div class="rh-generic--component" data-rh-align="left" > <p>Dive deeper into the specific ways that we apply typography at Red Hat.</p> </div> </div> </div> </div> </div> </div> </section> <section class="dx-pb-6" section-properties-enabled> <div class="dx-container"> <div class="dx-row"> <rh-tabs class="dx-col-12" vertical> <rh-tab slot="tab">Alignment</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="alignment"> <section class="dx-pb-12" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3>Alignment</h3><p dir="ltr">Alignment, sometimes referred to as justification, is the way multiple lines of text are aligned to each other and the elements around them.</p><p dir="ltr">At Red Hat, we use flush left text most of the time, and centered text in places where the text needs to be aligned with other centered elements in a narrow space, like presentations or web cards.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Alignment-1_0.svg" alt="A paragraph of text aligned flush left." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Most text should be flush left.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Alignment-2.svg" alt="A paragraph of text aligned to the center." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Use centered text when necessary, like short headers or captions on a slide or web card.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Alignment-3.svg" alt="A paragraph of text aligned to the right." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Only use flush right text when the context demands it, like a narrow sidebar in collateral.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Alignment-4.svg" alt="Image showing misuse: A paragraph of justified text." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Never justify bodies of text. It leaves awkward gaps and looks outdated.</p> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Case</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="case"> <section class="dx-pb-12" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3>Case</h3><p dir="ltr">Case is the capitalization of letters in text. We want our messaging to be approachable and authentic, so we designed our font to look best in sentence case. Avoid all caps text.</p><p>For guidance on capitalizing specific words, reference the <a href="https://docs.google.com/document/d/1UI2wHjF-9uPEo7Dnt-nugQXuIMQUgTQv_QOUXL1x8zE/edit?usp=sharing">corporate style guide</a> (Red Hat credentials required).</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="medium" > </div> </div> <div class="dx-col-12 md:dx-col-11 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Case-1_0.svg" alt="Example text in sentence case." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Use sentence case, even for titles and headlines.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-11 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Case-2_0.svg" alt="Example text in title case." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Avoid using title case unless you’re referring to a proper noun, like a book title or product name.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-11 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Case-3_0.svg" alt="Image showing misuse: Example text in all caps." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Never use all caps text, even for small labels.</p> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Color</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="color"> <section class="dx-pb-12" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3>Color</h3><p>When applying color to text, legibility is the priority. For that reason, most body copy should be black or white. We often use Red Hat red to draw attention to large headlines or pull quotes, but long paragraphs should never be red.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="medium" > </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Color-1.svg" alt="Image showing red headline and black body copy." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>To draw attention, we often use red for large text like headlines. Use black or white for the rest of the text.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Color-2.svg" alt="Image showing red headline and red body copy." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>In most cases, avoid using a color other than black or white for body copy.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p dir="ltr">Color contrast is measured as a ratio that describes the difference in perceived brightness between the foreground and background color. Low contrast can make text hard or impossible to read.</p><p>Text contrast is important and must be considered in all applications—even internal presentations or pages on The Source. We aim to meet <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum">WCAG 2.1 AA contrast ratio standards</a> meaning that—with a few exceptions—text and images of text should have a 4.5:1 contrast ratio against the background.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Color-3.svg" alt="Image showing adequate color contrast." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Check the contrast of your text with a tool like <a href="https://color.adobe.com/create/color-contrast-analyzer">Adobe Color</a> to make sure that it’s meeting accessibility requirements.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Color-4.svg" alt="Image showing misuse: Image showing inadequate color contrast." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Don’t use text that fails to meet color contrast requirements.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Emphasis</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="emphasis"> <section class="dx-pb-12" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3>Emphasis</h3><p dir="ltr">Emphasis helps important words and phrases stand out, but too much emphasis can be distracting. Emphasize text by making it bold or changing the color, but only use 1 treatment at a time.</p><p dir="ltr">Do not create emphasis using italics, underline, or all caps.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="medium" > </div> </div> <div class="dx-col-12 md:dx-col-12 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Emphasis-1.svg" alt="Image showing proper use of emphasis with bold text." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Use 1 treatment to create emphasis. Choose the most important word or phrase to emphasize.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-12 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Emphasis-2.svg" alt="Image showing improper use of emphasis with multiple bold text." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Avoid overusing emphasis. If everything stands out, nothing does.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-12 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Emphasis-3.svg" alt="Image showing misuse: Image showing improper use of emphasis with different color text, bold text and underlined text.." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Don’t use more than 1 type of emphasis at once. It creates confusion and makes it difficult for the audience to decide what’s most important.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="medium" > </div> </div> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>We emphasize hyperlinks so they clearly stand out from the rest of the text. In most cases, hyperlinks should be blue (<span class="dx-font-mono" style="font-weight:500;">blue-50</span> on light backgrounds and <span class="dx-font-mono" style="font-weight:500;">blue-40</span> on dark backgrounds) and have an underline. For web and product design, refer to the link guidance in the <a href="ux.redhat.com">Red Hat digital design system</a> (web) or <a href="patternfly.org">PatternFly</a> (product).</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-12 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Emphasis-4.svg" alt="Image showing hyperlink that is underlined and blue." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Hierarchy</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="hierarchy"> <section class="dx-pb-12" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3>Hierarchy</h3><p>Good hierarchy is key to telling a story, and there are many ways to create it—spacing, color, text size, and text weight. We use hierarchy to guide the reader through the text in the order that we want them to read it.</p><p>Make headlines big, bold, or both, to capture attention. We also often make headlines red to make them unmistakably Red Hat.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-12 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Hierarchy.svg" alt="A diagram shows good hierarchy, with a large headline, slightly smaller subhead, and small body copy." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Line height</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="line-height"> <section class="dx-pb-12" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3>Line height</h3><p dir="ltr">Line height—also known as leading—is the vertical space between lines of text in the same paragraph. Line heights that are too tight or too loose can make the text difficult to read. Typography at Red Hat should feel open, but we don’t want to impact legibility by overly increasing line heights.</p><p>The line height you should use depends on the application, but the Red Hat font family looks best with line height between 110% (1.1x) and 150% (1.5x) of the font size. <a href="http://patternfly.org">PatternFly</a>, <a href="http://ux.redhat.com">the Red Hat digital design system</a>, and our templates recommend specific line heights for their applications.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Line_height-1.svg" alt="Image showing text with comfortable line height." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>For most text, set the line height to between 120% and 150% (or 1.2x to 1.5x the font size). Prioritize legibility.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Line_height-2.svg" alt="Image showing line height details for large text." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>For large text over 150, decrease the line height to 110% or 1.1x the font size.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Line_height-3.svg" alt="Image showing misuse: Image showing excessive line height." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Never increase the line height to more than 150% or 1.5x times the font size.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Line_height-4.svg" alt="Image showing misuse: Image showing too little line height." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Never use line height less than 110% or 1.1x the font size. It looks awkward.</p> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Line length</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="line-length"> <section class="dx-pb-12" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3>Line length</h3><p dir="ltr">Line length is measured by the number of characters in a single line of text, including spaces. Lines that are too long can be difficult to follow. At the same time, lines shouldn’t be so short that only a few words fit per line.</p><p dir="ltr">Use line lengths between 20 and 100 characters, including spaces. It’s okay—and preferable—to have white space beside the text rather than filling the entire area. This increases readability and makes our layouts feel more open.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="medium" > </div> </div> <div class="dx-col-12 md:dx-col-12 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Line-length-1.svg" alt="Image showing various line lengths." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Use line lengths between 20 and 100 characters, including spaces. It’s okay—and preferable—to have white space beside the text rather than filling the entire area. This increases readability and makes our layouts feel more open.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Appropriate line length for headlines depends on the size of the text. In general, they should be short and broken into multiple lines rather than running across the entire box or page. If a headline needs more than 3 lines, it’s too long.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="medium" > </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Line-length-2.svg" alt="Image showing a headline broken into two lines." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Break headlines into multiple lines when necessary.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Line-length-3.svg" alt="Image showing a headline broken into two lines with a widow." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Whenever possible, avoid breaking a single word in a headline onto its own line and creating a widow.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Line-length-4.svg" alt="Image showing headline on one line spanning the entire width." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Whenever possible, avoid headlines that run the entire length of the text box or width of the page.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Line-length-5.svg" alt="Image showing misuse: Image showing a headline broken into multiple lines." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Avoid headlines that are too short. Ideally, headlines should be around 3/4ths of the length of the text below (depending on font size).</p> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Margins</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="margins"> <section class="dx-pb-12" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3>Margins</h3><p dir="ltr">The margin is the space between text and the edge of the container or nearby objects. We use generous margins for open, approachable layouts. Don’t crowd or fill an entire space with text—find a more concise way to get your point across instead.</p><p dir="ltr">The exact size of the margin depends on the design system and size of the layout. Refer to the appropriate template or design system guidelines for specifics.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Margins-1.svg" alt="Image showing text with large margins." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Use a large margin with lots of white space (even if it's not the color white) for maximum impact.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Margins-2.svg" alt="Image showing misuse: Image showing too much text with small margins." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Never decrease or remove margins to fit more text—it looks awkward and can be hard to read. Be more concise instead.</p> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Pull/block quotes</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="pullblock-quotes"> <section class="dx-pb-12" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3>Pull/block quotes</h3><p>We use several different quote styles. Which style you choose depends on the context and layout, but in general, make sure that a quote looks like a quote.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Quotes-1.svg" alt="Image showing a pull quote in a slide deck." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="medium" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p><strong>In marketing materials </strong></p><p>In places like social media posts or presentation slides, we stylize quotes using the talk bubble icon. Use a hanging indent for the opening quotation mark.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Quotes-2.svg" alt="Image showing a block quote on the web." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="medium" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p><strong>On the web</strong></p><p>Web applications use the blockquote style built into the <a href="https://ux.redhat.com/foundations/typography/usage.html">digital design system</a>, which combines the quote icon and large text. The style is determined by the website code.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>There are other ways that quotes can be stylized, plus some things we should avoid. <a href="https://docs.google.com/presentation/d/1UnWWElHMqvbHZcE06inqaZR4MxAHVRorSaw9ZFvfOL0/edit?usp=sharing">Learn more.</a></p> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Punctuation</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="punctuation"> <section class="dx-pb-12" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3>Punctuation</h3><p>Quotation marks, apostrophes, and primes look similar but mean different things. The Red Hat font family uses slanted marks for quotation marks and apostrophes. Straight vertical marks should be used only to designate feet and inches, and not used interchangeably with quotation marks and apostrophes.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Quotation_marks.svg" alt="Image showing quotation marks." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Question marks</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Apostrophe.svg" alt="Image showing an apostrophe in use." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Apostrophe</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Primes.svg" alt="Image showing primes in use." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Primes (foot and inch marks)</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Hyphens, en dashes, and em dashes also look similar. Hyphens are short dashes that join words together, like “log-in.” En dashes are slightly wider and separate numbers, like “2023–2024.” Em dashes—the widest dashes—are used to indicate a pause or break in a sentence. At Red Hat, we don’t place spaces before or after dashes.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Hyphen.svg" alt="Image showing a hyphen in use." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Hyphen</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-En_dash.svg" alt="Image showing an en dash in use." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>En dash</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Em_dash.svg" alt="Image showing an em dash in use." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Em dash</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Always use the word “and” when there’s space. When space is constrained—in places like UI labels or headlines—replace “and” with an ampersand rather than a plus sign.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Punctuation-1.svg" alt="Image showing when to use an ampersand." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Replace “and” with an ampersand when space is constrained.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Punctuation-2.svg" alt="Image showing misuse: Image showing use of a plus sign." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Don’t replace “and” with a plus sign or any other symbol.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>For more details on punctuation at Red Hat, review <a href="https://docs.google.com/document/d/1UI2wHjF-9uPEo7Dnt-nugQXuIMQUgTQv_QOUXL1x8zE/edit?usp=sharing">the corporate style guide</a>.</p> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Rag, widows, and orphans</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="rag-widows-and-orphans"> <section class="dx-pb-12" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3>Rags, widows, and orphans</h3><p>The rag is the alignment (or lack of alignment) of words along the edge of a body of text. When random lines in a paragraph stick out much farther than others, it can make the text difficult to follow. The rag will never be perfectly straight but we avoid big gaps by adjusting the width of the text box or manually moving words to the next line when needed.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Rag-1.svg" alt="Image showing ideal text rag." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Adjust the width of the text box (when possible) or manually move words to create a rag that's neat, without random lines that stick out.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Rag-2.svg" alt="Image showing misuse: Image showing text with untidy rag." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Avoid rags where random lines stick out much farther than other lines. This is difficult (and annoying) to read.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Widows are single words that appear on their own line at the end of a body of text. Avoid widows by adjusting the width of the text box or by editing the copy.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Widows-1.svg" alt="Image showing a paragraph with no widows." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Make sure that the last line of every paragraph has at least 2 words. Manually adjust the position of words if needed.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Widows-2.svg" alt="Image showing misuse: Image showing paragraph with a widow." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Don’t leave a widow in a paragraph.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Orphans are single lines of text that are separated from the rest of their paragraph. They’re most common when text is split across multiple columns or pages in a document, making it easy to miss the last line of text. Avoid orphans by moving another line to the next column or page.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Orphans-1.svg" alt="Image showing a paragraph with no orphans." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>When paragraphs split across columns or pages, make sure at least 2 lines appear after the split.</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-6 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Orphans-2.svg" alt="Image showing misuse: Image showing a paragraph with an orphan." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Don’t leave an orphan at the top of a column or page. The reader might miss it.</p> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Tracking</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="tracking"> <section class="dx-pb-8" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3 dir="ltr">Tracking</h3><p dir="ltr">Tracking, also known as letter or character spacing, is the horizontal space between all of the letters in a line of text. Tracking that’s too tight or too loose can impact legibility.</p><p dir="ltr">While we want typography at Red Hat to feel open, we don’t want to change the tracking in text for no reason. Our fonts have wide letterforms with open details, so the auto tracking is set to an optimal visual density for legibility.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="medium" > </div> </div> <div class="dx-col-12 md:dx-col-12 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Tracking-1.svg" alt="Image showing proper use of auto tracking." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Use the auto tracking built into the Red Hat fonts.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-12 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Tracking-2.svg" alt="Image showing misuse: Image showing tracked out text." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Never increase the tracking. Our typeface has appropriate tracking built in.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-12 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Tracking-3.svg" alt="Image showing misuse: Image showing narrow tracking." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div>   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>Don’t decrease it either.</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="small" > </div> </div> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <p>In rare cases where text is used at less than 6px—like a boilerplate or in a dashboard—we can increase the tracking to 10 or 20 to maximize legibility.</p> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Variable fonts</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="variable-fonts"> <section class="dx-pb-8" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-10 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3>Variable fonts</h3><p dir="ltr">The variable version of our fonts include weight as a variable option, and are best used on web properties to decrease load times. If your desktop app doesn’t support variable fonts, use the traditional version instead.</p><p dir="ltr">Variable weight are sometimes adjusted via number instead of name. When using variable fonts, stick to the named weights (regular, bold, etc.) for consistency across applications. Don't use weights that aren't part of this set:</p> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="x-large" > </div>   <div class="rh-group--layout" > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="full left-mobile" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-Fonts_and_typography-Variable-1.svg" alt="An image showing Red Hat Display, Red Hat Text and Red Hat Mono variable fonts." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </rh-tab-panel> </rh-tabs> </div> </div> </section> </div> </rh-tab-panel> <rh-tab slot="tab">Download fonts</rh-tab> <rh-tab-panel> <div class="rhpb-region " id="download-fonts"> <section class="dx-pt-8 dx-pb-8" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-band-header--component" data-rh-align=left ><h2 class="rh-band-header-subsection-headline" >Download fonts</h2> </div> </div> </div>  <div class="rh-spacer--component" data-rh-vheight="large" > </div> </div> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3 style="color:#ee0000;">Red Hat font family</h3><p>Red Hatters can find our font family pre-installed on their Red Hat-issued laptop. The fonts are also already available in the apps we use every day including Google Workspace apps and templates, Miro, and creative software like Figma and Adobe Creative Cloud.</p><p>Red Hat fonts are also publicly available online:</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column"> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern" data-rh-card="sections" data-at-card="flex" data-rh-background="white" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <header class="rh-card-header">   <div class="rh-group--layout" data-rh-card-header=image > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-The_hat-Google_Fonts.svg" alt="Google Fonts logo." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div> </header> <footer class="rh-card-footer" data-rh-layout="">  <div class="rh-group--layout" > <div class="rh-group-body" >  <div class="rh-cta-multi-basic--component" data-rh-align="left" data-rh-display="stacked" >   <span class="rh-cta--component" data-rh-cta-type="secondary" > <a class="rh-cta-link" href="https://fonts.google.com/?query=Red+Hat" data-analytics-linkType="cta" data-analytics-text="Google Fonts" >Google Fonts<span aria-hidden="true"><svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><title>Icon-Red_Hat-Directional-A-Black-RGB</title><path d="M29.74 17.95v-.1a.9.9 0 0 0-.03-.086c-.01-.025-.016-.05-.027-.075a.72.72 0 0 0-.148-.223l-3.5-3.5-3.5-3.5a.75.75 0 1 0-1.06 1.06l2.86 2.86 2.86 2.86H7a.75.75 0 0 0 0 1.5h20.19l-2.22 2.223-3.5 3.5a.75.75 0 1 0 1.06 1.06l3.5-3.5 3.5-3.5c.007-.007.01-.016.016-.023a.738.738 0 0 0 .147-.22l.005-.02a.76.76 0 0 0 .045-.236.23.23 0 0 0 .007-.03c0-.017-.008-.032-.01-.05z"/></svg></span></a> </span> </div> </div> </div> </footer> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern" data-rh-card="sections" data-at-card="flex" data-rh-background="white" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <header class="rh-card-header">   <div class="rh-group--layout" data-rh-card-header=image > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-The_hat-GitHub.svg" alt="GitHub logo." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div> </header> <footer class="rh-card-footer" data-rh-layout="">  <div class="rh-group--layout" > <div class="rh-group-body" >  <div class="rh-cta-multi-basic--component" data-rh-align="left" data-rh-display="stacked" >   <span class="rh-cta--component" data-rh-cta-type="secondary" > <a class="rh-cta-link" href="https://github.com/RedHatOfficial/RedHatFont" data-analytics-linkType="cta" data-analytics-text="GitHub" >GitHub<span aria-hidden="true"><svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><title>Icon-Red_Hat-Directional-A-Black-RGB</title><path d="M29.74 17.95v-.1a.9.9 0 0 0-.03-.086c-.01-.025-.016-.05-.027-.075a.72.72 0 0 0-.148-.223l-3.5-3.5-3.5-3.5a.75.75 0 1 0-1.06 1.06l2.86 2.86 2.86 2.86H7a.75.75 0 0 0 0 1.5h20.19l-2.22 2.223-3.5 3.5a.75.75 0 1 0 1.06 1.06l3.5-3.5 3.5-3.5c.007-.007.01-.016.016-.023a.738.738 0 0 0 .147-.22l.005-.02a.76.76 0 0 0 .045-.236.23.23 0 0 0 .007-.03c0-.017-.008-.032-.01-.05z"/></svg></span></a> </span> </div> </div> </div> </footer> </div> </div> </div> </div> </section> <section class="dx-pb-8" section-properties-enabled> <div class="dx-container dx-relative"> <div class="dx-row "> <div class="dx-col-12 md:dx-col-8 rhpb-region dx-flex" style="flex-direction:column">   <div class="rh-group--layout" data-rh-layout="stacked" > <div class="rh-group-body" data-rh-layout="min-stacked" >  <div class="rh-generic--component" data-rh-align="left" > <h3 style="color:#ee0000;">Noto Sans font family</h3><p>We use Noto Sans for languages that use non-Latin character sets. You’ll need to download the specific family of Noto Sans for your language or project:</p> </div> </div> </div> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column"> </div> <div class="dx-col-12 md:dx-col-4 rhpb-region dx-flex" style="flex-direction:column">  <div class="rh-card--layout card-flex--subpattern" data-rh-card="sections" data-at-card="flex" data-rh-background="white" data-rh-justify="justify" data-rh-layout="min-stacked" data-rh-theme="light" data-rh-bg-align="cover" > <header class="rh-card-header">   <div class="rh-group--layout" data-rh-card-header=image > <div class="rh-group-body" data-rh-layout="stacked" >  <div class="rh-image-embed--component" data-rh-align="left" > <div class="rh-image-embed-container"> <div class="rh-image-embed-span" > <img class="rh-image-embed-img" src="/rhdc/managed-files/Brand_standards-Red_Hat-The_hat-Google_Fonts.svg" alt="Google Fonts logo." height="64" width="64" loading="lazy" > </div> </div> </div> </div> </div> </header> <footer class="rh-card-footer" data-rh-layout="">  <div class="rh-group--layout" > <div class="rh-group-body" >  <div class="rh-cta-multi-basic--component" data-rh-align="left" data-rh-display="stacked" >   <span class="rh-cta--component" data-rh-cta-type="secondary" > <a class="rh-cta-link" href="https://fonts.google.com/?query=Noto+Sans" data-analytics-linkType="cta" data-analytics-text="Google Fonts" >Google Fonts<span aria-hidden="true"><svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><title>Icon-Red_Hat-Directional-A-Black-RGB</title><path d="M29.74 17.95v-.1a.9.9 0 0 0-.03-.086c-.01-.025-.016-.05-.027-.075a.72.72 0 0 0-.148-.223l-3.5-3.5-3.5-3.5a.75.75 0 1 0-1.06 1.06l2.86 2.86 2.86 2.86H7a.75.75 0 0 0 0 1.5h20.19l-2.22 2.223-3.5 3.5a.75.75 0 1 0 1.06 1.06l3.5-3.5 3.5-3.5c.007-.007.01-.016.016-.023a.738.738 0 0 0 .147-.22l.005-.02a.76.76 0 0 0 .045-.236.23.23 0 0 0 .007-.03c0-.017-.008-.032-.01-.05z"/></svg></span></a> </span> </div> </div> </div> </footer> </div> </div> </div> </div> </section> </div> </rh-tab-panel> </rh-tabs> </div> </div> </section> </div> </article> </div> <rh-footer data-analytics-region="page-footer"><a slot="logo" href="/en" data-analytics-category="Footer" data-analytics-text="Logo"><img src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg" alt="Red Hat logo" loading="lazy" width="135" height="32"/></a><rh-footer-social-link slot="social-links" icon="linkedin"><a href="https://www.linkedin.com/company/red-hat" data-analytics-category="Footer|social-links" data-analytics-text="" data-analytics-region="social-links-exit" >LinkedIn</a></rh-footer-social-link><rh-footer-social-link slot="social-links" icon="youtube"><a href="https://www.youtube.com/user/RedHatVideos" data-analytics-category="Footer|social-links" data-analytics-text="" data-analytics-region="social-links-exit" >YouTube</a></rh-footer-social-link><rh-footer-social-link slot="social-links" icon="facebook"><a href="https://www.facebook.com/redhatinc" data-analytics-category="Footer|social-links" data-analytics-text="" data-analytics-region="social-links-exit" >Facebook</a></rh-footer-social-link><rh-footer-social-link slot="social-links" icon="x"><a href="https://twitter.com/RedHat" data-analytics-category="Footer|social-links" data-analytics-text="X" data-analytics-region="social-links-exit" >X</a></rh-footer-social-link><h3 slot="links" data-analytics-text="Products" >Products</h3><ul slot="links"><li><a href="/en/technologies/linux-platforms/enterprise-linux" data-analytics-category="Footer|Products" data-analytics-text="Red Hat Enterprise Linux" >Red Hat Enterprise Linux</a></li><li><a href="/en/technologies/cloud-computing/openshift" data-analytics-category="Footer|Products" data-analytics-text="Red Hat OpenShift" >Red Hat OpenShift</a></li><li><a href="/en/technologies/management/ansible" data-analytics-category="Footer|Products" data-analytics-text="Red Hat Ansible Automation Platform" >Red Hat Ansible Automation Platform</a></li><li><a href="/en/technologies/cloud-computing/openshift/cloud-services" data-analytics-category="Footer|Products" data-analytics-text="Cloud services" >Cloud services</a></li><li><a href="/en/technologies/all-products" data-analytics-category="Footer|Products" data-analytics-text="See all products" >See all products</a></li></ul><h3 slot="links" data-analytics-text="Tools" >Tools</h3><ul slot="links"><li><a href="/en/services/training-and-certification" data-analytics-category="Footer|Tools" data-analytics-text="Training and certification" >Training and certification</a></li><li><a href="https://www.redhat.com/wapps/ugc/protected/personalInfo.html" data-analytics-category="Footer|Tools" data-analytics-text="My account" >My account</a></li><li><a href="https://access.redhat.com" data-analytics-category="Footer|Tools" data-analytics-text="Customer support" >Customer support</a></li><li><a href="https://developers.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Developer resources" >Developer resources</a></li><li><a href="https://catalog.redhat.com/partners" data-analytics-category="Footer|Tools" data-analytics-text="Find a partner" >Find a partner</a></li><li><a href="https://catalog.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Red Hat Ecosystem Catalog" >Red Hat Ecosystem Catalog</a></li><li><a href="/en/solutions/value-calculator" data-analytics-category="Footer|Tools" data-analytics-text="Red Hat value calculator" >Red Hat value calculator</a></li><li><a href="https://docs.redhat.com/en" data-analytics-category="Footer|Tools" data-analytics-text="Documentation" >Documentation</a></li></ul><h3 slot="links" data-analytics-text="Try buy & sell" >Try, buy, & sell</h3><ul slot="links"><li><a href="/en/products/trials" data-analytics-category="Footer|Try buy & sell" data-analytics-text="Product trial center" >Product trial center</a></li><li><a href="https://marketplace.redhat.com" data-analytics-category="Footer|Try buy & sell" data-analytics-text="Red Hat Marketplace" >Red Hat Marketplace</a></li><li><a href="https://www.redhat.com/en/store" data-analytics-category="Footer|Try buy & sell" data-analytics-text="Red Hat Store" >Red Hat Store</a></li><li><a href="https://www.redhat.com/en/about/japan-buy" data-analytics-category="Footer|Try buy & sell" data-analytics-text="Buy online (Japan)" >Buy online (Japan)</a></li><li><a href="https://cloud.redhat.com/" data-analytics-category="Footer|Try buy & sell" data-analytics-text="Console" >Console</a></li></ul><h3 slot="links" data-analytics-text="Communicate" >Communicate</h3><ul slot="links"><li><a href="/en/contact/sales" data-analytics-category="Footer|Communicate" data-analytics-text="Contact sales" >Contact sales</a></li><li><a href="/en/contact/customer-service" data-analytics-category="Footer|Communicate" data-analytics-text="Contact customer service" >Contact customer service</a></li><li><a href="/en/services/training-and-certification/contact-us" data-analytics-category="Footer|Communicate" data-analytics-text="Contact training" >Contact training</a></li><li><a href="/en/about/social" data-analytics-category="Footer|Communicate" data-analytics-text="Social" >Social</a></li></ul><rh-footer-block slot="main-secondary"><h3 slot="header" data-analytics-text="About Red Hat">About Red Hat</h3><p>We’re the world’s leading provider of enterprise open source solutions—including Linux, cloud, container, and Kubernetes. We deliver hardened solutions that make it easier for enterprises to work across platforms and environments, from the core datacenter to the network edge.</p></rh-footer-block><rh-footer-block slot="main-secondary"><h3 slot="header">Select a language</h3><button id="footer-language-toggle"><img src="https://static.redhat.com/libs/redhat/rh-iconfont/4/svg/web-icon-globe.svg" width="21" height="21" alt=""/>English<span class="down"></span></button><div id="footer-language-picker"><ul><li><a href="/zh/about/brand/standards/typography" class="language-link" xml:lang="zh" hreflang="zh" data-analytics-category="Footer|Language" data-analytics-text="Chinese" >简体中文</a></li><li><a href="/en/about/brand/standards/typography" class="language-link" xml:lang="en" hreflang="en" data-analytics-category="Footer|Language" data-analytics-text="English" >English</a></li><li><a href="/fr/about/brand/standards/typography" class="language-link" xml:lang="fr" hreflang="fr" data-analytics-category="Footer|Language" data-analytics-text="French" >Français</a></li><li><a href="/de/about/brand/standards/typography" class="language-link" xml:lang="de" hreflang="de" data-analytics-category="Footer|Language" data-analytics-text="German" >Deutsch</a></li><li><a href="/it/about/brand/standards/typography" class="language-link" xml:lang="it" hreflang="it" data-analytics-category="Footer|Language" data-analytics-text="Italian" >Italiano</a></li><li><a href="/ja/about/brand/standards/typography" class="language-link" xml:lang="ja" hreflang="ja" data-analytics-category="Footer|Language" data-analytics-text="Japanese" >日本語</a></li><li><a href="/ko/about/brand/standards/typography" class="language-link" xml:lang="ko" hreflang="ko" data-analytics-category="Footer|Language" data-analytics-text="Korean" >한국어</a></li><li><a href="/pt-br/about/brand/standards/typography" class="language-link" xml:lang="pt-br" hreflang="pt-br" data-analytics-category="Footer|Language" data-analytics-text="Portuguese" >Português</a></li><li><a href="/es/about/brand/standards/typography" class="language-link" xml:lang="es" hreflang="es" data-analytics-category="Footer|Language" data-analytics-text="Spanish" >Español</a></li></ul></div></rh-footer-block><rh-footer-universal slot="universal"><h3 slot="links-primary" hidden data-analytics-text="Red Hat legal and privacy links" >Red Hat legal and privacy links</h3><ul slot="links-primary" data-analytics-region="page-footer-bottom-primary"><li><a href="/en/about/company" data-analytics-category="Footer|Corporate" data-analytics-text="About Red Hat" >About Red Hat</a></li><li><a href="/en/jobs" data-analytics-category="Footer|Corporate" data-analytics-text="Jobs" >Jobs</a></li><li><a href="/en/events" data-analytics-category="Footer|Corporate" data-analytics-text="Events" >Events</a></li><li><a href="/en/about/office-locations" data-analytics-category="Footer|Corporate" data-analytics-text="Locations" >Locations</a></li><li><a href="/en/contact" data-analytics-category="Footer|Corporate" data-analytics-text="Contact Red Hat" >Contact Red Hat</a></li><li><a href="/en/blog" data-analytics-category="Footer|Corporate" data-analytics-text="Red Hat Blog" >Red Hat Blog</a></li><li><a href="/en/about/our-culture/diversity-equity-inclusion" data-analytics-category="Footer|Corporate" data-analytics-text="" >Diversity, equity, and inclusion</a></li><li><a href="https://coolstuff.redhat.com/" data-analytics-category="Footer|Corporate" data-analytics-text="Cool Stuff Store" >Cool Stuff Store</a></li><li><a href="https://www.redhat.com/en/summit" data-analytics-category="Footer|Corporate" data-analytics-text="Red Hat Summit" >Red Hat Summit</a></li></ul><rh-footer-copyright slot="links-secondary">© 2024 Red Hat, Inc.</rh-footer-copyright><h3 slot="links-secondary" hidden data-analytics-text="Red Hat legal and privacy links" >Red Hat legal and privacy links</h3><ul slot="links-secondary" data-analytics-region="page-footer-bottom-secondary"><li><a href="/en/about/privacy-policy" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Privacy statement" >Privacy statement</a></li><li><a href="/en/about/terms-use" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Terms of use" >Terms of use</a></li><li><a href="/en/about/all-policies-guidelines" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="All policies and guidelines" >All policies and guidelines</a></li><li><a href="/en/about/digital-accessibility" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Digital accessibility" >Digital accessibility</a></li><li><span id="teconsent"></span></li></ul></rh-footer-universal></rh-footer> <div id="consent_blackbar" style="position: fixed;bottom: 0;width: 100%;z-index: 5;padding: 10px;"></div> <script>if (("undefined" !== typeof _satellite) && ("function" === typeof _satellite.pageBottom)) {_satellite.pageBottom();}</script> <script src="https://js.sentry-cdn.com/676ea2c2d4a147c2834066d24c04a9e4.min.js" crossorigin="anonymous"></script> <script src="/rhdc/system-files/js/js_xSLLd40Y1Q9i4yTQ4Kpc-DI-7Kyp-jkeyhR_ckBIlsU.js?scope=footer&delta=1&language=en&theme=rhdc&include=eJyNUkGS3DAI_JA9fsTmmMotZxWSGJuNLFyAZ-PfB481s95NbSUnIVo0amiZcgpQoWxGSQf5cA2YcwmRzXjuZApMjs4OjyhDEgTDI5cKYbVO_k2m5DWKIGn6n-cowtLppobzEEFx_8Z-hpWGsXCE8jIJz9i9YZRpWK7YV7jRCEZc7x3uvP3x9q9Er0loMT0BitYXqGOfmH8RnpArs6H0a6Ubin5gO6DPikxWNZd6SVzVB3Rps7vAQu3DyeA9CvNajHZ9lFp2FF6XFtPsxQHniPlRA5KDkxtQ9fatBD12AsEcJrBwLfibYsFQYOPVhuO4p798o2tcwFxSDbpAojo28v327BShejlC3qU3JoOonzrtqa7FmTSxj28buGLi0vlYyLZDletZjr01Mp1gDwvF3R6nzfqWXHYG2b56azCe9pNxEUzu13w2kLvlB9y-0zjZt8PhD-S5Y8ebWOeElHit1mfhJfNbPVd4b__FT324YMa6HpZ-uv3c98X3fkdf9TB58__z-gci-Wby"></script> <script src="/modules/contrib/webrh/@cpelements/pfe-navigation/dist/pfe-navigation.min.js" type="module"></script> <script src="/themes/custom/rhdc/js/rhdc-set-lang-cookie.js?snbk8m" async></script> <script src="/modules/contrib/red_hat_shared_libs/dist/js/lazy-load-esmodule.js?v=2.0.7" type="module"></script> <script src="/rhdc/system-files/js/js_kDmqAc72dRTiMVpYmr53pV6Ix1l73WGLGGZ6d3mzwkk.js?scope=footer&delta=5&language=en&theme=rhdc&include=eJyNUkGS3DAI_JA9fsTmmMotZxWSGJuNLFyAZ-PfB481s95NbSUnIVo0amiZcgpQoWxGSQf5cA2YcwmRzXjuZApMjs4OjyhDEgTDI5cKYbVO_k2m5DWKIGn6n-cowtLppobzEEFx_8Z-hpWGsXCE8jIJz9i9YZRpWK7YV7jRCEZc7x3uvP3x9q9Er0loMT0BitYXqGOfmH8RnpArs6H0a6Ubin5gO6DPikxWNZd6SVzVB3Rps7vAQu3DyeA9CvNajHZ9lFp2FF6XFtPsxQHniPlRA5KDkxtQ9fatBD12AsEcJrBwLfibYsFQYOPVhuO4p798o2tcwFxSDbpAojo28v327BShejlC3qU3JoOonzrtqa7FmTSxj28buGLi0vlYyLZDletZjr01Mp1gDwvF3R6nzfqWXHYG2b56azCe9pNxEUzu13w2kLvlB9y-0zjZt8PhD-S5Y8ebWOeElHit1mfhJfNbPVd4b__FT324YMa6HpZ-uv3c98X3fkdf9TB58__z-gci-Wby"></script> <script src="/modules/contrib/red_hat_shared_libs/dist/rhds-elements/modules/rh-tabs/rh-tabs.js" type="module"></script> <script src="/modules/contrib/red_hat_page_builder/modules/red_hat_tabs_layout/js/layout-tabs.js?snbk8m" type="module"></script> <script src="/rhdc/system-files/js/js_-y9bdzNzSTBOKzHnC43wPfUhuzR6fWKhrmC8cCXBDvs.js?scope=footer&delta=8&language=en&theme=rhdc&include=eJyNUkGS3DAI_JA9fsTmmMotZxWSGJuNLFyAZ-PfB481s95NbSUnIVo0amiZcgpQoWxGSQf5cA2YcwmRzXjuZApMjs4OjyhDEgTDI5cKYbVO_k2m5DWKIGn6n-cowtLppobzEEFx_8Z-hpWGsXCE8jIJz9i9YZRpWK7YV7jRCEZc7x3uvP3x9q9Er0loMT0BitYXqGOfmH8RnpArs6H0a6Ubin5gO6DPikxWNZd6SVzVB3Rps7vAQu3DyeA9CvNajHZ9lFp2FF6XFtPsxQHniPlRA5KDkxtQ9fatBD12AsEcJrBwLfibYsFQYOPVhuO4p798o2tcwFxSDbpAojo28v327BShejlC3qU3JoOonzrtqa7FmTSxj28buGLi0vlYyLZDletZjr01Mp1gDwvF3R6nzfqWXHYG2b56azCe9pNxEUzu13w2kLvlB9y-0zjZt8PhD-S5Y8ebWOeElHit1mfhJfNbPVd4b__FT324YMa6HpZ-uv3c98X3fkdf9TB58__z-gci-Wby"></script> <script src="/modules/contrib/red_hat_shared_libs/dist/rhds-elements/modules/rh-navigation-secondary/rh-navigation-secondary.js" type="module"></script> <script src="/rhdc/system-files/js/js_40lncoUzSBNax51mOgfyxESDwr1KmhDMBhC85yi0nz4.js?scope=footer&delta=10&language=en&theme=rhdc&include=eJyNUkGS3DAI_JA9fsTmmMotZxWSGJuNLFyAZ-PfB481s95NbSUnIVo0amiZcgpQoWxGSQf5cA2YcwmRzXjuZApMjs4OjyhDEgTDI5cKYbVO_k2m5DWKIGn6n-cowtLppobzEEFx_8Z-hpWGsXCE8jIJz9i9YZRpWK7YV7jRCEZc7x3uvP3x9q9Er0loMT0BitYXqGOfmH8RnpArs6H0a6Ubin5gO6DPikxWNZd6SVzVB3Rps7vAQu3DyeA9CvNajHZ9lFp2FF6XFtPsxQHniPlRA5KDkxtQ9fatBD12AsEcJrBwLfibYsFQYOPVhuO4p798o2tcwFxSDbpAojo28v327BShejlC3qU3JoOonzrtqa7FmTSxj28buGLi0vlYyLZDletZjr01Mp1gDwvF3R6nzfqWXHYG2b56azCe9pNxEUzu13w2kLvlB9y-0zjZt8PhD-S5Y8ebWOeElHit1mfhJfNbPVd4b__FT324YMa6HpZ-uv3c98X3fkdf9TB58__z-gci-Wby"></script> <script src="/modules/contrib/red_hat_shared_libs/dist/rhds-elements/modules/rh-tag/rh-tag.js" type="module"></script> <script src="/rhdc/system-files/js/js_fMzGneAaij2ho0Ebq2mpnhw2DMyQ2Eq2M5YzIviH2t0.js?scope=footer&delta=12&language=en&theme=rhdc&include=eJyNUkGS3DAI_JA9fsTmmMotZxWSGJuNLFyAZ-PfB481s95NbSUnIVo0amiZcgpQoWxGSQf5cA2YcwmRzXjuZApMjs4OjyhDEgTDI5cKYbVO_k2m5DWKIGn6n-cowtLppobzEEFx_8Z-hpWGsXCE8jIJz9i9YZRpWK7YV7jRCEZc7x3uvP3x9q9Er0loMT0BitYXqGOfmH8RnpArs6H0a6Ubin5gO6DPikxWNZd6SVzVB3Rps7vAQu3DyeA9CvNajHZ9lFp2FF6XFtPsxQHniPlRA5KDkxtQ9fatBD12AsEcJrBwLfibYsFQYOPVhuO4p798o2tcwFxSDbpAojo28v327BShejlC3qU3JoOonzrtqa7FmTSxj28buGLi0vlYyLZDletZjr01Mp1gDwvF3R6nzfqWXHYG2b56azCe9pNxEUzu13w2kLvlB9y-0zjZt8PhD-S5Y8ebWOeElHit1mfhJfNbPVd4b__FT324YMa6HpZ-uv3c98X3fkdf9TB58__z-gci-Wby"></script> <script src="/modules/contrib/webrh/@cpelements/rh-account-dropdown/dist/rh-account-dropdown.min.js" type="module"></script> <script src="/rhdc/system-files/js/js_y1DIr9x6V3LsXcKDqAxE9_8vEqCQ8xtK8Yz9TsnKhvY.js?scope=footer&delta=14&language=en&theme=rhdc&include=eJyNUkGS3DAI_JA9fsTmmMotZxWSGJuNLFyAZ-PfB481s95NbSUnIVo0amiZcgpQoWxGSQf5cA2YcwmRzXjuZApMjs4OjyhDEgTDI5cKYbVO_k2m5DWKIGn6n-cowtLppobzEEFx_8Z-hpWGsXCE8jIJz9i9YZRpWK7YV7jRCEZc7x3uvP3x9q9Er0loMT0BitYXqGOfmH8RnpArs6H0a6Ubin5gO6DPikxWNZd6SVzVB3Rps7vAQu3DyeA9CvNajHZ9lFp2FF6XFtPsxQHniPlRA5KDkxtQ9fatBD12AsEcJrBwLfibYsFQYOPVhuO4p798o2tcwFxSDbpAojo28v327BShejlC3qU3JoOonzrtqa7FmTSxj28buGLi0vlYyLZDletZjr01Mp1gDwvF3R6nzfqWXHYG2b56azCe9pNxEUzu13w2kLvlB9y-0zjZt8PhD-S5Y8ebWOeElHit1mfhJfNbPVd4b__FT324YMa6HpZ-uv3c98X3fkdf9TB58__z-gci-Wby"></script> <script src="/themes/custom/rh_base_ui/../../../modules/contrib/webrh/@patternfly/pfe-cta/dist/pfe-cta.min.js" type="module"></script> <script src="/ux/webdms/js/scripts.min.js" defer></script> <script src="/ux/webdms/js/projects/rh-secondary-nav-component.min.js" defer></script> </body> </html>

CINXE.COM

Fonts and typography - Red Hat brand standards