Typography Scale vs Brand.yml

Typography Scale

By JR Brugger (Design Workflow)

Build a professional text sizing system for websites and apps with consistent headings and body copy.

Brand.yml

By Posit

Define your brand colors, fonts, and logos once, use them everywhere in Shiny and Quarto.

Typography Scale

• Generates a mathematical scale of text sizes from captions to large headings
• Defines line heights and letter spacing for optimal readability
• Provides font weight and pairing recommendations
• Creates responsive rules so text scales gracefully on mobile devices
• Documents usage guidelines for each text style

Brand.yml

• Creates a single YAML file that stores your brand colors, fonts, and logo files
• Automatically applies your branding to Shiny web apps and Quarto documents
• Supports light and dark mode variants for colors and logos
• Integrates with Google Fonts and custom typography
• Works across HTML reports, dashboards, slides, and PDFs

Reach for Typography Scale when…

• You're designing a website, app, or marketing site and need consistent text sizing
• You want your headings and body copy to look harmonious without manual tweaking
• You're building a design system or brand guide
• You need typography rules that work across desktop and mobile

Reach for Brand.yml when…

• You're setting up brand guidelines for a team's reports and dashboards
• You need consistent colors and fonts across multiple documents without manual styling
• You're creating Shiny apps or Quarto reports and want them to match your brand
• You want to update your brand palette once and have it apply everywhere