Skip to main content

Notice a few changes to the site? We’ve made some colour, font and template changes. Love it, like it or not too sure — opinions will vary, but there is a reason for every design element. Design is a process with the focus on the end result. We’ve had a few queries about the updated design so we thought we’d share our thinking.

Font or typeface?

A typeface is a set of letters, numbers, punctuation marks and symbols. Typefaces share common design features. You’ve heard of Times New Roman, Verdana, Arial, and Helvetica? These are typefaces.

A typeface can have many variations of size, weight and style — each of these is called a font. Eg, 10px Arial Bold is one font within the Arial typeface, and 12px Arial Bold Italic is another. A typeface is a collection of fonts, or a font family.

Our starting point for new typefaces

Our quest to find new typefaces for the website began with this feedback:
“Hi there. The font used in the body text on the home page does not look right. The titles and headings look OK but the black text is hard to read. If you select any section and go to that page, the black text is OK. The effect is the same in IE and Firefox.”
We took a look at the website on a few different browsers on different computers. Sure enough, on a few browser/device combinations the body copy was looking pretty messy — as though it had been written using a blotchy old ink pen.

We received more feedback along the same lines over the next few weeks, and eventually decided we would have to chuck out our existing typeface and choose a better one (or two).

Our website is all about the content. It’s important that it’s easy to read and that the text “flows” down the page. This enables you to quickly scan a page and find the information you need.

We can help by breaking up the blocks of text into short paragraphs and bulleted lists. Including headings and sub-headings is also appropriate. Using two different typefaces — one for headings and one for body copy, also improves the “readability” of the page.

It’s a complex task, choosing a new pair of typefaces for a website design. Our typefaces had to achieve several goals:

  1. Go together well — not too similar, not too different, complement each other visually
  2. Look good on the web and be easy to read on a range of devices (desktop computer, laptop, tablet, mobile phone) and platforms (Mac, PC, Android, iOS)
  3. Be free — no room in the budget for buying new typefaces
  4. Any uncommon fonts had to be hosted on our own servers as @font-face font kits — no external hosting
  5. Be a small file size
  6. Have macrons (ā, ē, ī, ō, ū) as part of the standard character set
  7. “Speak with a voice” that relates to the website

Voice — tone and theme appropriate

Different typefaces speak in different voices, and it’s important to choose the right one.

Picture the classic typeface you see on “Wanted” posters in cowboy movies. That typeface is not going to work too well on a stylish wedding invitation, but for a cowboy-themed fancy dress party invite? Could be just perfect.

To find our “voice”, I asked the team for a couple of words that described the feeling or emotion they felt the website embodied.

This is what they said:

Relief, Understanding, Easy, Clear, Trustworthy, Friendly, Authoritative, Clear, Simple, Up-to-date, Reassuring, Open, Not showy, Useful, Clear, Concise, Happy, Relieved, Clear, Reliable, Friendly, Simple, Trust, Simplicity, Ease.

Two themes emerged. “Clear, friendly, simple and easy” and “trustworthy, authoritative, reliable and reassuring”. These became our two voices for the website — one that would guide our choice of the body copy, and the other that we would use for headings.

Our website has to be available to everyone, regardless of the device they’re using, whether they’re on broadband or dial-up, or accessing it from home or on the go.

I decided we should go back to using a web-safe font for our body copy. This reduced the range of typefaces available to us, but it avoids a range of potential download issues. As well as the display issues we had with our original typeface, it also avoids possible delays caused by using the @font-face technique to load typefaces. Also, there are quite a few mobile devices and browsers that don’t support @font-face at all, including Opera Mini, BlackBerry 4 and 5, and Windows 7 – 7.8.

After some research and experimentation I selected Verdana as our body copy typeface. Matthew Carter designed Verdana in 1996 for Microsoft for use on the web. It’s a wide, open-looking font, easy to read and friendly-looking. We think its voice is “clear, friendly, simple and easy” and it fits all our criteria.

We decided that we were happy to use @font-face for our headings, which gave us a wider range of typefaces to choose from. The presence (or absence) of macrons cut down our list of potentials, as did the need to host the fonts ourselves. I looked at both serif and sans-serif fonts. We tried out a few different combinations, and eventually settled on a serif typeface called Libre Baskerville, by the Impallari Typeface Foundry.

I felt that it reflected the “trustworthy, authoritative, reliable and reassuring” voice we were looking for. It feels trustworthy and reliable with its wee feet (serifs) placed firmly on the ground. Libre Baskerville is a new version of a classic typeface and has been tweaked a little bit to make it easier to read on the screen, at any size.

To style our text, I used two typesetting techniques that every designer knows — the typographic scale and vertical rhythm.

Print typesetters have used the typographic scale for centuries. It provides a set of sizes for headings and body copy that are in harmony with each other. Vertical rhythm is a way of working out the spacing between your lines of text, and before and after headings of different sizes. It creates a feeling of harmony and “flow” within the text on the page.

Both techniques add to the ease of reading of a page. You might not consciously notice when a page of text uses the typographic scale or has good vertical rhythm, but your eyes and your brain will thank you for it.

We replaced the old typeface with our two new typefaces a couple of months ago, and then set to work on the new look & feel of the website.

A new look and feel for

We modelled the original design of the beta site on GOV.UK, it’s been our inspiration and a source of usability research from the beginning of this project.

It was a great starting-point for us, and it enabled us to get the alpha and beta sites up and running quickly. We could concentrate on producing great content, rather than worrying about the design too much.

Once the team had made good headway with the content, they were able to give me the task of re-working the design to give it a more “New Zealand” feel.

The brief was to keep the general structure of the pages pretty much the same – our user research was showing us that they were (mostly) working well —so  my re-design should be more of a re-skin, rather than a complete do-over.

The design is quiet, understated, simple, calm and gentle. The aim is to let the content shine, rather than shouting about the design itself - reflecting the New Zealand character as a little bit reticent, modest, and quietly-spoken.

The colours reflect our landscape - the beach, the sea, the sky and the land. I took the colour palette of blues and greens from a classic photo of bunny tail grasses on the beach, and that became the starting-point for the re-design.

I defined the edges of the “pages” with old-school shadows, creating the sense of the website being something of a reference book for Kiwis and visitors alike. Adding a subtle texture to the outer areas of the screen beyond the edges of the page provides some interest to those great swathes of white on a wide-screen. It also dampens down the bright whiteness a bit — making it a bit easier on the eyes. On a narrow screen, such as a tablet or a smartphone, the page edges and background texture disappear, as they are no longer required.

The blue of the header reflects the blue of the sky, maybe on a day when a strong southerly has washed the air clean. The blue of the footer appears almost transparent over the textured background and shadows, like water lapping on the shore. I’ve used a few different shades of green to highlight various elements in different parts of the site and to provide a secondary colour within the design.

New Zealand has more shades of green that any other country I’ve ever visited. The sky is bluer here than anywhere else I can think of, and I hope that my design reflects that in a subtle way.

One of the comments we received occasionally in our user testing was that the previous design was “a bit plain” and could do with some colour or pictures to add a bit of interest, and to make it look less like one of those for-sale URLs you sometimes accidentally come across online. So the final element I brought to the re-design was the introduction of photographs of New Zealand, on the homepage and the first page of each main section or category of content.

The look I was going for is all about Aotearoa, with a subtly proud/iconic Kiwi vibe. It’s a little bit retro, a little bit 1950s, it’s representative of the beauty of NZ, and slightly quirky with a gentle sense of humour at the same time. The photos have white borders and shadows. They look like pictures from your parents’ or grandparents’ box of old photos.

There are two photos for each category page. There’s a contrast between each of the photos we’ve selected. Old/young, urban/industrial, beach/mountains, or sometimes there’s just a contrast of colours. It’s a feel thing as much as anything else, so I created no rules, just guidelines.

All the photos have some kind of relationship with the subject matter of that particular section of the site. Some like the Māori carving and the military uniform on the ‘History, culture and heritage’ page are directly related to the content, and others are more symbolic, and even a little bit fun. We call the combination on the ‘Work and jobs’ page “Boots and suits”.

I found a great source of New Zealand photos on Auckland photographer Andrew Smith’s CubaGallery Flickr page. Andrew takes photos that are simple, serene, and quietly beautiful — and he uses various visual effects to add a retro vibe. His photo treatment and overall look-and-feel has become the guideline/standard for our photo selection. Where there wasn’t a suitable photo in Andrew’s collection I used stock photos from iPhoto and MyChillyBin, and also used a couple of snaps from my own collection. It’s a long process to put together a photo collection, and I’m really pleased with the end result.

Design is a subjective thing. Some of you will like it, others may not. In the end, what matters most is that our visitors find the website easy to use. The design focuses on the readability of the great content that the team has written for the site. “Content is King”, they say, and I agree. Have a look at the design of and read some of the content. Tell us what you think.

Post your comment


  1. Terrence Wood 13/06/2014 4:26pm (5 years ago)

    Can you expand on the use of vertical rhythm and typographic scale. What is the scale based on?

  2. Dominic Lane 13/06/2014 4:52pm (5 years ago)

    Alison, what a wonderfully clear description. But that is no surprise. Keep up the great work.

  3. Alison Green 13/06/2014 8:31pm (5 years ago)

    Hi Terrence, thanks for your question.

    The typographic scale I'm using is the classic "Elements of Style" one noted by Bringhurst: 12, 14, 16, 18, 21, 24, 36, 48, 60, 72. As I'm sure you know, it's been used as a guide for print typography for centuries, and because our website is all-about-the-text, it works pretty well for us too. I haven't stuck absolutely slavishly to it, but the majority of my font sizing fits this pattern. For example, the headings H1 - H6 in desktop mode are 48px (36px H1 Maori text), 24px, 21px, 18px, 16px, 14px. I've used a mixin that allows me to size my fonts in pixels first (makes it easy to visualise), and then it re-calculates all our font sizes as rems with a px fallback for IE8.

    In terms of the vertical rhythm, my base font size is 16px, which is the size my paragraphs are set at (in rem equivalent). My base line-height is 1.5. This gives me leading of 24px, and this is the spacing (or multiples/fractions thereof) that I've used with many typographic and layout elements throughout the site.

    I use a tool called GridFox, which enables me to overlay a grid (set to my specific line-height) onto any web page, and then tweak the distances between various elements so that they match the grid as well as possible. Clearly, with wrapping headings you can't get it perfect all the time, but I've spent a considerable amount of time getting it as close as I can with as many typographic combinations as possible.

    Bulleted lists, for example, (of which we have many) hit the grid on every line if it's a single bullet with wrapping text, and every 5th bullet if they are single-line elements. This distance feels right to me. They are also pulled up towards the preceding paragraph by 6px as the full 24px felt too far away.

    There's quite a bit of measure/feel going on throughout the site in terms of my technique. Meaning that I will set elements by the exact vertical rhythm measure initially, and most of the time that feels right and I'll leave it as-is, but occasionally it will need a bit of tweaking up or down, and I'm cool with doing that too. In the end it's all about the ease of reading and/or scanning, and sometimes you have to go by gut feel.

    On pages where the measure is narrower, for example where the page contains repeating blocks or columns of content, I can tighten up the line height a wee bit, which I have done in some places where it felt right to do so.

    We've used another mixin that allows me to set my spacing (padding, margin etc) in pixels (again because I find this easiest to visualise), and the mixin converts this to rems based on the base font size of 16px, again with a px fallback for IE8.

    This technique has made things easy for the creation of, for example, the print stylesheet (which is coming soon!) - I've been able to re-use many of my typographic styles and font sizes in the print stylesheet and then just set the base font size a bit larger (20px), which reduces everything in size automatically so it's a good fit for the printed page. Saves me having to go through and re-size everything by hand for print - and the vertical rhythm is translating well into print too.

  4. Alison Green 13/06/2014 8:33pm (5 years ago)

    Hi Dom!

    Thanks so much - I'm glad you liked it :)

  5. Terrence Wood 16/06/2014 2:54am (5 years ago)

    Thanks for your prompt reply.

    On which browser and device combinations did the orginal font not work?

    The orginal font is Adobe's Source Sans Pro (subsetted using Font Squirrel's online tool) - it is also currently used in production on other websites.

  6. Alison Green 16/06/2014 4:30pm (5 years ago)

    Hi Terrence, thanks for your question.

    We received comments about the font from a number of people, some of whom contacted us via our feedback form, and others who emailed us directly and included screenshots so that we could see what they were seeing.

    The issue was that the typographic colour (defined as the relative lightness or darkness of a block of text) was uneven, particularly the body copy, in some browsers in some platforms for some people. One common characteristic of the browser/OS combinations was that it appeared to be more likely to happen in older operating systems, and/or for older browsers.

    Internet Explorer, Firefox and Chrome were all mentioned as having issues.

    To give you a couple of examples:

    "I dont like the current font, on my Philips 19" screen it looks like it is missing bits of the characters, it is very hard to read and difficult to scan. Some characters stand out more than others so half a word looks like it is in bold!" (initial feedback)
    "I am Using IE9, on a Philips 19" screen. To me the font of the body text looks uneven, with dark and light bits within letters and between letters and words. The text in bold or the next size up is okay." (clarification after we had asked for details)
    Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)

    "On my monitors the font display for the beta home page text can be weirdly weighted (depending on zoom in and out) the 'g's,'a's and 'e's look semi-bold (or heavily serifed - not sure what the issue is)."
    Firefox v22, Windows XP

    "The font used in the body text on the home page does not look right. The titles and headings look OK but the black text is hard to read. If you select any section and go to that page, the black text is OK. The effect is the same in IE and Firefox."
    Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0

    Because this looked like it was affecting a wide range of users, and having done some further testing on our own machines and others we decided that the best thing to do was to replace the font.

  7. Donna 16/06/2014 10:31pm (5 years ago)

    Alison, Well done, I really like the "kiwi" touches, the photos work well and the look definitely conveys nostalgia. I didn't see any green, maybe I didn't look far enough. Can you please point me to where I can find where you have used green. Keep up the wonderful work!

  8. Alison Green 18/06/2014 1:02pm (5 years ago)

    Hi Donna - thanks so much for your comments - I'm happy to hear that you like the design.

    The green is definitely a secondary colour in the colour palette. I've ended up using it quite sparingly (although in one of my early iterations of the design I did have the headings in green as well).

    You can see a dark green in some of the icons and symbols, such as the search magnifying glass and the feedback box arrow, and in the bullet points in the right-hand feature column. It's also used as a dividing line in some places, for example in the main hub pages linked off the homepage from the "Information and services" block. A softer shade is also used as the :focus colour sitewide.

    There are also a few larger elements where I've used lighter shades of green that are either still in production and yet to be rolled out (such as new buttons in our filter pages), or that we haven't needed to use yet (such as promo boxes in our hub pages).

    I also styled and built a green version of the Site menu footer at the very bottom of the page, so if the team decides they'd like a bit more green at some stage, it's available for them to use.

  9. Rachel 18/06/2014 1:54pm (5 years ago)

    Thanks Alison,

    Fascinating to find out about vertical rhythm and the typographic scale - thanks for the links and the explanation. It was also nice to see my feedback quoted (the old typeface was blotchy on my screen). I really like how the beta team shares your thinking - great work, please keep it up! A lot of work and thought goes into making something look simple, and it's good to see the care and attention that goes in to each detail.

    One small point around the photos (which are all stunning images). I had a look at the "suits and boots" image you mentioned and my impression was that both pictures skew towards associating work with male images (not that women can't wear boots or a pinstripe suit at work - the Lego firecrew has a female firefighter after all). It's a tricky thing choosing images, as there is so much imagery associated with them.

    Thanks again,


  10. Alison Green 18/06/2014 7:15pm (5 years ago)

    Hi Rachel

    Thanks for your comments - I really appreciate the feedback - and I'm glad my responses to other questions have been of interest to you as well.

    I'm pleased you like the photos - I absolutely love them - I think they're beautiful, and I think they reflect our beautiful country really well. That's such an interesting comment about the "work" photos - I hadn't thought of that - probably because I'm a boot-wearing kind of a gal myself - but you're right, it's definitely something to retain awareness of when we're looking for more photos in the future.

RSS feed for comments on this page | RSS feed for all comments