It governs the logos, fonts, images, colours and layouts used in posters, documents, videos, brochures and online.
A strong visual identity enables people to easily recognise Sightsavers, differentiates us from competitors and ensures everything we produce looks consistent and professional.
Much of the reference material can be downloaded from iVillage from the ‘Brand assets and templates’ folder (access is limited to Sightsavers staff only). External suppliers: ask your Sightsavers contact to provide any items you need.
If you have questions about our visual identity, contact the design team: [email protected]
Our logo is made up of two elements: the Sightsavers name and the interlocking rings. The rings represent partnership – the way in which we work – and they combine to form an eye symbol. The logo aims to project confidence and authority. The colours create a striking contrast that is as accessible as possible to people with visual impairments.
There are two versions of the logo: horizontal and vertical. Use the version that complements the composition of the design.
All versions of the Sightsavers logo can be downloaded from iVillage, from the ‘Brand assets and templates’ folder. External suppliers: ask your Sightsavers contact to provide any items you need.
Italian logo
When designing content for the Italian market, the Sightsavers Italy logo must be used. It includes the strapline ‘Italia ONLUS’, an acronym for ‘Organizzazione non lucrativa di utilitá sociale’ (Italian social organisation).
This logo should be used in the same way as the master logo, and must follow the same rules for clear zones and positioning.
There are several colour variations of the logo, which can be used on coloured backgrounds where the primary logo isn’t as legible because of contrast levels.
Contrast with the background is the only factor that should determine which version of the logo to use. Different versions should not be used to represent or imply a sub-brand.
If the logo is positioned on an image, make sure the background does not affect the legibility of the logo. If necessary, place the logo in a coloured footer. See the ‘Brand in action’ section for examples.
A clear zone must be maintained around the logo to ensure maximum impact and make sure it is easy to read. The clear space (X) is defined by the height of the capital ‘S’ in the Sightsavers logo. Please do not position anything within the zone indicated in grey. See below for guidelines about positioning the logo on the page.
Minimum height
The vertical logo should never appear smaller than 15mm in height. The horizontal logo should never appear smaller than 7mm in height.
For printed publications such as brochure front covers, policy documents and advertising, the logo should be positioned in the bottom right corner.
For letterheads, compliments slips and large-format communications such as pull-up banners, the logo should be positioned in the top left corner.
For digital products, the position of the logo will vary depending on the platform and the constraints of the format.
See the ‘Brand in action’ section for examples.
Some of Sightsavers’ high-profile projects use a ‘lock-up’ featuring the Sightsavers logo and the name of the project. This ensures each project has its own identity, but retains a visual connection to Sightsavers.
Each lock-up has horizontal and vertical versions for maximum flexibility: use the version that best suits the composition. The rules regarding positioning and logo choice are the same as they are for the main Sightsavers logo.
Sightsavers Yellow is our main brand colour. This should be the dominant colour used in all our branding and creative content, to ensure our work is consistent and instantly recognisable.
Raspberry and blueberry are our secondary colours. They are used to complement the main brand colour and can be used as background colours.
The extended colours are used to complement the design but not overpower the brand colour and secondary colours.
The website colours mirror many of the main brand colours. Note that Sightsavers Yellow is used less frequently on the website than it is in print, to ensure good colour contrast.
All the colours have names: use these to avoid confusion.
Note: Sightsavers only uses black for text, keylines and line drawings. We do not combine yellow and black: in common use these colours indicate hazards or warnings, which is not what we want to associate with Sightsavers.
Sightsavers Yellow should be the main brand colour, particularly for case studies.
Raspberry relates to our mission. Use it for project and organisational information.
Blueberry relates to our data. Use it for statistics, infographics and research papers.
Only the brand colour and secondary colours should be used on key publications such as literature front covers, or as background colours. Yellow should always be visible, whether as the main background colour, as the text colour, or in the logo.
The extended palette can be used inside publications and on items such as graphs and maps. Tints can be used in background elements, charts and maps.
Colours in the wheel below are shown in proportion according to their importance, visibility and how frequently they should be used.
You can use any colours in the palette as tints at any percentage, as long as you follow the rules for colour use, contrast levels, legibility and accessibility.
Lato is our brand typeface: various weights can be used in Sightsavers publications depending on the design.
Do not use italic styles: they are much harder to read and therefore less accessible. Other weights can be used as required.
What are typefaces and fonts?
A typeface (also known as font family) is a set of one or more fonts each composed of characters that share common design features. Each font of a typeface has a specific weight and style. For example, Lato regular and Lato bold are two different fonts within the same typeface.
Sightsavers’ brand font is free to download at:
www.latofonts.com
www.google.com/fonts
fonts.adobe.com/fonts
Sightsavers’ Microsoft Office templates use Arial as an alternative typeface. Arial is pre-loaded on most computer operating systems: this ensures all documents display correctly when shared internally or externally.
We encourage Sightsavers staff to use Arial 12pt or 14pt as the main text for their emails, to ensure it can be read easily.
For more information about Sightsavers’ brand templates, see the Brand in Action section.
Alignment
Always align text to the left: this makes it easier to see where the next line starts. Never justify text, as this creates uneven gaps between words.
Body copy
Body copy should be Lato Regular at 12 pt, with a minimum of 14.6 pt leading (the space between lines of text). Don’t reduce or increase the tracking (the space between letters) excessively: this can make text harder to read, particularly for people with visual impairments or dyslexia.
Bullets and numbering
Use standard circular bullet points or dashes. Don’t use unusual glyphs or ornaments. If you’re describing stages that happen in a particular order, use numbers instead of bullet points.
Colour choices
Be aware of contrast when choosing a colour scheme, to ensure your test is visible to readers with low vision. Black should be used as the main font colour. Don’t use yellow text on a white background or white text on a yellow background.
Email addresses and URLs
Print: Use Lato Bold for contact details, email addresses and web addresses. Don’t use italics or underlines in print.
Digital: Links, emails and web addresses should be bold and underlined. Don’t use italics on digital platforms.
Headings and titles
Use sentence case for headings and titles. Don’t capitalise each word or use all caps: capitalisation is harder to read, and can be particularly problematic for people with dyslexia and visual impairments.
Hierarchy
Create a hierarchy of information using font weights, sizes and column structures.
Italics and underlines
Don’t use italics, except for titles in references, and don’t underline words. Both of these are harder to read. The only exception is links on the website, which should be underlined.
Ligatures
All ligatures must be turned off to ensure the text is easy to read. For guidance on how to do this, contact the online and design team: [email protected].
Spacing
Do use single spacing in your documents. Don’t use double spacing: screenreaders will read out the second space as ‘space’, which can be annoying for users. Avoid using multiple paragraph returns, or users will hear the word ‘return’ throughout the document. If you need to create additional spaces between lines or paragraphs, use ‘space after’ and ‘space before’ in Paragraph Settings.
Symbols
Don’t use symbols when they can be written out in full. Use ‘per cent’ instead of %, ‘and’ instead of ‘&’, and ‘number’ instead of ‘#’. The exception is currencies (£, $, €), which always use a symbol.
Text positioning
When placing text over a picture, ensure the background offers sufficient contrast to make the text legible. If the text is hard to read, either add a discreet drop shadow, or use subtle overlays behind the text to increase contrast levels.
For further guidance about typefaces and typography, contact the design team by emailing [email protected]
Sightsavers’ branded templates and website contain a selection of pre-set styles for headings, body text, bullet points etc. When using the templates, always use these styles for all headings and text to ensure consistency and to make sure your work adheres to Sightsavers’ branding.
Word template text styles
When using Microsoft Word, the approved brand typeface is Arial. The template features built-in heading styles in Arial, which should be used for all text. Do not manually format any text or headings.
Website text styles
The website uses Lato typeface, to ensure consistency with our print products. There are preset styles within WordPress to be be used where appropriate.
For more information about Sightsavers’ brand templates, see the Brand in Action section.
Sightsavers uses a range of design elements and assets to add interest to designed documents and web pages. These assets ensure our content is eye-catching, easy to understand, and engaging for readers.
The types of assets we use include generic graphics, icons, infographics, charts, photos, illustrations, videos and more.
For examples of how the assets can be used in different types of content, see the Brand in Action section.
All examples shown here are for guidance. If you have any requests or questions, contact the online and design team by emailing [email protected]
Use icons from the brand toolkit to highlight content: examples are shown here. They can be used with callout boxes or on their own.
Each of the icons has a label that corresponds to its file name in iVillage. However, they are designed to be fairly ambiguous to ensure they are flexible and can be applied to a variety of subjects and areas. External suppliers: ask your Sightsavers contact to provide any items you need.
Icon colours
The icon style is a mixture of line and filled shapes. Icons use two colours: a white or black keyline, and a highlight colour from the Sightsavers brand palette. Always consider colour contrast with the background when choosing which colour to use.
For more information about using Sightsavers icons, see the ‘Brand icons’ document, available on iVillage.
Sightsavers’ approved social media icons are stored on iVillage, in the ‘Social media icons’ folder in ‘Brand guides, templates and graphics’.
Make sure you adhere to their individual guidelines: do not change the icons.
Graphs or charts must be clearly labelled and should not rely solely on colours: use additional patterns or data labels to make it easier for readers to differentiate each piece of data. Remember that people with colour blindness won’t be able to tell the sections apart using colour alone.
Don’t include a horizontal or vertical grid in any chart unless absolutely necessary, as it can make the chart confusing to read.
All charts and diagrams should use Sightsavers’ brand colours. Use the main brand colour and secondary colours first, then use the extended colours if more options are needed or you need to ensure good contrast.
To highlight countries, use brand colours and tints of brand colours: make sure the contrast levels are sufficient between adjacent colours. Use a 15% black tint for all other countries, so they are visible but do not stand out.
Use a white keyline to separate countries so borders are easily visible. Use white to indicate water (do not shade these areas).
If you need a custom map, submit a Service Desk ticket for ‘Communications, Design and Events’.
The map can be downloaded from iVillage, from the ‘Brand assets and templates’ folder.
External suppliers: ask your Sightsavers contact to provide any items you need.
When using illustrations in Sightsavers’ design projects, the style should suit the audience. For example, illustrations used for an exhibition in the UK may be highly stylised, whereas those used in training manuals for people living in rural areas may be more traditional.
Choose an illustration style that’s appropriate to the story being told, and be consistent: use the same style throughout the project.
To create a realistic illustration, a full range of colours can be used. There’s no need to limit the palette to the approved Sightsavers colours.
For specific illustration requests, contact the online and design team: [email protected]
We aim to feature the people we work with as central storytellers, and we have a duty of care to protect the people we portray so they are represented accurately.
All our work must adhere to Sightsavers’ ethical content policy. This governs the way we collect content, to ensure we fulfil our duty of care to protect the people we portray.
Read the policy onlineImages should be credited to Sightsavers and the photographer, in this format:
© Sightsavers/Photographer name
In printed documents, the credits should be at least 10pt. If formatted vertically, the wording should run top to bottom. Online, the credit should be included either in the image caption or, if a page features multiple images by the same photographer, at the end of the main text on the page.
Colour overlays can be used on images to create backgrounds within layouts.
Use one of the main or secondary colours from the Sightsavers brand palette, and be aware of colour contrast and legibility when positioning text on top.
The example here uses a greyscale image at 18% opacity, with an overlay of Sightsavers Blueberry at 60% opacity set to ‘multiply’.
Always use captions to give an image context. Identify people in photos using their first name and their country.
To comply with Sightsavers’ ethical content and safeguarding policies, we will never include any more than two of the following pieces of information:
This does not apply to staff, partners or health workers, but does apply to teachers who are linked to children in materials.
As standard we avoid using a person’s full name or precise location at all (regardless of whether they are used together) in any external materials, including reports, unless there is a very compelling reason to do so, and it is agreed there is no risk to the person concerned.
All our images, including caption information, photographer name and any copyright details, can be found on iVillage.
Different channels require different approaches, but the following guidelines should form the basis of all our video content.
Templates are available for all the graphic devices used in Sightsavers-branded videos, including idents, end slides and lower thirds. They are set up to be used in Adobe Premiere.
Screens vary widely in size. Take extra care when creating videos so they display correctly on a variety of screen sizes. For standard videos, use a screen resolution of 1920 x 1080 px (1080p), which implies a widescreen aspect ratio of 16:9.
Video assets can be downloaded from iVillage, from the
'Brand assets and templates' folder.
External suppliers: ask your Sightsavers contact to provide any items you need.
The Sightsavers ident, featuring an animated logo alongside simple audio, should be included at the start of all Sightsavers videos to identify them and ensure they are consistent. It can be downloaded from iVillage.
Use the templates available on iVillage to create specific end slides for video content. There are several options to choose from, depending on the content of the video. Options include an end slide with text, one with a URL and social media links, and one with space to add details about a specific campaign.
The example here includes the Sightsavers URL and can be used for general videos.
Use a title template to introduce content or scenes when needed. Text should be in Lato font, minimum 12pt. Avoid including too many words on each title slide, otherwise it will be hard for viewers to read it.
The templates can be downloaded from iVillage.
The lower third should be used to introduce a speaker’s name and job title. If captions need to be displayed at the same time as a lower third, position the captions above the lower third as shown in the example.
This can be used as an alternative to the lower third. Use Lato bold in Sightsavers Yellow for the name, and Lato regular in white for the title, in at least 28px.
Position the caption in a logical place on the screen to avoid obscuring the video, and use a cross-dissolve to fade in and out. Make sure the contrast is sufficient so the text is clear and easy to read.
Use this to introduce the country or continent in which the video is set. It is positioned at the bottom of the screen and should fade in and out.
Use Lato font for all typography. Select an appropriate style when designing to 1080p:
Positioning
Ensure text is left aligned – this will ensure it is accessible and easily legible. Align title text vertically in the centre of the screen.
Text safe zones
Keep text, captions and subtitles away from the edges of the screen. Content that’s close to the edges may not display fully.
All Sightsavers videos must contain captions: text versions of the audio to describe spoken words and all important sounds (unlike subtitles, which only display spoken words). They are invaluable for viewers with hearing impairments and those who prefer to watch with the volume muted. They also provide clarity when interviewees are speaking with an accent that may be difficult to understand.
Caption position
Line breaks
Punctuation and numbering
Timing
Music and sound
Languages
For more information about video captions, text transcripts and other accessibility features, see the accessibility section of our brand book, entitled 'How we make our work inclusive'.
Our websites use an established visual style and modules within WordPress to reinforce Sightsavers’ branding, using the same colours, fonts and design elements as used in printed content.
Note that all examples display differently when viewed on mobile devices.
Links and signposting
There are several ways to direct users through the site, including call-to-action (CTA) bars and boxes, and side modules that sit alongside text. Each contains a button. Links can also be included within text.
Icons and stat modules
These graphic elements are used to break up the page and draw users’ attention to a particular piece of information. They follow a similar style to Sightsavers’ printed graphic elements.
Campaign pages
Sightsavers’ websites use colour to differentiate specific fundraising and advocacy campaigns. These campaign pages and posts use a designated colour for their call-to-action bars, boxes and stat modules.
We want our websites to be as accessible as possible. We follow the Web Content Accessibility Guidelines (WCAG), a set of international standards that cover best practice for online accessibility.
Read more about WCAG