Indian Affairs uses two main fonts for our web typography. Merriweather is standard for Indian Affairs headings and titles, and Public Sans is standard for body content.
U.S. government websites have common typographic needs: clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields.
Typefaces
Public Sans
Public Sans is an open-source sans serif typeface designed and maintained by USWDS and derived from Libre Franklin. It is a strong, neutral, principles-driven typeface for text or display based on a traditional American form. (The Franklin form is most noticeable in the two-story design of the “g” character.) It uses metrics similar to common system fonts for smoother progressive enhancement. It has a plain, straightforward style, appropriate for interfaces and running text. Its large x-height makes it legible at small sizes. It features a broad range of weights — and its heavier weights have tighter letterspacing than its lighter weights, meaning running text (which tends to be relatively small) is spaced more generously and headings (which tend to be relatively large) are more compact. It has tabular numerals for aligning numbers in tables.
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
0 1 2 3 4 5 6 7 8 9
Merriweather
Merriweather, designed by Sorkin Type, is an open-source serif typeface designed for on-screen reading. This font is ideal for text-dense design: the letterforms have a tall x-height but remain relatively small, making for excellent readability across screen sizes while not occupying extra horizontal space.
The combination of thin and thick weights gives the typeface stylistic range while conveying a desirable mix of classic, yet modern, simplicity. Merriweather communicates warmth and credibility at both large and small font sizes.
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
0 1 2 3 4 5 6 7 8 9
Links
Links connect users to a different page or further information.
This is a text link on a light background.
This is a visited link.
This is a link that goes to an external website.
This is a text link on a dark background.
Accessibility
- Users should be able to tab to navigate between links.
- Users should be able to activate a link when pressing ‘Enter’ on their keyboard.
- Users should be able to identify links without relying on color alone.
- Users should be able to activate hover and focus states with both a mouse and a keyboard.
Package information
-
Package usage:
@import global -
Requires:
required
Text Length
As you can see page creation is easy to accomplish. Avoid long-running pages where possible and instead create several smaller pages and link to them from the original page.
Blockquote
According to the World Wide Web Consortium (W3c), the “blockquote element represents a section that is quoted from another source.” Utilizing the blockquoteelement collaborates with assistive technology in rendering the quoted text in a different manner than other text, conveying the fact that this text appears within the context of a quote.
An example blockquote block of text is below.
I watched the storm, so beautiful yet terrific. The sky was cloudless and of a deep dark blue. Mist enveloped the ship three hours out from port. The spectacle before us was indeed sublime.
- Then came the night of the first falling star, 4321
Section headings
IA Heading StylesHeading 2 and Heading 3 styles have been provided. Start with Heading 2 for content headings.
Applying these in a logical way will future proof the site when moving to an updated template. It is always best to use the defined site styles when working with your content rather than creating your own. The Web Team can help with style changes that can be applied consistently to pages across the site.
h2. Heading Two
h3. Heading Three
h4. Heading Four
Heading Ranks and Accessibility
Nest headings by their rank (or level). The most important heading has the rank 1 Heading 1, the least important heading Heading 6. Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
To read more, visit the IA page on Heading Accessibility.
Typesetting
Links
This is a text link on a light background.
This is a visited link.
This is a link that goes to an external website.
Great write up from DOI on links https://www.doi.gov/public/Linking-Policy
Lists
Implementation
Lists organize written information for users and are styled by default.
Usability
When to Use- Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.
- Use unordered lists to display text in no specific order.
- If you need to communicate long lists of narrative text.
- Use sentence case and begin lists with a capital letter.
- Use punctuation appropriate to the text. Do not leave sentences without periods.
Unordered List
- Unordered list item
- Unordered list item
- Unordered list item
Ordered list
- Ordered list item
- Ordered list item
- Ordered list item
