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.

Visuals color palette

Type color palette

Chart color palette

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:

Image dimensions

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.

Descriptive links

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>
                    
                

Capitalization

Article titles and homepage headline should be in Title Case:

Headers within articles should be in sentence case:

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.

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.

Hyperlinks

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.

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.¹ Another footnote² in the middle of a sentence.

In the Notes section:

¹ Information about note 1.

² 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:

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.

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.

Typefaces

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.

Garamond (Semi Bold Italic)

Garamond Semi Bold Italic is used to create the stylized "of" as an accent an dgives a unique to touch to the logotype/logo.

Color Specifications

Color specifications differ based on the medium.

Logotype Variations

Variations of the Federal Reserve Bank of Chicago logo: