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
Visual color palette
Type color palette
Chart color palette
Descriptive alt tags
Footnotes / references
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.
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
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.
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
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.
Website typography matrix
The chart below lists common type specifications used within ChicagoFed.org. These specs are for reference only.
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 1 #A0A09F
Primary 2 #4B4A4B
Primary 3 #060606
Primary 4 #268CC3
Secondary 1 #E8E8E8
Secondary 2 #595959
Secondary 3 #FCFCFC
Tertiary 1 #D9D9D9
Tertiary 2 #B8B8B8
Tertiary 3 #929292
Tertiary 4 #DDE9EA
Tertiary 5 #00FFDC
Tertiary 6 #D42127
Type color palette
Chart color palette
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
Dimensions (pixels, WxH)
570 x 220
1170 x 464
Large content image
800 x (height proportionate)
254 x 314
105 x 130
840 x (height proportionate)
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.
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.
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.
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>.
To make forms as clear and easy-to-use as possible, add labels to form elements.
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name">
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.
Article titles and homepage headline should be in Title Case:
Headers within articles should be in sentence case:
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.
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.
When linking an item, always use a descriptive link. Do not hyperlink the URL.
Good: Information about this topic is <a href="www.example.com">available online</a>.
Bad: Information about this topic is available at <a href="www.example.com">www.example.com</a>.
If there is a crossref hyperlink, add the link after the citation, without punctuation.
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 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.
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...
The above code will produce the following paragraph:
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).
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.
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:
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.
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.
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.
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.
A crossref or hyperlink can be included, but is not necessary.
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.
The Federal Reserve Bank of Chicago's logotype/log was designed in 2004. It is used as an alternative logotype/logo for the Bank's public website Chicagofed.org. Over time, the usage of it has expanded into main applications throughout the Bank's communication materials, both online and offline.
Do not alter the design and/or use different fonts as a substitute for the logotype/logo in any way.
The official Bank seal.
Friz Quadrata (Regular)
Friz Quadrata is a glyphic serif typeface designed by Ernst Friz and Victor Caruso for Visual Graphics Corporation in 1965. It is the main typeface used to build the Federal Reserve Bank of Chicago's logotype/logo.