Typography | New Zealand Government

<!DOCTYPE html> <html class="no-js" lang="en-NZ" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://www.govt.nz/about/about-this-website/typography/","20240511232043","https://web.archive.org/","web","/_static/", "1715469643"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta charset="utf-8"/> <link rel="preload" href="/web/20240511232043/https://www.govt.nz/resources/themes/dia-theme/fonts/subset/FiraSans-Regular-subset.woff2?m=1715117503" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/web/20240511232043/https://www.govt.nz/resources/themes/dia-theme/fonts/subset/FiraSans-Bold-subset.woff2?m=1715117503" as="font" type="font/woff2" crossorigin> <style> @font-face { font-family: 'Fira'; src: url(/web/20240511232043im_/https://www.govt.nz/resources/themes/dia-theme/fonts/subset/FiraSans-Regular-subset.woff2?m=1715117503) format("woff2"), url(/web/20240511232043im_/https://www.govt.nz/resources/themes/dia-theme/fonts/subset/FiraSans-Regular-subset.woff?m=1715117503) format("woff"); font-weight: 400; font-display: fallback; } @font-face { font-family: 'Fira'; src: url(/web/20240511232043im_/https://www.govt.nz/resources/themes/dia-theme/fonts/subset/FiraSans-Bold-subset.woff2?m=1715117503) format("woff2"), url(/web/20240511232043im_/https://www.govt.nz/resources/themes/dia-theme/fonts/subset/FiraSans-Bold-subset.woff?m=1715117503) format("woff"); font-weight: 700; font-display: fallback; } </style> <script> if( "fonts" in document ) { var regular = new FontFace("Fira", "url(/resources/themes/dia-theme/fonts/superset/FiraSans-Regular-superset.woff2?m=1715117503) format('woff2'), url(/resources/themes/dia-theme/fonts/superset/FiraSans-Regular-superset.woff?m=1715117503) format('woff')"); var bold = new FontFace("Fira", "url(/resources/themes/dia-theme/fonts/superset/FiraSans-Bold-superset.woff2?m=1715117503) format('woff2'), url(/resources/themes/dia-theme/fonts/superset/FiraSans-Bold-superset.woff2?m=1715117503) format('woff')", { weight: "700" }); Promise.all([ bold.load(), regular.load() ]).then(function(fonts) { fonts.forEach(function(font) { document.fonts.add(font); }); }); } if(!("fonts" in document) && "head" in document) { var style = document.createElement("style"); // todo: v causing syntax error? style.innerHTML = "@font-face { font-family: 'Fira'; src: url(/resources/themes/dia-theme/fonts/superset/FiraSans-Regular-superset.woff2?m=1715117503) format('woff2'), url(/resources/themes/dia-theme/fonts/superset/FiraSans-Regular-superset.woff?m=1715117503) format('woff'); font-weight: 400; font-display: fallback; } @font-face { font-family: 'Fira'; src: url(/resources/themes/dia-theme/fonts/superset/FiraSans-Bold-superset.woff2?m=1715117503) format('woff2'), url(/resources/themes/dia-theme/fonts/superset/FiraSans-Bold-superset.woff?m=1715117503) format('woff'); font-weight: 700; font-display: fallback; }"; document.head.appendChild(style); } </script> <script> document.documentElement.className = document.documentElement.className.replace("no-js","js"); </script> <link rel="preconnect" href="https://web.archive.org/web/20240511232043/https://www.google-analytics.com/" crossorigin> <link rel="dns-prefetch" href="https://web.archive.org/web/20240511232043/https://www.google-analytics.com/"> <link rel="preconnect" href="https://web.archive.org/web/20240511232043/https://www.googletagmanager.com/" crossorigin> <link rel="dns-prefetch" href="https://web.archive.org/web/20240511232043/https://www.googletagmanager.com/">  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://web.archive.org/web/20240511232043/https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MTS9PPX');</script>  <title> Typography | New Zealand Government </title> <meta name="description" content="Govt.nz’s typefaces, text sizes and spacing, and links."> <meta name="google-site-verification" content="BDC1GidWagtZ4CFloZKnpbnGkfer99DVp0vjNbjgRlw"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:title" content="Typography"/> <meta property="og:site_name" content="New Zealand Government"/> <meta property="og:url" content="https://web.archive.org/web/20240511232043/https://www.govt.nz/about/about-this-website/typography/"/> <meta property="og:description" content="Govt.nz’s typefaces, text sizes and spacing, and links."/> <meta property="og:locale" content="en_NZ"/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://web.archive.org/web/20240511232043im_/https://www.govt.nz/assets/Images/Social/Social-share-default-Govtnz.png"/> <meta property="og:image:url" content="https://www.govt.nz/assets/Images/Social/Social-share-default-Govtnz.png"/> <meta property="og:image:type" content="image/png"/> <meta property="og:image:width" content="1200"/> <meta property="og:image:height" content="630"/> <meta property="og:image:alt" content="New Zealand Coat of Arms"/> <meta name="twitter:description" content="Govt.nz’s typefaces, text sizes and spacing, and links."/> <meta name="twitter:site" content="@govtnz"/> <meta name="twitter:creator" content="@govtnz"> <meta name="twitter:title" content="Typography"/> <meta name="twitter:url" content="https://web.archive.org/web/20240511232043im_/https://www.govt.nz/about/about-this-website/typography/"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:image" content="https://web.archive.org/web/20240511232043im_/https://www.govt.nz/assets/Images/Social/Social-share-default-Govtnz.png"/> <meta name="twitter:image:alt" content="New Zealand Coat of Arms"> <base href="https://web.archive.org/web/20240511232043/https://www.govt.nz/"> <link rel="icon" href="https://web.archive.org/web/20240511232043im_/https://www.govt.nz//resources/themes/dia-theme/images/favicons/favicon.png" type="image/png"> <link rel="icon" href="https://web.archive.org/web/20240511232043im_/https://www.govt.nz//resources/themes/dia-theme/images/favicons/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="https://web.archive.org/web/20240511232043im_/https://www.govt.nz//resources/themes/dia-theme/images/favicons/apple-touch-icon.png"> <link rel="stylesheet" type="text/css" href="/web/20240511232043cs_/https://www.govt.nz/resources/themes/dia-theme/dist/screen.css?m=1715117503" media="screen"/> <link rel="stylesheet" type="text/css" href="/web/20240511232043cs_/https://www.govt.nz/resources/themes/dia-theme/dist/print.css?m=1715117503" media="print"/> <link rel="stylesheet" type="text/css" href="/web/20240511232043cs_/https://www.govt.nz/resources/themes/dia-theme/thirdparty/prism/prism.css?m=1715117503"/>    </head> <body class="pagetype-info" data-pagetype="InfoPage">  <noscript><iframe src="https://web.archive.org/web/20240511232043if_/https://www.googletagmanager.com/ns.html?id=GTM-MTS9PPX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <a class="skip-to-main-content visuallyhidden focusable internal-link" href="/web/20240511232043/https://www.govt.nz/about/about-this-website/typography/#toplink">Skip to main content</a> <div class="header navbar" role="banner"> <div class="container"> <div class="header-item row"> <img class="print-logo" width="318" height="72" src="/web/20240511232043im_/https://www.govt.nz/resources/themes/dia-theme/images/logo/nzgovt-logo-black.svg?m=1715117503" alt="New Zealand Government"/> <div class="header-item-wrapper col-sm-12"> <div class="logo"> <a href="/web/20240511232043/https://www.govt.nz/" data-ga-event="click" data-ga-category="Navigation" data-ga-action="Header-logo" data-ga-label="@attr:href"> <span class="sr-only"><span lang="mi">Te Kāwanatanga o Aotearoa</span> / </span> <img width="318" height="72" src="/web/20240511232043im_/https://www.govt.nz/resources/themes/dia-theme/images/logo/nzgovt-logo-white.svg?m=1715117503" alt="New Zealand Government"> </a> </div> <div class="mobile-search"> <button type="button" class="submit btn btn-black square-corners mobile-search-toggle " aria-label="Show search" aria-controls="header-search"> <svg class="icon-search-mobile" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewbox="0 0 32 32"> <path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path> </svg> </button> </div> <div id="header-search" class="header-search "> <div role="search" class="header-search-form"> <form id="search-form" action="https://web.archive.org/web/20240511232043/https://www.govt.nz/search"> <div class="search-controls"> <input name="q" class="square-corners" id="searchterm" value="" type="search" autocapitalize="off" autocomplete="off" autocorrect="off"/> <label for="searchterm" class="search-label entered"> Search Govt.nz </label> <button type="submit" class="submit btn btn-orange square-corners" aria-label="Search Govt.nz"> <svg class="icon-search" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewbox="0 0 32 32"> <path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path> </svg> </button> </div> </form> </div> </div> </div> </div> </div> </div> <div class="content " role="main"> <div class="banner-link breadcrumbs "> <div class="container"> <nav class="nav-breadcrumbs inline-details" aria-label="Breadcrumbs"> <ol> <li> <a href="/web/20240511232043/https://www.govt.nz/" class="ga-track-nav-breadcrumbs">Home</a> <span aria-hidden="true">/</span> </li> <li> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/" class="ga-track-nav-breadcrumbs">About this website</a> <span aria-hidden="true">/</span> </li> <li aria-current="page">Typography</li> </ol> </nav> </div> </div> <noscript> <div class="container"> <div class="row"> <div class="callout-note noscript"> Your browser currently has JavaScript turned off, which means that www.govt.nz might not display properly on your device. It's easy to turn JavaScript on - <a href="https://web.archive.org/web/20240511232043/https://turnonjs.com/" target="_blank" rel="noopener noreferrer external">find out how to enable JavaScript in your browser</a>. </div> </div> </div> </noscript> <div class="container page-content"> <div class="row"> <div class="col-md-3 sidenav"> <div class="skip-link"> <a class="skip-to-main-content visuallyhidden focusable internal-link" href="/web/20240511232043/https://www.govt.nz/about/about-this-website/typography/#toplink">Skip to main content</a> </div> <div class="block-left "> <div class="SubHubNavigationPageFeature page-feature"> <nav class="hidden-md hidden-lg mobile-sub-navigation nojs-sub-navigation--is-visible" aria-labelledby="MobileSubNavigationHeading"> <h2 id="MobileSubNavigationHeading" class="mobile-sub-navigation__heading"> <button class="mobile-sub-navigation__toggle" role="none"> <span class="mobile-sub-navigation__title">About this website</span> </button> </h2> <div id="mobile-sub-nav-menu" class="mobile-sub-navigation__menu"> <ul class="sub-navigation"> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/govt-nz-scope/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/govt-nz-scope/" data-ga-label="/about/about-this-website/typography/"> The scope of Govt.nz </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/govt-nz-principles-vision-and-goals/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/govt-nz-principles-vision-and-goals/" data-ga-label="/about/about-this-website/typography/"> Govt.nz principles, vision and goals </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/accessibility-statement/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/accessibility-statement/" data-ga-label="/about/about-this-website/typography/"> Accessibility statement </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/govt-nz-content-design/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/govt-nz-content-design/" data-ga-label="/about/about-this-website/typography/"> Govt.nz content design </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/linking-to-govt-nz/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/linking-to-govt-nz/" data-ga-label="/about/about-this-website/typography/"> Linking to Govt.nz </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/colours-images-and-logos/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/colours-images-and-logos/" data-ga-label="/about/about-this-website/typography/"> Colours, images and logos </a> </li> <li class="sub-navigation__item" aria-current="page">Typography</li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/promotional-tiles/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/promotional-tiles/" data-ga-label="/about/about-this-website/typography/"> Promotional tiles </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/api/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/api/" data-ga-label="/about/about-this-website/typography/"> Re-using Govt.nz content and data </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/feedback-about-the-govt-nz-website/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/feedback-about-the-govt-nz-website/" data-ga-label="/about/about-this-website/typography/"> Feedback about the Govt.nz website </a> </li> </ul> </div> </nav> <nav class="hidden-xs hidden-sm desktop-subhub-navigation" aria-labelledby="SubHubNavigationHeading"> <div class="sub-hub"> <h2 id="SubHubNavigationHeading" class="imitate-h4 sub-hub-title"> <a class="sub-hub-title" href="/web/20240511232043/https://www.govt.nz/about/about-this-website/">About this website</a> </h2> </div> <ul class="sub-navigation"> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/govt-nz-scope/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/govt-nz-scope/" data-ga-label="/about/about-this-website/typography/"> The scope of Govt.nz </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/govt-nz-principles-vision-and-goals/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/govt-nz-principles-vision-and-goals/" data-ga-label="/about/about-this-website/typography/"> Govt.nz principles, vision and goals </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/accessibility-statement/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/accessibility-statement/" data-ga-label="/about/about-this-website/typography/"> Accessibility statement </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/govt-nz-content-design/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/govt-nz-content-design/" data-ga-label="/about/about-this-website/typography/"> Govt.nz content design </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/linking-to-govt-nz/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/linking-to-govt-nz/" data-ga-label="/about/about-this-website/typography/"> Linking to Govt.nz </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/colours-images-and-logos/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/colours-images-and-logos/" data-ga-label="/about/about-this-website/typography/"> Colours, images and logos </a> </li> <li class="sub-navigation__item" aria-current="page">Typography</li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/promotional-tiles/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/promotional-tiles/" data-ga-label="/about/about-this-website/typography/"> Promotional tiles </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/api/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/api/" data-ga-label="/about/about-this-website/typography/"> Re-using Govt.nz content and data </a> </li> <li class="sub-navigation__item"> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/feedback-about-the-govt-nz-website/" class="sub-navigation__link" data-ga-event="click" data-ga-category="Lefthand Navigation" data-ga-action="/about/about-this-website/feedback-about-the-govt-nz-website/" data-ga-label="/about/about-this-website/typography/"> Feedback about the Govt.nz website </a> </li> </ul> </nav> </div> </div> </div> <div class="col-md-7 col-md-offset-1 ga-content-container main-content"> <div class="title-row"> <h1 id="toplink" tabindex="-1">Typography</h1> <p class="page-description">Govt.nz’s typefaces, text sizes and spacing, and links.</p> </div> <h2>Typefaces</h2><p>Govt.nz uses the font Fira Sans because it:</p><ul> <li>is easy to read</li> <li>is not too formal</li> <li>matches the tone of the content</li> <li>is open source, and</li> <li>has good browser support — that is, it displays well in most browsers.</li> </ul><div class="callout-example"> <figure class="fig-example" role="figure" aria-label="Example of Fira Sans font weights"> <figcaption id="fig-example-figcaption-0">Example of Fira Sans font weights</figcaption> <p>Fira Sans Regular</p> <p><strong>Fira Sans Bold</strong></p> </figure> </div><h3>Font stack</h3><p>The Govt.nz font stack lists all the fonts that are used, including those for people who cannot use Fira Sans. They all have universal browser support and are listed in the order they will appear. These alternative fonts provide a similar experience to Fira Sans.</p><p>They are:</p><ul> <li>Fira Sans</li> <li>Helvetica</li> <li>Arial</li> <li>Sans serif.</li> </ul><h2>Text sizes and spacing</h2><p>Govt.nz uses the following styles, sizes and spacing for headings and paragraphs.</p><div class="table-wrapper" tabindex="0"> <table class="table table-std"><caption id="table-1"> <h3>Text sizes</h3> </caption> <thead> <tr> <th scope="col">Text type</th> <th scope="col">Large screens</th> <th scope="col">Small screens</th> </tr> </thead> <tbody> <tr> <td> <h1>Heading 1</h1> </td> <td> <p>44.8px</p> </td> <td> <p>33.2 px</p> </td> </tr> <tr> <td> <h2>Heading 2</h2> </td> <td> <p>25.9 px</p> </td> <td> <p>23 px</p> </td> </tr> <tr> <td> <h3>Heading 3</h3> </td> <td> <p>21 px</p> </td> <td> <p>18 px</p> </td> </tr> <tr> <td> <h4>Heading 4</h4> </td> <td> <p>18 px</p> </td> <td> <p>16 px</p> </td> </tr> <tr> <td> <h5>Heading 5</h5> </td> <td> <p>16 px</p> </td> <td> <p>14 px</p> </td> </tr> <tr> <td> <p>Summary</p> </td> <td> <p>25.9 px</p> </td> <td> <p>23 px</p> </td> </tr> <tr> <td> <p>Paragraph</p> </td> <td> <p>18 px</p> </td> <td> <p>16 px</p> </td> </tr> </tbody> </table> </div><h3>Spacing</h3><p>Govt.nz uses multiples of 6 pixels (px) to create consistent spacing. Usually a gap between a heading and paragraph is 36px.</p><h3>Line height</h3><p>Govt.nz uses a line height of 1.43 times the font size. Generous line height increases white space, making the page easier to read.</p><h2>Links</h2><p>Links are designed to be accessible and helpful to users. This includes:</p><ul> <li>being able to use them without relying solely on their colour</li> <li>changing the colour of visited links</li> <li>underlining link text that appears in body copy so that people can scan and see them</li> <li>showing an underline when you hover over navigation links</li> <li>identifying links to external websites.</li> </ul><p>For people using a keyboard rather than a mouse to navigate, Govt.nz:</p><ul> <li>gives links a clearly visible ‘focus’ so users know where they are on a page</li> <li>lets people tab between links</li> <li>makes sure links can be activated with the ‘enter’ key.</li> </ul><p>Govt.nz also defines how to select, name and style links.</p><p><a class="" href="https://web.archive.org/web/20240511232043/https://www.digital.govt.nz/standards-and-guidance/design-and-ux/content-design-guidance/links/">Links</a></p><div class="callout-example"> <h3>Examples</h3> <p><a class="gnz-colour-blue-text" href="/web/20240511232043/https://www.govt.nz/about/about-this-website/typography/">This is a link which leads to another page on the website</a></p> <p><a href="https://web.archive.org/web/20240511232043/http://www.google.com/">This is a link which leads to an external website</a></p> <p><a class="gnz-colour-purple-text" name="Visitedlinkexample" href="/web/20240511232043/https://www.govt.nz/about/about-this-website/typography/">This is a visited link</a></p> <p class="gnz-colour-blue-text"><a style="box-shadow: 0 0 0 2px #78aeda; border-radius: 2px;" name="Focuslinkexample" href="/web/20240511232043/https://www.govt.nz/about/about-this-website/typography/">This is a link with focus</a></p> </div><div class="hidden"> <details class="accordion-item inline-accordion"> <summary class="accordion-item-button accordion-trigger"> <h2> <span class="accordion-title">Code example</span> <span class="accordion-open" style="display: inline;"></span> <span class="accordion-close"></span> </h2> </summary> <div class="accordion-content"> <pre class="code-sample"><code class="language-html"><a class="internal-link" href="/browse/nz-passports-and-citizenship/"><br> This is a link which leads to another page on the website.<br> </a><br> <a class="external" rel="external" href="https://www.dia.govt.nz"><br> This is a link which leads to an external website.<br> </a><br> <i class="fa fa-external-link"></i><br> <span class="external-text" title="External site link">(external site link)</span></code></pre> </div> </details> <p>Notes for code sample:</p> <ul> <li>The external icon could be rendered using CSS.</li> <li>The span is used for screenreaders and hidden by default.</li> </ul> </div> <div class="block-bottom "> <h2 class="sr-only">Utility links and page information</h2> <div class="PrintPageFeature page-feature"> <div class="print-container"> <button type="button" id="print-page-button" hidden> Print </button> </div> </div> <div class="SharePageFeature page-feature"> <div class="social"> <p class="social__heading">Share by</p> <ul class="social__list"> <li class="social__list__item"><a class="social__list__link" href="https://web.archive.org/web/20240511232043/mailto:/?subject=I%20wanted%20to%20share%20this%20page%20with%20you%20from%20www.govt.nz%20&body=Typography%20%0D%0Ahttps://www.govt.nz/about/about-this-website/typography/" target="_self" rel="noopener">Email</a></li> </ul> </div> </div> <div class="FeedbackPageFeature page-feature"> <noscript> <div class="inline-feedback-form"> <div class="error-container"> <p> JavaScript is currently turned off in your browser — this means you cannot submit the feedback form. It's easy to turn on JavaScript — <a href="https://web.archive.org/web/20240511232043/https://turnonjs.com/">Learn how to turn on JavaScript in your web browser.</a> <br/><br/> If you're unable to turn on JavaScript — email your feedback to govt.nz@dia.govt.nz . <br/> </p> </div> </div> </noscript> <form class="inline-feedback-form" id="UserFeedbackForm_PageFeedbackForm" action="/web/20240511232043/https://www.govt.nz/about/about-this-website/typography/PageFeedbackForm/" method="POST" enctype="application/x-www-form-urlencoded" novalidate="novalidate" autocomplete="false"> <p id="UserFeedbackForm_PageFeedbackForm_error" class="message " style="display: none;"></p> <div id="Group1" class="field field CompositeField fieldgroup form-group--no-label"> <div class="middleColumn fieldgroup"> <div class="fieldgroup-field first last odd"> <div id="Screen1" class="field CompositeField fieldgroup application-step form-group--no-label ">  <fieldset id="UserFeedbackForm_PageFeedbackForm_PageRelevance_holder" class="optionset-holder" role="group" tabindex="-1"> <legend>Was this page helpful?</legend> <div class="wrap-form-item"> <label for="UserFeedbackForm_PageFeedbackForm_PageRelevance_Yes"> <input id="UserFeedbackForm_PageFeedbackForm_PageRelevance_Yes" type="radio" name="PageRelevance" value="Yes"/> Yes </label> <label for="UserFeedbackForm_PageFeedbackForm_PageRelevance_No"> <input id="UserFeedbackForm_PageFeedbackForm_PageRelevance_No" type="radio" name="PageRelevance" value="No"/> No </label> <label for="UserFeedbackForm_PageFeedbackForm_PageRelevance_Partly"> <input id="UserFeedbackForm_PageFeedbackForm_PageRelevance_Partly" type="radio" name="PageRelevance" value="Partly"/> Partly </label> </div> </fieldset> </div> </div> </div> </div> <div class="inline-feedback-form__wrap-2nd-fieldset"> <div id="Group2" class="field field CompositeField fieldgroup form-group--no-label"> <div class="middleColumn fieldgroup"> <div class="fieldgroup-field first last odd"> <fieldset id="Screen2" role="group" aria-describedby="UserFeedbackForm_PageFeedbackForm_Screen2_description" class="field CompositeField fieldgroup application-step optional-text-fields"> <legend>Thanks, do you want to tell us more?</legend> <div id="UserFeedbackForm_PageFeedbackForm_Screen2_description" class="description"> <p> Do not enter personal information. All fields are optional. </p> </div> <label for="UserFeedbackForm_PageFeedbackForm_WhyComeHere">What did you come here to do?</label> <div class="wrap-form-item"> <textarea name="WhyComeHere" class="htmltextarea" id="UserFeedbackForm_PageFeedbackForm_WhyComeHere" rows="2" cols="20" maxlength="5000"></textarea> </div> <label for="UserFeedbackForm_PageFeedbackForm_WhatWasWrong">What needs fixing?</label> <div class="wrap-form-item"> <select name="WhatWasWrong" class="htmldropdown" id="UserFeedbackForm_PageFeedbackForm_WhatWasWrong"> <option value="" selected="selected">Select the reason </option> <option value="Information is missing">Information is missing </option> <option value="It's outdated or wrong">It's outdated or wrong </option> <option value="It's hard to understand">It's hard to understand </option> <option value="It isn't where I expect it to be">It isn't where I expect it to be </option> <option value="It's inaccessible to me">It's inaccessible to me </option> <option value="Links are broken">Links are broken </option> <option value="Other">Other </option> </select> </div> <label for="UserFeedbackForm_PageFeedbackForm_HowCanWeImprove">How can we improve this information?</label> <div class="wrap-form-item"> <textarea name="HowCanWeImprove" class="htmltextarea" id="UserFeedbackForm_PageFeedbackForm_HowCanWeImprove" rows="2" cols="20" maxlength="5000"></textarea> </div> <input type="hidden" name="Pageurl" value="about/about-this-website/typography" class="hidden" id="UserFeedbackForm_PageFeedbackForm_Pageurl"/> </fieldset> </div> </div> </div> <input type="hidden" id="Nocaptcha-UserFeedbackForm_PageFeedbackForm" data-sitekey="6LeYASEjAAAAANVL8j9ZWas8h1FV8a_mOuXCTKh1" data-action="submit" name="g-recaptcha-response"/> <noscript> <p>You must enable JavaScript to submit this form</p> </noscript> <div class="Actions"> <div class="wrap-action-input"> <input type="submit" name="action_userFeedbackSubmit" value="Send feedback" class="action" id="UserFeedbackForm_PageFeedbackForm_action_userFeedbackSubmit"/> </div> </div> </div> </form> </div> <div class="PageLastUpdatedPageFeature page-feature"> <p>Last updated <time datetime="2021-07-13">13 July 2021</time></p> </div> </div> </div> </div> </div> </div> <div class="footer" aria-label="Footer" role="contentinfo"> <div class="container container__links"> <div class="row"> <div class="col-md-4"> <div class="info-section"> <h2>Contact NZ government</h2> <ul> <li><a href="/web/20240511232043/https://www.govt.nz/organisations/"> A-Z of government agencies</a> </li> <li><a href="/web/20240511232043/https://www.govt.nz/about/contact-details-by-topic/"> Contact details by topic</a> </li> </ul> </div> </div> <div class="col-md-4"> <div class="info-section"> <h2>About this website</h2> <ul> <li><a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/"> About Govt.nz</a> </li> <li><a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/feedback-about-the-govt-nz-website/"> Feedback about Govt.nz</a> </li> <li><a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/govt-nz-scope/"> The scope of Govt.nz</a> </li> </ul> </div> </div> <div class="col-md-4"> <div class="info-section"> <h2>Using this website</h2> <ul> <li><a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/accessibility-statement/"> Accessibility </a> </li> <li><a href="/web/20240511232043/https://www.govt.nz/about/using-this-website/copyright-and-attribution/"> Copyright</a> </li> <li><a href="/web/20240511232043/https://www.govt.nz/about/using-this-website/privacy/"> Privacy</a> </li> <li><a href="/web/20240511232043/https://www.govt.nz/about/using-this-website/terms-of-use/"> Terms of use</a> </li> </ul> </div> </div> </div> </div> <div class="container container__logo"> <div class="footer-logo"> <a href="/web/20240511232043/https://www.govt.nz/" class="ga-track-logo-footer-aog" data-ga-event="click" data-ga-category="Navigation" data-ga-action="Footer-logo" data-ga-label="@attr:href"> <span class="sr-only"><span lang="mi">Te Kāwanatanga o Aotearoa</span> / </span> <img width="318" height="72" src="/web/20240511232043im_/https://www.govt.nz/resources/themes/dia-theme/images/logo/nzgovt-logo-white.svg?m=1715117503" alt="New Zealand Government" loading="lazy"> </a> </div> <a href="/web/20240511232043/https://www.govt.nz/about/about-this-website/typography/" id="shielded-logo" aria-label="Shielded" hidden> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="40" height="40" viewbox="0 0 192 192"><circle cx="96" cy="96" r="96" fill="#445e5c"></circle><circle cx="96" cy="95" r="87" fill="#fff"></circle><path fill="#445e5c" d="M96 11a84 84 0 0 0 0 168z"></path><g fill="none" stroke="#fff" stroke-linecap="round" stroke-width="3"><path stroke-dasharray="6" d="M96 50.5H48a2.5 2.5 0 0 0-2.5 2.5v70a2.5 2.5 0 0 0 2.5 2.5h48"></path><path stroke-dasharray="7 6" d="M99.76 135.5h-43a2 2 0 0 0-1.76 1.11l-4 8a2 2 0 0 0 .08 1.94c.37.6 1 .95 3.71.95h44.79"></path></g><g fill="none" stroke="#445e5c"><path stroke-width="6" d="M96 52h47a1 1 0 0 1 1 1v70a1 1 0 0 1-1 1H96"></path><path stroke-width="3" d="M96 135.5h39a2 2 0 0 1 1.79 1.11l4 8a2 2 0 0 1-1.79 2.89H96"></path><path stroke-width="2" d="M96 141h43m-37-5v5m8.5-5 .5 5m8-5 1 5m7-5 4 11"></path></g></svg> </a> </div> </div> <script type="application/javascript" src="/web/20240511232043js_/https://www.govt.nz/resources/themes/dia-theme/dist/scripts.min.js?m=1715117503"></script> <script type="application/javascript" src="/web/20240511232043js_/https://www.govt.nz/resources/themes/dia-theme/thirdparty/prism/prism.js?m=1715117503"></script> <script type="application/javascript" src="https://web.archive.org/web/20240511232043js_/https://www.google.com/recaptcha/api.js?render=6LeYASEjAAAAANVL8j9ZWas8h1FV8a_mOuXCTKh1&onload=noCaptchaFormRender"></script> <script type="application/javascript" src="/web/20240511232043js_/https://www.govt.nz/resources/vendor/undefinedoffset/silverstripe-nocaptcha/javascript/NocaptchaField_v3.js?m=1695659826"></script> <script type="application/javascript">//<![CDATA[ var _noCaptchaForms=_noCaptchaForms || [];_noCaptchaForms.push('UserFeedbackForm_PageFeedbackForm'); //]]></script> <script src="https://web.archive.org/web/20240511232043js_/https://staticcdn.co.nz/embed/embed.js"></script> <script> (function () { window.onload = function(){ var frameName = new ds07o6pcmkorn({ openElementId: "#shielded-logo", modalID: "modal", }); frameName.init(); } document.getElementById('shielded-logo').removeAttribute("hidden"); })(); </script> <p id="print-date" class="print-date print-only"><span class="print-date__title">Date printed</span> 12 May 2024</p> </body> </html>

CINXE.COM

Typography | New Zealand Government