The typeface

A family of fonts including, Display, Regular, Italic and Bold

Updated

On this page:

The typeface

The National Trust has developed its own typeface. It is designed to have the warmth and modernity of a sans-serif typeface. From the Brand Guidelines document:

The typeface is inspired by a 1748 inscription originally in the grotto at Stourhead. The sans-serif style was used in the ancient world, but this inscription is one of the earliest examples anywhere of its modern revival.

Our typeface is an important asset of the National Trust: no other organisation is allowed to use it, and it helps us to be recognisable every time we write something.

National Trust typeface
National Trust typeface

Web fonts

In the thrusting world of digital design and development there is a spiffy new way of implementing your favourite typeface online. Offerings (to name a few) like Typekit, Fonts.com and Google's Web Fonts allow us to easily include well rendered and accessible custom fonts into our web projects via the @font-face rule.

However, despite some of these services (especially Google) offering it for free, there are generally costs involved. But then, we want to support the craftsmanship of typography in this digital age, so we don't mind paying.

The National Trust typeface and the law

As we had an existing licence with the typographer who created the National Trust typeface (Commercial Type), we had existing channels to go through to extend that licence for digital use.

As such we have paid for a perpetual licence to use the typeface for digital projects, but have only funded its use across 5 domains. Currently the typeface is being used across two domains.

As of it has been agreed that its use is restricted to national digital projects. Implementations elsewhere will have to either pay to extend the licence for an additional domain, or use fallback solutions to display the National Trust typeface.

Currently there is no licence for its use (as a stand-alone font file, not as an image equivalent) in mobile applications.

Referral script

If you are using the National Trust font in a digital project, your website must have a referral script set up, so that if someone finds the URL to the font files and tries to visit it, they will get re-directed to the website's homepage.

While it is likely that smart people will find away around this, in accordance with our licence agreement, this method offers sufficient font protection.

To clarify

Without a referral script in place on a domain that uses this web font approach, we would be breaking the terms of the licence agreement.

If left unchecked, this could get us into quite a two-and-eight with the typographer and most likely lead to some expensive legal wrangles. Let's avoid that if we can by implementing it correctly.

The @font-face rule

The @font-face rule has been around for quite a while, supported by Internet Explorer long before some of these modern browsers came along. It resides in our CSS file, as a list of file references and font settings, which then allows us to 'call it' throughout the rest of our CSS.

The HTML text is then lovingly rendered in that font because the browser temporarily holds a copy of it so as to display it to our customers.

Here's an example of that CSS rule:

  • @font-face {
  • font-family: 'NationalTrustDisplayWeb-Regular';
  • src: url('../fonts/NationalTrustDisplayWeb-Regular.eot?') format('embedded-opentype'),
  • url('../fonts/NationalTrustDisplayWeb-Regular.woff') format('woff'),
  • url('../fonts/NationalTrustDisplayWeb-Regular.svg') format('svg'),
  • url('../fonts/NationalTrustDisplayWeb-Regular.ttf') format('opentype');
  • font-style: normal;
  • font-weight: 400;
  • font-stretch: normal;
  • }
Tag logic that works

Note the four url references (separated by commas under the one src attribute) to the various file formats of the same font. These provide the necessary options for how different browsers (Internet Explorer, Chrome, Firefox etc) interpret font files.

Implementing your own web fonts

It's reasonably easy to set up your own web fonts for your website. Make sure you have the various types filed away somewhere logical within your website project, and you've referenced the files as explained above. All that remains is that you reference them in your CSS file for whichever element you want, like this:

  • h1 {
  • font-family: 'NationalTrustDisplayWeb-Regular';
  • font-size: 2em;
  • font-style: normal;
  • font-weight: 400;
  • }
Referencing your web fonts in CSS

In the example above, all our <h1>s will be rendered in the National Trust Display font – lovely stuff!

To reference the font we used above, for instance, apply the necessary CSS rules, changing h1 for whatever text element requires it. Edit the other rules to suit your specific requirements.

Fallback solution

The wonders of JavaScript and Cúfon

The handy web-based service Cúfon allows us to convert our font files into JavaScript files suitable for use on websites. The technique offers suitable font protection against possible misuse or infringement of font licences; the files are pretty much useless for anything other than rendering on the web.

This technique should be used to implement the National Trust typeface on websites that are unable to take part in the licensed web fonts approach.

Here's how you can implement the Cúfon approach

Taking the four available font files of the National Trust typeface (from the Brand Centre), visit the Cúfon website and process each file individually.

Choose the necessary glyphs – erring on the side of portability rather than completeness so as to keep the JavaScript files produced low in file size. It is pertinent to add security to each file, so take the time to fill in that section with the relevant domain you'll be using the font files on.

Acknowledge the terms set by Cúfon and hit the 'Let's do this!' button. Your font file will be produced and made available for download.

Putting the files in your web project

Getting the files in your web project is reasonably simple. Reference the necessary JavaScript files in the <head> of your HTML file. First up should be the Cúfon plugin:

  • <script type="text/javascript" src="javascript/cufon-yui.js" ></script>
Make sure the Cúfon plugin is first...

Then it's each font file that you want to use, for instance:

  • <script type="text/javascript" src="javascript/National_Trust_TT_700.font.js" ></script>
...and the font files after.

It is best to style your fonts first using a default like Helvetica. Make sure you do this, as if someone views your website without JavaScript (which some people still do), your typography will still look good when Cúfon isn't running.

Once you're happy with the presentation of your typography, apply the following JavaScript at the bottom of your web page(s):

  • <script type="text/javascript">
  • Cufon.replace('h1');
  • </script>
This is the function that'll turn your selected tags into the required font.

Note: There may be some discrepancies between how your CSS typography renders when Cúfon is running. Double-check the details during development and fine-tune your typography where necessary.

If you're only using one font file, then the above function will apply that font to tags added to it. In this case, <h1>s will be in the bold font.

If you're using different weights and are referencing multiple files, amend the function to something like this:

  • <script type="text/javascript">
  • Cufon.set('fontFamily', 'National Trust Bold');
  • Cufon.replace('h1');
  • Cufon.set('fontFamily', 'National Trust Regular');
  • Cufon.replace('h2');
  • </script>
This is the function that'll turn your selected tags into the required font.

Our <h1>s will be in the bold font, our <h2>s will be in the regular font.

You can find more detailed help on the github page of the Cúfon project.

Back to top