UN Web Style Guide

This is a template showcasing the different styles and libraries used on the UN.org home page.

font-family: 'Roboto', sans-serif;

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

Weights and styles

Roboto Light

Roboto Regular

Roboto Regular Italic

Roboto Medium

Roboto Bold

Roboto Black

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Example

h1. United Nations heading

h2. United Nations heading

h3. United Nations heading

h4. United Nations heading

h5. United Nations heading

h6. United Nations heading

The global default font-size is 1.3rem (13px) based on the CSS psuedo-class :root value of 62.5% (1rem = 10px). The line-height is 2 rem (20px). REM is currently the most accessible method to define font-size.

This is applied to the <body>, paragraphs <p>, and lists <ul> <ol>.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse enim urna, tincidunt id lectus in, porttitor sagittis justo. Etiam quis arcu ullamcorper, faucibus nibh euismod, luctus lacus. Proin rutrum quam et tortor faucibus, eu suscipit nisi vehicula. Ut ullamcorper dui sit amet viverra ultricies. Aenean hendrerit, lorem pharetra lacinia commodo, magna felis laoreet nunc, at gravida lorem leo ac nunc.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
Cras non sodales quam. Fusce posuere dolor eget
Metus sollicitudin interdum. Nullam eleifend aliquet ante malesuada tincidunt
Nulla facilisi. Vestibulum auctor nisi cursus semper placerat.

Aliquam tortor velit, malesuada in ullamcorper ac, tempus in dui. Ut ultrices aliquam augue, ut feugiat libero vehicula gravida. Vivamus consequat, metus in euismod dignissim, justo ligula vulputate ligula, ut rhoncus odio sem vitae quam. Mauris ac mattis nibh. Pellentesque sit amet mauris at metus accumsan auctor. Cras accumsan velit libero, non ultrices augue sagittis sit amet.

Doloremque laudantium, totam rem aperiam, eaque
Ipsa quae ab illo inventore veritatis et quasi architecto beatae
Vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
Quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.

Labels are applied in the home page and in sidebar menus across the different pages.

Example

This is a label

Blue

#00ADEF

Dark Grey (80% black)

#333333

Grey (70% black)

#4D4D4D

Light Grey (5% black)

#F2F2F2

Blue is used for page elements but NOT for text nor backgrounds.

Light Grey is used for page elements such as borders and backgrounds, but NOT for text (For details, see the guidelines for accessibility-compliant use of colour).

Dark Grey is used for body text, and Grey for the Site Title, the Navbar, and some subheadings.

Arabic

Chinese

English

French

Russian

Spanish

The UN home page uses the Superfish menu plugin. You can add a basic version of the menu (example below) or add a horizontal second tier. Click here for more information on how to implement other versions of the menu (vertical, nav-bar and supersubs)