We've updated typography sizing variables and class names to separate semantics from presentation. Read about how you can update.
**Theme: healthcare only** Open Sans serves as the base font for the site. The full Open Sans type family consists of a variety of weights including light, regular, semibold, bold, and extrabold which allows for a wide range of type treatments and hierarchies within a page while still maintaining a unified look and feel. Sans-serifs have been proven to be easier to read on-screen and are incredibly adaptable when resized and displayed across different platforms and browsers. Accordingly, Open Sans is used for body type, secondary and tertiary headlines, and instructional text. **Web font stack:** Open Sans > Helvetica > Arial > Verdana > Sans-Serif - Open Sans font is used for headings and body content. - Standard body text is Open Sans Regular, 16px, #333, 24px line-height, 32px bottom-margin on paragraphs. - Smallest paragraph text for legibility reasons is Open Sans Regular, 14px, #333, 20px line-height, 28px bottom-margin on paragraphs (except for legal/caption text). - Uppercase font should not be used. ## Guidance ### Accessibility - If you need to stray from the default body text color and default page background color, make sure your color combinations provide sufficient color contrast: - 4.5:1 minimum contrast ratio for text smaller than: - 18pt (24px), normal font weight - 14pt (18.6px), bold font weight - 3:1 minimum contrast ratio for text equal to or larger than: - 18pt (24px), normal font weight - 14pt (18.6px), bold font weight - For more information, check out the following resources: - [WCAG Understanding Docs for success criterion 1.4.3 Contrast (Minimum) (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum) - [WebAIM Contrast and Color Accessibility](https://webaim.org/articles/contrast/) **Themes: medicare, healthcare only** ### Don't **Theme: medicare only** - Don't use Rubik font for headers - Don't use a header that is smaller than the body font size - Don't have stray headers in the body of your page **Theme: healthcare only** - Don't use italic text. ### Mobile and small screens Header sizes should be reduced on mobile screen sizes. Header sizes can be reduced depending on the designers discretion but can generally use this guide for reducing your header sizes. #### Body Small to Large Body text - No change in size unless header size is smaller than the body size ### Font Weights There is only one bold font option for paragraph styles (Open Sans font). Open Sans 600 (Semibold) is the only bold option that should be used. There are no bold options for headers. ### Layout There should always be a parent/child relationship between headers and content on the page. Every header should have a relationship to something else on the page. This can apply to many different relationships like a header and a form group or a header and list of links. Stray headers or content should be reevaluated. - Paragraph styles should never be used as a parent to another text element. - Header elements should never have equal or smaller font size than the paragraph element. - Not all paragraphs need a header, but all headers need children. - Every page should have one heading 1 (H1) - Headings style appearing under H1 should follow a logical order for information design and supporting various assistive technology devices/software. ### Captions Generally, most content on Healthcare.gov should be 16px or higher. Captions, disclaimers, footnotes and text that is there for legal reasons can use the small heading and body styles. **Theme: medicare only** - The default size for body content is 16px. - The Rubrik font is used for body content. - The Montserrat font is used for headers, some menu components, and the big button (Landing). - The smallest paragraph text for legibility to the Medicare audience should not be smaller than 16 px (except for legal/caption text). - Uppercase font should not be used (exception for form elements). ### Body styles There are 4 text styles that can be used. - Default style - Is the default text style for body content - Link style - Links use the Rubrik font and will always be blue. - Text on dark backgrounds - Used for text on dark backgrounds. - Text links on dark backgrounds - Used for links on dark backgrounds. ### Font weights There is only one bold font option for paragraph styles (Rubik font). Rubik 600 (Semibold) is the only bold option that should be used. There are no bold options for headers. ### Layout There should always be a parent/child relationship between headers and content on the page. Every header should have a relationship to something else on the page. This can apply to many different relationships like a header and a form group or a header and list of links. Stray headers or content should be reevaluated. - Paragraph styles should never be used as a parent to another text element. - Header elements should never have equal or smaller font size than the paragraph element. - Not all paragraphs need a header but all headers need children. ### Mobile Small to Large Body text has no change in size unless header size is smaller than the body size. ### Paragraph widths - The base paragraph width (~65 characters) is the preferred width for paragraphs. - You can opt for a wider (~80 characters) or narrower (~45 characters) paragraph width. - This paragraph width improves the readability of text and helps users with certain reading or visual disabilities that have trouble keeping their place when reading long lines of text. See W3C guidance for more info. ### Captions - Generally, most content should be 16px or higher. - Captions, disclaimers, footnotes and text that is there for legal reasons can use theds-text-heading--sm and ds-text-body--sm styles.