Typography and color choices substantially affect how a website feels and how trustworthy it appears. The choices should follow brand strategy rather than aesthetic preference alone, but several practical principles apply universally. **Typography selection:** **Match the brand positioning.** Serif typefaces (Playfair Display, Merriweather, Lora, Source Serif Pro) signal tradition, authority, and gravitas — appropriate for legal, financial, professional services, premium consumer brands. Sans-serif typefaces (Inter, IBM Plex Sans, Open Sans, Source Sans Pro) signal modernity, clarity, accessibility — appropriate for tech, healthcare, modern professional services, mass-market consumer. Display typefaces (used sparingly) can carry brand personality where serif/sans-serif feels too neutral. **Limit font variety.** Most well-designed sites use 1–2 typefaces total. A serif headline paired with a sans-serif body, or a single sans-serif used at multiple weights, produces clean systematic typography. Three or more typefaces typically produces visual noise unless deliberately handled by an experienced designer. **Ensure legibility.** Minimum 16px body text on desktop (Canadian users on smaller screens often need 17–18px). Line height 1.5–1.7 for body text. Line length 50–75 characters for comfortable reading. Sufficient contrast (WCAG 2.2 AA requires 4.5:1 for body text, 3:1 for large text). Test with real content, not just design samples — typography choices that look elegant on a designer's hero page often fail on a 2,000-word service description. **Webfont performance.** Self-host webfonts where possible (Google Fonts CDN adds a third-party dependency). Use `font-display: swap` or `font-display: optional` to prevent invisible text during font load. Subset fonts to only the characters you need (Latin Extended for Canadian English/French is a common subset). Variable fonts reduce file size when you need multiple weights. **Canadian language considerations.** If your site is bilingual (English/French), confirm that chosen typefaces include the full Latin Extended character set with proper French diacritics (é, è, ê, ç, ï, ô, etc.). Many display fonts have weak French character coverage. **Color selection:** **Build from brand strategy.** Your primary brand color should reflect brand positioning — deep blues and navys signal trust and stability (financial, legal, professional services); warm tones (oranges, yellows) signal approachability and energy (consumer, hospitality, education); greens signal health, growth, sustainability; rich purples signal premium and creative. **Build a complete system, not just a primary color.** A coherent palette typically includes: primary brand color (60–70% of color usage); secondary brand color (15–25%); accent color for CTAs and emphasis (5–10%); semantic colors for success (green), warning (yellow/amber), error (red), info (blue); a neutral scale of grays for text, backgrounds, and borders. Tools like Adobe Color, Coolors, or design system token generators help build coherent palettes. **Test contrast.** Every color combination used for text or UI must meet WCAG 2.2 AA contrast minimums. The most common failure: light gray text (often #999 or #CCC) on white backgrounds — looks elegant but fails contrast and excludes users. Body text typically needs to be at least #333 on white to meet contrast. **Test colorblind users.** Roughly 8% of men and 0.5% of women have some form of color vision deficiency. Use tools like Stark, Color Oracle, or browser DevTools to test how your palette appears to users with various forms of colorblindness. Don't rely on color alone to convey information (a red error message also needs text or an icon). **Cultural considerations.** Color associations vary by culture. For Canadian audiences, the conventions are largely Western — red signals warning or error; green signals success or environmental themes; blue signals trust and stability. Quebec audiences have similar conventions but with subtle differences in marketing tradition. **Test the palette in actual context.** Color choices that look beautiful in design tools sometimes fail when applied to real content with real photography and real CTAs. Build sample pages with actual content before committing to the palette.