Typography

Two primary font families create the system: Gandhi serif and Karla.

Gandhi serif

Gandhi serif is the primary font across the site, used for paragraph copy and main headlines. We sought out a serif that had medium contrast for best web and print readability, a strong bold weight that could be used for clear headline hierarchy, and felt traditional and dependable, without much embellishment to distract the eye. The font also needed to be free, and without licensing restrictions on distribution or use so that it would be aligned in values with an open source project.

Gandhi serif regular

The quick candidates and their authorized committees jumped over the lazy brown fox-dog.
$ § ? 0 1 2 3 4 5 6 7 8 9

Gandhi serif regular italic

The quick corporations and their labor organizations jumped over the lazy brown fox-dog.
$ § ? 0 1 2 3 4 5 6 7 8 9

Gandhi serif bold

The quick political action committees jumped over the lazy brown fox-dog.
$ § ? 0 1 2 3 4 5 6 7 8 9

Gandhi serif bold italic

The quick political party committees jumped over the lazy brown fox-dog.
$ § ? 0 1 2 3 4 5 6 7 8 9

In our initial research. we heard from the FEC IT and multimedia teams that they needed a design that held up in both print and web environments so it would be easy to put print publications online, and easy to print publications directly from the web. Gandhi was designed by a publishing company especially for this scenario—it ranks high in readability both on web and when printed. Many FEC website users often print pages of the FEC website for reference, and this font was specifically designed to perform well in that scenario.

We also needed to prepare to support multiple languages in the future.
Gandhi specifically has excellent Spanish language character support

Karla

Karla is our secondary font used across the site. Used in data tables, visualizations, and footnote-like text, to keep a clear visual distinction from paragraph and headline copy. To balance the traditional feel of Gandhi, we sought out a modern sans serif with a clean, airy feeling, and wider spacing built in. We were especially critical in choosing a font that had precise, unembellished numerals, since we knew it would be used for financial data. There is also high contrast between the regular and bold weights, which allows us to combine them in table designs, and retain clear hierarchy with just one font. Karla is also an open source font, and free to use.

Karla regular

The quick candidates and their authorized committees jumped over the lazy brown fox-dog.
$ § ? 0 1 2 3 4 5 6 7 8 9

Karla regular italic

The quick candidates and their authorized committees jumped over the lazy brown fox-dog.
$ § ? 0 1 2 3 4 5 6 7 8 9

Karla bold

The quick candidates and their authorized committees jumped over the lazy brown fox-dog.
$ § ? 0 1 2 3 4 5 6 7 8 9

Other background on typography

In early interviews, we heard from FEC staff that they wanted clear design guidelines that helped make the new styles easy to achieve, and hard to get wrong.

One way we wanted to support this through typography was to keep the number of fonts in the system low, so that it was easier to know which font to use when. We also specifically chose fonts that had few (but just enough) differences in weights to choose from. Both Karla and Gandhi only have two weights: Regular and Bold, each with matching italics.


Type styles

H1: Gandhi bold, 3.6rem (36pt)
line height: 1.2
default margin: 0

Heading 1

H1: heading--main
Gandhi bold, 3.6rem (36pt)
line height: 1.2
border bottom: 2px $base

Appointing a treasurer

H1 with heading__subtitle
Subtitle: Karla bold 1.4rem (14pt)
uppercase
line height: 1.8
kerning: -.3px

MUR #7234

National association of realtors polital action commmittee
H2: Gandhi bold 2.4 (24pt)
line height: 1.2
default margin bottom: 2rem

Sponsors affiliated with corporations (Heading 2)

H2 as section divider:
Gandhi bold 2.4rem (24pt)
line height: 1.2
default margin bottom: 2rem
border top: 2px $primary

Candidates and their authorized committees

H3: Gandhi bold 1.8rem (18pt)
line height: 1.6
default margin bottom: 1rem

Registering as a candidate (Heading 3)

H4: Karla bold 1.8rem (18pt)
line height: 1.2
kerning: -.3px
default margin top: 1.4rem
default margin bottom: 1rem

Explicit words of advocacy of election or default (Heading 4)

H5: Gandhi bold 1.6rem (16pt)
line height: 1.3
default margin top: 1.5rem
default margin bottom: .75rem
Items not requiring disclaimer (Heading 5)
H6: Karla regular 1.3rem
uppercase
line height: 1.63rem
border-bottom: 1px, $base
default margin bottom: 1rem
Continue learning about this topic (Heading 6)
Lead paragraph (t-lead):
Gandhi regular, 1.8rem
line height: 2.8
default margin bottom: 2.4rem
Used for an introductory or summary paragraph about the page or concept

Advisory opinions are official Commission responses to questions about how federal campaign finance law applies to specific, factual situations.

Body copy (p):
Gandhi regular 1.6rem (16pt)
line height: 2.4
default margin bottom: 2.4rem
This is the regular body, or paragraph copy style

Under the Federal Election Campaign Act, contributions are subject to limits. The limits apply to all types of contributions (except contributions made from a candidate's personal funds).

It is important to note that a campaign is prohibited from retained contributions that exceed the limits. In the event that a campaign receives excessive contributions, it must follow special procedures for handling such funds.

The limits on contributions to candidates apply separately to each federal election in which the candidate participates. A primary election, general election, runoff election and special election are each considered a separate election with a separate limit.

Numbered (ordered) lists with ordered sub-items.
Use these when following a specific sequential order is important.

To get to work:

  • Leave your house.
  • Get on the bus.
    1. Let other people off first.
    2. Swipe your metro card.
    3. Find an open seat.
      1. Level 3 (if needed).
      2. Level 3 (if needed).
  • Listen to S Town while you ride.
Bulleted (unordered) lists with unordered sub-items.
Use these when there is no particular sequential order for the items listed.

Before you leave for work, don't forget your:

  • Keys
  • Wallet
  • Phone
    • Level 2 (if needed).
    • Level 2 (if needed).
      • Level 3 (if needed).
      • Level 3 (if needed).
Ordered lists with unordered sub-sections.
Use these when there is no particular sequential order for the items listed.

To get to work:

  • Leave your house. Don't forget your:
    • Keys
    • Wallet
    • Phone
  • Get on the bus.
  • Listen to S Town while you ride.
Labels
Karla bold, 1.4rem (14pt)
kerning: -.3px
Used for filter or form field labels and document type labels
Blockquotes
Italicized body copy visually separated from a paragraph block

“There was a drop down, but no place to write in text. We would have expenses that didn’t quite match what was in the dropdown. This led to questions like “we are trying to do this as accurately as possible, but if this category is not right, is the blame on us…?” I wanted to make sure I crossed Ts and dotted Is… oftentimes it didn’t seem clear how to list certain expenses from that dropdown menu.”

—Filer

Note/description
No pre-defined font family
Regular italic, 1.4rem (14pt)
line height: 1.8
Used as example text or as a note about content

Examples: 102.2; electioneering

These totals are drawn from quarterly, monthly and semi-annual reports. 24- and 48-Hour Reports of independent expenditures aren't included.

Excerpt copy
Karla regular, 1.6rem (16pt)
kerning: -.3px
Used in post excerpts

WASHINGTON – The Federal Election Commission has introduced its new website, offering improved navigation and an array of intuitive new tools to mine the agency’s rich campaign finance data set ...