Federal Reserve Bank of Chicago
Style and Branding Guide

This style guide serves to define standards and act as a reference that establishes the look and feel for the Federal Reserve Bank of Chicago’s public website, Chicagofed.org. The purpose of this document is to improve efficiency and ensure consistency and quality in the continued development and management of the site. This is accomplished by identifying the principles that guide the design of the interface including information on the underlying grid system, size and spacing graphical elements, fonts, colors and labeling standards among other things.

Table of Contents

Grid System

Grid System
Typography
Color
Photography
Accessibility
Publications guidelines

Grid System

The ChicagoFed.org page grid is rigid enough to provide a solid structure, yet flexible enough to handle the variable forms of content found within the site. ChicagoFed.org uses the Bootstrap (version 4.3.1 as of October 2019) framework for layout. Bootstrap supports a 12-column grid that can be divided into columns on a row by row basis. Bootstrap’s row class is a key mechanism for controlling how content is responsively transformed for display on different screen sizes. As such, the site uses rows as underlying organizing element for content blocks. To promote consistency, we will design elements to fit into the 4-2-1 column layout shown below.

This system enables a mobile-first design of pages where elements on the page are ranked by importance in the mobile phone design and then built into larger blocks for the tablet and desktop presentations.


Three examples of rows in the grid

The following code will allow the layout of the page to change based on screen size.

                    
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-3" id="one">1</div>    
            <div class="col-12 col-md-6 col-lg-3" id="two">2</div>
            <div class="col-12 col-md-6 col-lg-3" id="three">3</div>
            <div class="col-12 col-md-6 col-lg-3" id="four">4</div>
        </div>
        <div class="row">
            <div class="col-12 col-lg-6" id="five">5</div>    
            <div class="col-12 col-lg-6" id="six">6</div>
        </div>
        <div class="row">
            <div class="col-12" id="seven">7</div>
        </div>
    </div>
                    
                

1200px (desktop)

A Bootstrap grid at 1200px+ wide

768px (tablet)

A Bootstrap grid at 768px+ wide

480px (mobile)

A Bootstrap grid at 480px+ wide 

Typography

Primary typeface: Oswald Regular (400)

Chosen for its clarity in appearance and accessibility with users, one font family comprises the signature font for marketing display text, headers, and links in FRBC Web communications – Oswald. A limited set of fonts within the Oswald family, light, regular, and bold (plus italics as required) should be used for all Web related works to ensure continuity in the visual image of ChicagoFed.org.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 ( ! ) [ @ } { # } ‘ $ ’ “ % ” < - + = > ^ & : ; , . *

About Oswald

Designed by Vernon Adams, Oswald is a reworking of the classic gothic typeface style historically represented by designs such as ‘Alternate Gothic’. The characters of Oswald have been re-drawn and reformed to better fit the pixel grid of standard digital screens. Oswald is designed to be used freely across the internet by web browsers on desktop computers, laptops and mobile devices.

Vernon Adams studied typeface design at the Reading University in the United Kingdom. From there he went on to study Fine Art at the Vestlandets Kunstakademi in Norway. This paved the way for him and soon he found himself working as a font designer for Google Fonts. In his short career he has already created over 15 fonts for Google, all of them expertly crafted with passion put into each character. In 2012 he updated Oswald font in after a large group of users found it to lack a proper sub-setting. He quickly made changes in order to make it more user-friendly and readable. The font was changed with refined glyphs throughout the family and tighter spacing and kerning.


Styles used

Light (300)

Regular (400)

Bold (700)


Secondary typeface: Open Sans Regular (400)

The secondary font is Open Sans, light, regular, and bold (plus italics as required) and it is used solely for body text and other miscellaneous fine text applications. Visual examples of the type families and styles used within the site are shown below are for reference only. Consult the matrix of styles for specifics when building web pages or style sheets.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 ( ! ) [ @ } { # } ‘ $ ’ “ % ” < - + = > ^ & : ; , . *

About Open Sans

Designed by Steve Matteson, Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.


Styles used

Light (300)

Regular (400)

Bold (700)


Website typography matrix

The chart below lists common type specifications used within ChicagoFed.org. These specs are for reference only.

Text name HTML/CSS element Font Font size Font weight Color
Text default <body> <p>, <li>, etc. Open Sans 1rem / 16px 400 — regular #333333
Links <a> Inherit Inherit Inherit #268cc3
Article author link cfedArticle__authorBlock__name Open Sans 1.375rem / 22px 400 — regular #268cc3
Article author text div.cfedArticle__authorBlock Open Sans 1.375rem / 22px 400 — regular #595959
Article title <h1>, cfedArticle__title Oswald 2.938rem / 47px 700 — bold #595959
Decorative heading cfedDecorativeHeader Oswald 2rem / 32px 700 — bold #fcfcfc (background-color: #4b4a4b)
Secondary heading <h2>, cfedHeadlineLink Oswald 1.5rem / 24px 700 — bold #060606
Tile heading <h2>, cfedTile__title Oswald 1.5rem / 24px 700 — bold #fcfcfc (background-color: #4b4a4b)
Tertiary heading <h3> Oswald 1.125rem / 18px 700 — bold #333333
Quaternary heading <h4>, cfedSidebar__header Oswald 1.75rem / 28px 400 — regular #fcfcfc (background-color: #4b4a4b)
Quinary heading <h5>, cfedSidebar__peopleFilter__title, cfedSidebar__peopleIndex__title, cfedSidebar__standardTitle Oswald 1.125rem / 18px 700 — bold #666666
Senary heading <h6>, cfedSidebar__featuredPublicationTitle Open Sans 1rem / 16px 300 — light #333333
Superscript <sup> Inherit .75rem / 12px Inherit Inherit
Caption <figcaption>, caption Oswald .875rem / 14px 300 — light #333333
Pull quotes (asides) p cfedAside--left, p cfedAside—centeredText Oswald 1.375rem / 22px 300 — light #333333
Headline link cfedHeadlineTitle a Oswald 1.5rem / 24px 700 — bold #268cc3
Expand / collapse title <h2>, cfedSubheading, cfedPersonSubheading, cfedMidwestEconomySubheading, cfedEventSubheading Oswald 1.5rem / 24px 400 — regular #595959

Website Color

Color is used consistently and deliberately through ChicagoFed.org. The color palette has two sets; one for images and graphics (visuals) and one for type. The primary colors are generally the most suitable colors for backgrounds of key elements. The secondary colors are best used for backgrounds and to assist in breaking up page content. The tertiary colors are accent colors reserved for unique content that needs special attention. If the palette does not provide a suitable color choice for a particular element, it is recommended that the element be converted to grayscale or black and white.


Visuals color palette

Primary
Primary 1
#A0A09F
Primary 2
#4B4A4B
Primary 3
#060606
Primary 4
#268CC3
Secondary
Secondary 1
#E8E8E8
Secondary 2
#595959
Secondary 3
#FCFCFC
Tertiary
Tertiary 1
#D9D9D9
Tertiary 2
#B8B8B8
Tertiary 3
#929292
Tertiary 4
#DDE9EA
Tertiary 5
#00FFDC
Tertiary 6
#D42127

Type color palette

Links
#268CC3
Links:hover
#127AB3
Headers
#595959
Headers
#666666
Body
#333333
Reversed
#FCFCFC

Chart color palette

#0D8ECF
#CC0000
#B0DE09
#FF9933
#000000

Photgraphy

Photography guidelines

Photos used in the design of ChicagoFed.org are an integral part of the site’s overall look and feel and should follow these guidelines listed below to maintain consistency. Original images should be the first choice for photo assignments and rely less on stock photography solutions. Other considerations:

  • Select a single, engaging, editorial-style photograph that helps tell the story
  • All main and feature images should showcase vibrant colors
  • Close-cropped color photos should be used for all portrait photography
  • Avoid soft focus or blurred images
  • Avoid photo montages
  • All images must be saved using “Save for Web” Photoshop process:
    • Picture/portraits: JPEG/JPG format, Quality = 70%
    • Charts and graphs: PNG-24 format (never PNG-8!)
  • Use appropriate image naming conventions: name-name-jpg.jpg or name-name-png.png
  • All image pixel dimensions below are width x height

Image dimensions

Page Image name Dimensions (pixels, WxH)
Homepage Nav tile 570 x 220
Various Hero tile 1170 x 464
Publication Large content image 800 x (height proportionate)
People Large portrait 254 x 314
People Small portrait 105 x 130
Event Event banner 840 x (height proportionate)

Accessibility

The web is for everyone. As part of the Chicago Fed’s ongoing commitment to diversity and inclusion, we strive to ensure that navigating our site is a seamless and enjoyable process for those users with disabilities. Our goal is to be in accordance with the Web Content Accessibility Guidelines (WCAG) and Section 508 compliance guidelines.

Note: Much of the following was adapted/quoted from the Mozilla Developer Network (MDN).


Descriptive alt tags

Images need to have a descriptive alt tag. Per the W3C, “If alt text isn't provided for images, the image information is inaccessible, for example, to people who cannot see and use a screen reader that reads aloud the information on a page, including the alt text for the visual image.” Below are some guidelines for alt tags, from Oesterreichische Nationalbank (OeNB):

Describe the chart or image as objectively and succinctly as possible. The alternative text is a compromise between completeness and clarity. It should include the core message, specific trends and any distinctive features.

Since describing images relies on perception and always involves a degree of interpretation, there is no single correct alternative text.

Type of image element

First state what type of chart or image is being described: e.g. a column, bar, line or pie chart, or a photograph, drawing or caricature. Then, move from the general to the specific.

Length

Keep the text as short as possible (approx. three sentences) and as long as necessary. If the running text comprises a very detailed description of the chart, then you may keep the alternative text shorter.

Two or more panels per chart

Only create one alternative text even if the chart has multiple panels.

Tables

Whenever possible, use a semantic HTML table instead of an image of a table. Tables do not require alternative texts, but note that they should be kept as simple as possible and that the content should be organized clearly and according to relevance.


When linking items using <a> tags, make sure the link text is descriptive. The user should get an idea of what will happen when s/he clicks the link.

Good: For more information about this conference, <a href="/conference">refer to the conference summary page</a>.

Bad: For more information about this conference, <a href="/conference">click here</a>.


Labels

To make forms as clear and easy-to-use as possible, add labels to form elements.

                    
    <div>
        <label for="name">Fill in your name:</label>
        <input type="text" id="name" name="name">
    </div>
                    
                

Publication Guidelines

Our in-house standard is a mix of Chicago and AP styles. If there is something that is not listed in this guide, please send us an email.


Capitalization

Article titles and homepage headline should be in Title Case:

A headline in title case on the Chicagofed.org homepage. The title of an article on Chicagofed.org, in title case.

Headers within articles should be in sentence case:

An example of an article title in sentence case.
An example of an image title within a Chicagofed.org publication.

Images

When inserting images in a publication, they should have a number and a title in an <h3> tag. If there are multiple kinds of images (e.g., charts and tables), the titles should include the type.

An example of an image and a table in a Chicagofed.org publication.

If an image has a caption, ensure it’s in a <figcaption> element with the class caption. If there are Notes and Sources within the same <figcaption>, separate them with a <br /> tag.

Images are placed after they are mentioned in the text. If two images are mentioned in the same paragraph, add the images on after another.



Spacing

The first paragraph in a publication, and any paragraph under an <h3> or <h4> header, should have 0px of margin-top and 15px of margin-bottom. All other paragraphs should have a 15px margin on top and bottom. In order to achieve this programmatically, ensure the entire publication is wrapped in a <div> with a class of either cfedContent__text or cfedStandardSpacing.

There should only be one space after periods.


Bullets

Bullets should be colored #999, with 10px of margin-right. The list item should have a padding-left attribute of 1rem, and a text-indent of -1.25rem. To achieve this programmatically, include the class cfedList--bulleted on the <ul> element.


Footnotes and references

A note within the text should appear as hyperlinked superscript, after punctuation. The hyperlink should take the user to the associated reference at the bottom of the page. In the footnotes section, each footnote should be in its own paragraph. The footnote number should be in superscript and hyperlinked to the associated footnote in the text, and should be followed by a space.

In text: A footnote after a period.1 Another footnote2 in the middle of a sentence.

In the Notes section:

1 Information about note 1.

2 Information about note 2.


Asides

When creating an aside in a publication, use the following code:

    <p class="asideContainer">
        <aside class="cfedAside--left">Indexes that combine several macroeconomic measures 
        have historically done better than other indicators at 
        signaling recessions up to one year in advance.</aside>
        Economists follow many economic and financial data series to gauge the current economic 
        climate and prospects for future activity. My focus here is on leading indicators as 
        signals of U.S. recessions according to the National Bureau of Economic Research (NBER). 
        Specifically, I examine how useful various economic and financial indicators have been 
        in “predicting” recessions in the past and summarize what these indicators suggest about 
        the future. I show that indexes that combine several macroeconomic measures have 
        historically done better than other indicators at signaling recessions (and expansions) 
        up to one year in advance. Additionally, I confirm that financial market measures...
    </p>
                    

The above code will produce the following paragraph:

An example of an aside in a Chicagofed.org publication.

If an aside is a link, hyperlink the entire sentence and add the class cfedAside--centeredText to the <aside> element. Use proper punctuation (i.e., add a period).


Section headings

When delineating between the main content of a publication and the notes, references, etc., add an <hr /> tag followed by an <h3> tag with the name of the section.

An example of footnotes separated by an <hr /> tag on Chicagofed.org.

Disclaimer

Blog posts, Chicago Fed Letters, and Economic Perspectives need a disclaimer. The disclaimer should be at the very end of the publication, in an <h3> tag, with the text-center class. There are two versions:

CFL/EP:

Opinions expressed in this article are those of the author(s) and do not necessarily reflect the views of the Federal Reserve Bank of Chicago or the Federal Reserve System.

Blog:

The views expressed in this post are our own and do not reflect those of the Federal Reserve Bank of Chicago or the Federal Reserve System.


Speeches

For the HTML version of the speech, follow the above publication guidelines.

Keep the following in mind while converting to PDF:

  • Remove all document properties. In a PDF, if you click file -> properties, there should not be any information in the box that pops up.
  • Do not include a page number on the cover page. All other pages should have the number in the bottom right.
  • On the cover page, all text should be centered. The cover page should contain the following elements:
    • The speech title should be at the top in Calibri size 18 font, with 0pt spacing before and after, single spaced.
    • The speaker name should be Calibri, bold, size 16, with 0pt spacing before and after, with multiple line spaces at 1.15. The speaker’s name should be on one line, then the speaker’s title, then the speaker’s company.
    • The speech name and location should be Calibri size 16, 0pt spacing before and after with multiple line spaces at 1.15. Do not include the venue in the location information, but do include the city and state (or city and country).
    • disclaimer is preceded by a solid line. The first line of the disclaimer is FEDERAL RESERVE BANK OF CHICAGO, all caps, Calibri size 15 font, 0pt spacing before and after with multiple line spaces at 1.15. The rest of the disclaimer is in size 14 font with the same spacing as the first line. Do not break ‘Federal Reserve System’ across two lines.
  • On the second page, include the speech title and speaker information again.
    • First line: Title, bold, Calibri size 16, 0pt spacing before and after with multiple line spaces at 1.15.
    • Then speaker information, using the same guidelines as above except use size 12 font.
  • Use Arial font for the text within the speech. Size 12, 0pt spacing before, 12pt spacing after with double spaced lines.
    • Headers within the speech should be bolded.
    • Footnotes should be Calibri 10, 0pt spacing before and after with single-spaced lines.
  • References are in Arial, size 12. 0pt spacing before and after, with a hard return between references.
    • Do not use hyperlinks. All URLs should be typed out and in the same color/font as the rest of the text.

Cover page:

The cover page of a speech from Chicagofed.org.

Page 2:

The second page of a Chicagofed.org speech.

References:

An example of the reference page for a Chicagofed.org speech.

People pages: external references

Occasionally, Economists will list external publications on their People page. These references should be styled like a reference in an Economic Perspective: Author(s), year published, article title, publication, volume/series, date, pages.

An example of the formatting for an external reference on a People page on ChicagoFed.org.

A crossref or hyperlink can be included, but is not necessary.

Names

If a speaker uses a middle initial, include a period: James L. Brooks. If a speaker has ‘junior’ in the name, format it like the following: Robert Downey, Jr.

Honorariums (Doctor, professor, etc.) are only used in the case of senators and other high-ranking political officials.

Having trouble accessing something on this page? Please send us an email and we will get back to you as quickly as we can.

Federal Reserve Bank of Chicago, 230 South LaSalle Street, Chicago, Illinois 60604-1413, USA. Tel. (312) 322-5322

Copyright © 2020. All rights reserved.

Please review our Privacy Policy | Legal Notices