Use the tagline on page where it is likely a reader's first time to the brand.
When possible, use the tagline at the beginning of the page but collapse after scrolling.
Always place the tagline below the logo.
For recurring surfaces like the newsletter, we don't need to repeat the tagline.
The tagline does not need to be persistent across the page.
When our one-line wordmark and logo is not legible, use the two-line icon. This is primarily used for social icons and avatars.
Rotate through different color palettes in different applications. In other words, Twitter, Facebook, LinkedIn should have different colors.
Do not use the diacritics that appear in our wordmark.
Words are most of what we do, and they are how readers will consume our journalism and use our site. Type is the main medium in which we tell our stories and communicate our brand. Readers also learn how to use our site through the different fonts we employ, and every one has a role to play on our site. And every font has a personality. Choosing a typeface is like casting an actor in a play, and combining them is like evaluating if these actors have chemistry. We are essentially casting characters to help tell our stories.
Moderat can hold up a serious story and a playful one. Its geometry and evenness gives it a sturdy quality, and its roundedness can be playful. The bold weight makes for great headlines, and the light weights are still readable. Its features are subtle: the little serif on the a, the corner in the t, the g’s, which are quite fun. Our stories, while technological in their focus, are human at their core. Some sans serif fonts can be a bit cold/plain and lack personality. However, these tiny qualities of Moderat give it some humanity.
GT Sectra is easy to read as a body text. On closer inspection, you’ll see the personality of GT Sectra. It has sharp corners, clever angles, and straight lines where other fonts have curves. In its italic form, it does not look overly formal, like Baskerville or Georgia. GT Sectra comes in different weights and sharpnesses, offering a lot of flexibility. In its least sharp form, it is subtle, and in its sharpest and italics forms, it is incredibly distinct.
Input Mono is a typeface designed for coding. For UI, it is a readable type even at its smallest accessible size (10pt). In its all-caps version, allowing for wider kerning and tracking (space between letters), it is distinct but better used as a supporting character to Moderat and GT Sectra.
Moderat is a round sans with even strokes, whereas GT Sectra Regular is an angular serif with a light contrast in thick and thin strokes. The combination of round, even, angular, and high-contrast qualities can be dynamic. The roundness of Moderat and the angularity of GT Sectra complement our logo and its various diacritics. Despite their different qualities, they have similarities in certain characters most notably in the a’s, g’s, and y’s.
b. Typeface roles
There are three sets of roles for typography: Story, Brand, and UI.
Stories are made up of a wide array of different elements, from headlines to captions, bylines to pull quotes. Story fonts use all of the fonts available.
GT Sectra Book
GT Sectra Book Faux Bold
GT Sectra Italic
Input Mono Regular
Input Mono Faux Bold
HEDs: Whether headlines are on the homepage or a story page, HEDs are always in Moderat Bold.
DEKs: When possible, use GT Sectra as the DEK. When the DEK is overlaid onto an image, as in Featured Story Templates [link later], use Moderat Regular, because GT Sectra is lighter in weight.
Headings: Always use Moderat Bold.
Paragraph copy: Always GT Sectra.
Kickers: Use Input Mono.
Captions and credits: Use Input Mono.
Data: When data is presented in focus, as in a chart or visualization, use Input Mono for the data points. For chart headings, use Moderat.
When we communicate as a brand and organization, we use Moderat.
Even for paragraph text, we use Moderat to distinguish our brand communications from our journalism.
For UI, user prompts (“Share,” “Sign Up,” etc.), we use Input Mono.
Input Mono Regular
Input Mono Faux Bold
Use Input Mono for links when appropriate. For story/content links, sometimes Moderat is preferable, as in the case of navigation-menu links.
a. Color Palettes
Our stories span the globe, and we want our site experience to feel immersive, and to capture the vibrant diversity of the countries we cover.
Try to match the color palette with the tone and imagery of a specific project.
Use the middle color (e.g., “Peach” or “Frost,”) to call attention or create a visual separator. The middle color is also used when there is an overuse of lines to separate different items or groups.
Don't mix multiple color palettes within a single viewport, unless it's a special project warranting surprise and delight – a confetti-like effect.
Don't use the middle color (e.g., “Peach” or “Frost”) as the main background color for the page.
Whites, grays, and blacks
White and black is used for text for maximum contrast and items of the highest visual hierarchy. Different levels of gray are used, sometimes as rules and in text.
The combination of the accent color, dark gray, darkest gray, and black are used in displaying article data: kicker/rubric, headline, dek, byline.
Most rules and lines are either in light Gray or black and sometimes in the accent color.
Don't use black text on an accent color background. Always use white text on the accent color.
Never use darker grays as rules; only use #CACACA.
More commonly known as accent marks, these glyphs are used in many languages to change the sound value of a word. For example, the cedilla (as in ş) is used in Turkish, French, Portuguese and several other languages. The circumflex with the underdot (ộ) is less common, and appears in Vietnamese. This visual element playfully reflects the creative nature of our brand, and the incredible variety of cultures and communities we cover around the world. While most prominently featured within our logo, they also appear throughout our site and off-platform in various ways as patterned banners, alternative menu icons, story chapter separators, and more.
Create a pattern by limiting the use of diacritics within each viewport or experience.
Try playing with the outline or opaque versions of these marks.
Never use diacritics in black.
b. Banners and Rules
Diacritics are occasionally used as banners or rules, which can often be used as a separator of content.
Use one diacritical mark per banner.
Play around with different grids for the patterns: rectangular grids, staggered grids, rotation, etc.
Use them with the right color palettes.
Within one page or experience, try to limit use to one banner to avoid busyness of the page.
Preferred file formats are:
PNG (lossless, 24-bit format or higher)
For landscape photos/illustrations (wider than tall):
Width greater than 4096 pixels
For portrait photos/illustrations (taller than wide):
Width greater than 2048 pixels
Track to aspect ratios only as it makes sense for your work.
Be mindful of critical details that fall close to edges. Where automated cropping may occur (thumbnails, etc.), padding images with appropriate filled background color can help.
Custom: Some features have specific design needs that dictate a focus on a specific aspect ratio. For example, our "Been There Built That” interview series uses illustrations in a 1:1 aspect ratio.
See more detailed guidelines for screenshots below.
Meaningful filenames are appreciated. See more detailed guidelines below.
When in doubt, send the largest image you have :)
PNG and JPG formats are preferred, but please use the format that makes most sense. In general, high-quality lossless options should always be used. If the image contains transparency, then a PNG must be used.
There are times when SVG (vector-based images) should be used and other times when PSD files should be provided (layer information required).
In most cases, you would naturally avoid these formats unless there was a unique circumstance: PDF, GIF.
The foregoing guidelines don't apply to screenshots, which are beholden to the device on which they are taken and its operating system.
The name of the file is very often what is used when it is uploaded. File names thus have consequences when it comes to search engines, accessibility, and general readability.
A good file name avoids ambiguous words, underscores, spaces, capitalization, and numbers.
We recommend using the name of the agency or photographer/illustrator as the file’s leading keyword.
There are different guidelines for screenshots.
Screenshots should be provided unmodified and in their original form.
Please rename screenshots to include information such as device and keywords (browser and site name or app name, etc.). When a filename has spaces (" ") or underscores ("_"), please replace them with dashes ("-").
Screen Shot 2020-08-03.png
e. EXIF Data
Exchangeable Image File Format (EXIF) is embedded into an image file when a photo is taken. It often contains information such as aperture size, shutter speed, ISO, focal length, camera model, the date the photo was taken, and other details.
We use/mine EXIF data to pre-populate captions, descriptions, and credits in our content-management system.
For some photographs, it may be appropriate to remove sensitive information to a source’s protect privacy or location. If a photo is potentially sensitive and you are unsure how to modify its EXIF data, please let us know.
a. Borderless, when possible
Like the internet. What does this mean?
a. Republication and licensing guideliness
Rest of World
allows certain articles on our site to be republished by other newsrooms, publications, or other entities. Articles marked “News” or “Reports” that have been live on our site for at least one week may be republished. Features or special projects are not available for republishing at this time.
Nonprofit newsrooms, publications, or other entities may republish articles free of charge; for-profit newsrooms, publications, or other entities may license articles for a one-time fee. In either case, please contact us at firstname.lastname@example.org
to complete an agreement and, in the latter case, learn more about our licensing fee tiers.
Any republished or licensed content must include the following:
- This tagline at the top of the republished article:
“This article was originally published by Rest of World, a nonprofit newsroom covering the effect of technology outside the West.”
- In the tagline above and/or at the end of the article, include a link to
- For print-only versions please write the URL out "restofworld.org" (not "www.restofworld.org")
- The author or authors’ name(s) clearly credited.
b. Photography and illustrations
Photography and illustrations created for Rest of World
may also be republished or licensed for use with associated articles under the same conditions as above. Photos and illustrations may be used for social postings, print or digital, and in perpetuity with strict adherence to crediting guidelines, and only in association with articles specified under each license. Please contact us, as above, for the licensing fee tiers for each piece of art you are interested in republishing.
Any republished or licensed photographs or illustrations must include the following:
- Credit line must read “Photography by [name] for Rest of World” or “Illustration by [name] for Rest of World”
c. Social Promotion
In any promotion on social platforms or newsletters, our relevant social handle should be tagged (e.g., Twitter promotion must tag @restofworld
Writers and photographers involved in a story should be credited in any social promotion. If they have relevant social accounts, they should be tagged.
To ease cross-promotion, licensing partners must follow our social accounts.
^ BACK TO TOP
Can't find what you're looking for or require more guidance? Reach out to email@example.com.
For general inquiries, please contact firstname.lastname@example.org.