Contact us|Help|Site Map|Search

• Home
• About Us
• Funding
• Our Research
• Working with business

• Careers
• Publications
• Press
• Events

Logos - web use

• Introduction
• Size and format
• Use and positioning
• Mono-negative logos
• Examples

Introduction

Logos should be in full colour wherever they are used on light backgrounds, but should not have a lighter panel simply to make the logo stand out from darker backgrounds. If the logo must be positioned over a strong colour then the mono-negative version should be used.

As with the print guidelines, do not:

• alter the relationship between logotype (text) and graphic;
• change corporate colours;
• use another typeface;
• abbreviate the logotype or combine the graphic in any way (such as using it as an element of a new logo or symbol).

The NERC logo must always appear in full, with both logotype and graphic together. If necessary, the circular research centre graphics can be used without any logotype. For very small sizes use the round graphic alone to avoid the smaller text of the logotype becoming illegible.

Size and format

Logos should not be created from scratch - download from these pages, or contact NERC Communications.

• Do not produce a larger logo from a small one as this will give poor resolution.
• Save logos as GIF or equivalent file format.
• Keep the file size to 4-5KB or less to speed loading.
• Save logos on a similar background colour to the page.
• Save logos at the same size as they are used on the page.
• Do not save logos such that the circular graphic is smaller than 45 pixels diameter for research centre logos, ensuring legibility of the small NERC wording.
• The NERC logo may be reduced down to 125x38 pixels.
• Ensure logos have an "alt" tag giving an appropriate description, and a "title" if needed.
• Approved logos are available from these pages - you can "right-click/save as" the graphic(s) you need.

Use and positioning

The full research centre logo should appear on the homepage (and any other principal entry points to the site) not smaller than the minimum size, and should be positioned well within the area viewable by a browser window set at 800x600 pixels. The preferred position is top-left.

On the homepage of research centre websites, the NERC logo should also appear, and should function as a link to the NERC homepage (www.nerc.ac.uk). It should be no smaller than 125x38 pixels, and appear on the correct colour background to avoid any halo effect. If necessary, it may be positioned below the immediately viewable area (ie so you scroll down to see it), but not to the side.

When a logo is positioned over a light background image or pattern, a full-colour logo with a transparent background should be used (also known as Alpha transparency). It will usually be sufficient to start from the standard colour logo and simply set the white background matte to transparent. If you cannot get a crisp logo, try starting from the larger logo size, then removing the white background (including within letter characters), and finally scaling to the size required.

Mono-negative logos

If the logo needs to be positioned over a dark background image or pattern, the mono-negative (ie white out of the background) version should be used. As these need to be custom-produced to match the background colour, we cannot supply these ready to use. Please follow this method:

1. Identify the background colour (take an average if a pattern or photo)
2. Open a large size logo (1000 pixel wide version is ideal) in a graphic editing software package (eg Photoshop, Fireworks or Paint Shop Pro).
3. Select the white background, delete it - and then before exiting the marquee selection, choose "Select Inverse". Use colour fill to replace the logo colours with solid white. If your software includes a "Colour-swapper" tool, this may also work well.
4. Create a colour box behind the white text to match the dark background.
5. Resize the image down to the dimensions you need.
6. Export the logo (as a GIF or PNG). Choose an output setting that makes the background colour transparent (depending on your software, you may be able to use a dropper tool or similar to identify the background colour).
7. Check that the output graphic appears looking crisp on the background colour (like example #1 below), not blurred (#2) or with "halo" effects (#3,4).

Examples

  1. Correct logo appearance:
   

  2. Incorrect logo - created from same-size graphic:   

  3. Incorrect logo - background was set too dark:   

  4. Incorrect logo - background was set too light:   

Search