Font Comparison — WITwhat Dashboard Components

Each column uses the same WITwhat color tokens (#1a1e2a bg, #e0e4f0 text, #4a7cff accent) and Typography scale (11/12/13/18px). Compare vertical alignment, readability at small sizes, and overall feel.

Inter

Card header (13px name + 11px sub)
JD
John Doe
Discord: johndoe#1234
Chip bar (11px)
By Status
By Ship Date
By Recipient
By Product
Search bar (12px)
Search recipients, products, serial numbers...
Status row (12px)
Connected — Last sync: 2 min ago
Note preview (11px)
Shipped 2x headsets on 04/10. Awaiting delivery confirmation from recipient. Follow up Thursday.
Typography scale
11px The quick brown fox jumps AaBbCc 0123
12px The quick brown fox jumps AaBbCc 0123
13px The quick brown fox jumps AaBbCc 0123
18px The quick brown fox AaBb 0123

Noto Sans

Card header (13px name + 11px sub)
JD
John Doe
Discord: johndoe#1234
Chip bar (11px)
By Status
By Ship Date
By Recipient
By Product
Search bar (12px)
Search recipients, products, serial numbers...
Status row (12px)
Connected — Last sync: 2 min ago
Note preview (11px)
Shipped 2x headsets on 04/10. Awaiting delivery confirmation from recipient. Follow up Thursday.
Typography scale
11px The quick brown fox jumps AaBbCc 0123
12px The quick brown fox jumps AaBbCc 0123
13px The quick brown fox jumps AaBbCc 0123
18px The quick brown fox AaBb 0123

Roboto

Card header (13px name + 11px sub)
JD
John Doe
Discord: johndoe#1234
Chip bar (11px)
By Status
By Ship Date
By Recipient
By Product
Search bar (12px)
Search recipients, products, serial numbers...
Status row (12px)
Connected — Last sync: 2 min ago
Note preview (11px)
Shipped 2x headsets on 04/10. Awaiting delivery confirmation from recipient. Follow up Thursday.
Typography scale
11px The quick brown fox jumps AaBbCc 0123
12px The quick brown fox jumps AaBbCc 0123
13px The quick brown fox jumps AaBbCc 0123
18px The quick brown fox AaBb 0123

Side-by-Side: Vertical Alignment Stress Test

Mixed glyphs at 11px — the size most likely to show vertical alignment issues.

Inter 11px

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

0123456789 — #$%&@!? (parentheses) [brackets]

Delivered | In Transit | Label Created | Returned

SN: WH-2024-001234 | Qty: 2x | Card #47

john.doe@company.com | @johndoe#1234

Noto Sans 11px

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

0123456789 — #$%&@!? (parentheses) [brackets]

Delivered | In Transit | Label Created | Returned

SN: WH-2024-001234 | Qty: 2x | Card #47

john.doe@company.com | @johndoe#1234

Roboto 11px

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

0123456789 — #$%&@!? (parentheses) [brackets]

Delivered | In Transit | Label Created | Returned

SN: WH-2024-001234 | Qty: 2x | Card #47

john.doe@company.com | @johndoe#1234