Design System - Style Guide: Typography

[lrchang2]

Overview

As part of the Branding Guide, we need to choose a font for Access the Data to reflect our brand's personality in all products/resources created.

Additional Information

Brand Personality: Simple, Trustworthy, Empowering, and Friendly

Action Items

Typography is required to be ADA compliant #26.

• text type
  • headings: h1, h2, h3
  • paragraph text
  • caption text

Type Scale

• do any audit for fonts used used on the mobile and desktop high-fi wireframes
• check to see if typeface is a special font that requires download for developers to use
• collect all fonts and compare it to current fonts in the design system and determine if there are any fonts used missing in the color system
• Typography includes
  • Typeface(s)
  • Font size (base font size = 16px, font sizes should be multiples of 2/4/8/16)
  • Line height
  • Styling (bold, italicized, etc)
  • Hierarchy level/category (Heading 1, 2, 3.., Body 1, 2, 3.. etc.) (6 heading sizes max)
  • Sometimes typescales also include where the font sizes will be used, sizes at different responsive breakpoints, etc
• check contrast and accessibility of color pairings in wireframes (use able plugin in Figma)
• makes sure all design system colors are in the Figma Styles
• Update Call to action button colors to adhere to color contrast standards

Resources/Instructions

Web Content Accessibility Guidelines
All work for branding guide is condensed in the current draft of guide. Guide also contains Content Template Guide #22 and Front-End Style Guide #40

typography with design system in figma file

[abryant35]

@PazauMoua Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #access-the-data channel.

Thank you! :)

[PazauMoua]

Progress: Typography selected - Group approval?
Pictures: See Google Doc for Typography choices

[abryant35]

@PazauMoua The team will vote on their favorite option at the next team meeting on Wednesday

[ExperimentsInHonesty]

This is part 1, there are 3 videos to watch:
https://www.youtube.com/watch?v=6EuBIwUeF48&list=PLdlnbMNK63vmlbz78zin8X8RmAoBs_D1E&index=8
Something like this will be helpful (not necessarily this font)

[PazauMoua]

Progress: working on type combos/pairings
Blockers: NA
Availability: Working on this today through weekend
ETA: Tuesday 10/19 9pm
Pictures:

[PazauMoua]

what do you guys think of these pairings?

[ExperimentsInHonesty]

@PazauMoua please update your issue with the following info if you have not already

• Progress: "What is the current status of your project? What have you completed and what is left to do?"
• Blockers: "Difficulties or errors encountered."
• Availability: "How much time will you have this week to work on this issue?"
• ETA: "When do you expect this issue to be completed?"

If you need help:

1. Be sure to annotate your issue with details on what you need and move it to the Questions/Review column so we can add it to the meeting agenda.
2. Additionally feel free to reach out in the #access-the-data slack channel asking for help.

[lrchang2]

closing issue, sora was the final font chosen and typography has been added to the design system

[lrchang2]

reopening to update design system

[tsiedesign]

• Progress: Possibly completed, needs to be reviewed
• Blockers: N/A
• Availability: Available to work as needed
• ETA: 6/11/22
• Comments: Noted 2 different typefaces for footer (mobile vs web), contrast for white and terracotta do not pass accessibility checks.

[lrchang2]

@tsiedesign
Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

1. ask for help at your next meeting
2. put a "Status: Help Wanted" label on your issue and pull request
3. put up a request for assistance on the #access-the-data channel.

[KC243]

I will take over this issue and work on changing the button colors going forward.

[mxajPrice]

please update your issue with the following info if you have not already

• Progress: "What is the current status of your project? What have you completed and what is left to do?"
• Blockers: "Difficulties or errors encountered."
• Availability: "How much time will you have this week to work on this issue?"
• ETA: "When do you expect this issue to be completed?"

[KC243]

Progress: Buttons have been changed to adhere to accessibility standards
Blockers: none
Availability: issue done
ETA: completed.

New Button/Accent Color Hex Code : EF6E6C