Beginner: Colors & Typography
beginner: colors & typography colors & typography — 25 interview questions with traps, follow-ups, and production context. practice out loud;
Introduction
Colors & Typography — 25 interview questions with traps, follow-ups, and production context. Practice out loud; staff loops reward trade-offs, not definitions.
Business problem
Business pressure: Product teams need Colors & Typography interview questions to ship polished UI without layout regressions, accessibility lawsuits, or LCP regressions that hurt conversion.
- Conversion: Visual polish and performance directly affect checkout and signup funnels.
- Brand: Inconsistent Colors & Typography interview questions implementation fragments design system trust.
- Velocity: CSS debt slows every feature team — architecture matters at scale.
Why this feature exists
Platform history: CSS evolved Colors & Typography interview questions to solve author needs without JavaScript layout engines or table hacks.
- Problem solved: Declarative styling separated from document structure.
- Rejected alternative: Inline styles and JS layout — unmaintainable at enterprise scale.
Browser rendering perspective
Rendering impact: Colors & Typography interview questions affects style recalculation, layout, paint, and composite stages in the browser pipeline.
- Chrome (Blink): Style → LayoutNG → Paint → Viz compositor.
- Firefox (Gecko): Servo-based stylo + WebRender compositing.
- Safari (WebKit): WebKit style resolver + GPU layer promotion rules.
Internal browser workflow
Workflow: Selector match → cascade → computed values → layout tree → paint layers → composite.
Real production example
Production: Netflix, Amazon, and Shopify enforce Colors & Typography interview questions patterns via design tokens, lint rules, and visual regression CI.
Enterprise use case
Enterprise: Design systems (Polaris, Carbon, Atlassian) codify Colors & Typography interview questions in token pipelines and component APIs.
Accessibility considerations
A11y: CSS must not remove focus visibility, break zoom, or convey state by color alone (WCAG 2.2).
Performance considerations
Performance: Colors & Typography interview questions can trigger reflow, expensive selectors, or layer explosion — profile with DevTools Performance panel.
SEO considerations
SEO: CSS affects LCP, CLS, and mobile usability — ranking signals tied to Core Web Vitals.
Scalability considerations
Scale: Colors & Typography interview questions choices compound across micro-frontends, white-label tenants, and dark-mode variants.
Common production issues
Production failures: Specificity wars, z-index stacks, and responsive breakpoints that work in Chrome but break Safari.
Debugging guide
Debug: Chrome DevTools → Elements (computed styles), Layout panel, Rendering layers, Coverage for unused CSS.
Interview questions
Name CSS color formats.(Beginner)
Named, hex, rgb(), rgba(), hsl(), hsla(), oklch() modern. Trap: hex without # invalid; oklch better for perceptual palettes.
Follow-up: Why oklch for design systems?
What is color contrast?(Beginner)
Ratio between foreground and background — WCAG AA 4.5:1 body text. Trap: pretty gray-on-gray fails audit.
Follow-up: How to test contrast?
What is currentColor?(Beginner)
Uses computed color value — icons inherit text color elegantly.
Follow-up: SVG stroke currentColor?
What is opacity vs rgba?(Beginner)
opacity affects entire element including children; rgba only that layer. Trap: opacity on parent kills contrast on child text.
Follow-up: Which for disabled state?
What is font-family stack?(Beginner)
List of fallbacks ending generic (sans-serif). Trap: missing generic fallback uses unexpected font.
Follow-up: System font stack example?
What is font-size?(Beginner)
Sets em reference for element — rem uses root. Trap: iOS zoom if input font-size < 16px.
Follow-up: Why 1rem on inputs?
What is line-height?(Beginner)
Leading — unitless preferred (1.5) scales with font-size. Trap: fixed px line-height breaks i18n diacritics clip.
Follow-up: Unitless vs 24px?
What is font-weight?(Beginner)
100-900 or keywords — variable fonts interpolate. Trap: faux bold on missing weight.
Follow-up: font-weight 600 vs bold?
What is text-align?(Beginner)
Horizontal alignment — logical text-align: start for RTL.
Follow-up: Center long body text — good?
What is text-decoration?(Beginner)
underline, line-through — links need more than color difference.
Follow-up: Accessible link styling?
What is letter-spacing?(Beginner)
Tracking — uppercase labels often increase slightly. Trap: hurts dyslexia if excessive.
Follow-up: When adjust letter-spacing?
What is text-transform?(Beginner)
uppercase, capitalize — affects screen reader pronunciation for capitalize trap.
Follow-up: Accessibility of uppercase?
What is white-space?(Beginner)
nowrap, pre-wrap control wrapping — nowrap causes overflow on mobile.
Follow-up: Truncate vs nowrap?
What is text-overflow ellipsis?(Beginner)
Requires overflow hidden, nowrap, block width — three-part pattern.
Follow-up: Multi-line ellipsis?
What is clamp for fluid type?(Beginner)
clamp(min, preferred, max) responsive typography without breakpoints.
Follow-up: clamp vs media query font-size?
What is @font-face?(Beginner)
Loads custom fonts — font-display: swap prevents FOIT. Trap: loading 6 weights kills LCP.
Follow-up: Subset fonts why?
What is color-scheme?(Beginner)
Hints UA for scrollbars/form controls in dark/light — pairs with theme tokens.
Follow-up: color-scheme dark only?
What is prefers-color-scheme?(Beginner)
Media query for OS theme — respect for default dark styles.
Follow-up: Manual theme override?
What is prefers-contrast?(Beginner)
User wants higher contrast — boost borders and text.
Follow-up: forced-colors media?
What is mix-blend-mode?(Beginner)
Blends element with backdrop — cinematic heroes; perf and a11y care.
Follow-up: Isolation property?
What is gradient text?(Beginner)
background-clip: text — decorative; fallback color required for contrast.
Follow-up: Accessible gradient headings?
What is vertical-align?(Beginner)
Aligns inline/inline-block/table-cell — not for block centering. Trap: vertical-align middle myth on div.
Follow-up: Center text vertically in flex?
What is font shorthand?(Beginner)
font: weight size/line-height family — resets other font longhands.
Follow-up: Trap of partial font shorthand?
What is system-ui font?(Beginner)
Uses OS UI font — fast, native feel for dashboards.
Follow-up: When custom brand font?
What is reading flow and max line length?(Beginner)
45-75 characters optimal — use max-width on text containers not viewport full width.
Follow-up: ch unit for measure?
Hands-on exercise
Mock interview drill: Answer all 25 questions out loud in 45 minutes. Record yourself explaining trade-offs, not just definitions.
Try it yourself
Edit the CSS panel — the preview updates live. Use DevTools Performance and Accessibility panels to validate.