Table of Contents

Clean Fast Basic Webfonts – Verdana, Roboto, Arial, Helvetica, Sans-serif

Short version: there isn’t one “standard” browser font. Browsers map the generic families (serif, sans-serif, monospace) to OS-specific defaults.

Typical defaults (factory settings)

Windows (Chrome/Edge/Firefox)
sans-serif → Arial
serif → Times New Roman
monospace → Courier New
macOS (Safari/Chrome/Firefox)
sans-serif → Helvetica (sometimes Helvetica Neue)
serif → Times / Times New Roman
monospace → Courier
Android (Chrome/Firefox)
sans-serif → Roboto
serif → Noto Serif
monospace → Roboto Mono / Droid Sans Mono

(Users and distro packages can change these, but that’s the common baseline.)

Verdana vs generic `sans-serif`

Availability: Preinstalled on Windows/macOS/iOS; not standard on Android or many Linux distros. If you specify font-family: Verdana, sans-serif;, Android will fall back to Roboto.
Design/metrics: Verdana (Matthew Carter) has a large x-height, wide letterforms, big counters, and strong hinting—built for low-DPI screens. It renders wider than Arial/Helvetica/Roboto (expect ~5–10% more width at the same font-size).
Readability: Excellent at small sizes; very clear shapes (“I”, “l”, “1” are distinct). A bit “old web” in feel compared to modern system fonts (SF/Segoe/Roboto/Inter).
When to use: Good if you want a classic, highly legible screen font and you can accept its width. For tight UI/table layouts or a modern look, prefer system stacks (below).

“Times sans” vs “just sans”

Times is a serif family (e.g., Times/Times New Roman). There isn’t a “Times Sans.”
sans-serif is a generic placeholder—on each OS it maps to Arial/Helvetica/Roboto/etc. Use it (with a stack) when you don’t want to ship a webfont.

Practical CSS stacks

Modern system sans (cross-platform):

font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
             Helvetica, Arial, "Liberation Sans", "DejaVu Sans", sans-serif;

Classic Verdana with safe fallbacks:

font-family: Verdana, Geneva, Tahoma, Arial, sans-serif;

Serif (if you want a Times-like look everywhere):

font-family: Georgia, "Times New Roman", Times, "Noto Serif", serif;

Notes

Expect layout shifts if you swap Verdana ↔ Arial/Helvetica/Roboto due to width/x-height differences—set a bit more line-height (e.g., 1.45) when using Verdana.
For a consistent brand look across platforms (incl. Android), use a webfont (e.g., Inter) or the system-ui stack for a native feel without downloads.

“Font comparison lab” for Verdana, Roboto, Arial, and Helvetica. It shows side-by-side samples at 12/16/24px, plus ambiguous glyphs, and auto-measures the rendered width to show how each font runs wider/narrower.

<!doctype html>
<meta charset="utf-8" />
<title>Font Comparison: Verdana vs Roboto vs Arial vs Helvetica</title>

<!-- Optional: load Roboto (uncomment if you want to force it)
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
-->

<style>
  :root{
    --gap: 18px;
    --card-bg: #fff;
    --ink: #222;
    --muted: #666;
    --grid: #eee;
  }
  html,body{margin:0;padding:0;background:#f6f7f9;color:var(--ink);font:14px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
  .wrap{max-width:1100px;margin:32px auto;padding:0 20px}
  h1{font-size:20px;margin:0 0 12px}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap)}
  .card{
    background:var(--card-bg);
    border:1px solid #e6e6e6;
    border-radius:12px;
    padding:14px 14px 10px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
  }
  .hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
  .name{font-weight:600;letter-spacing:.2px}
  .fallback{color:var(--muted);font-size:12px}
  .row{position:relative;padding:10px;border-radius:8px;margin:8px 0;background:
    linear-gradient(to bottom, transparent calc(1em - 1px), var(--grid) calc(1em - 1px)) 0 0/100% 1em; /* baseline guide */
  }
  .size12{font-size:12px}
  .size16{font-size:16px}
  .size24{font-size:24px}
  .sample{white-space:nowrap}
  .meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px;margin-top:6px}
  code{background:#f1f1f1;border:1px solid #e2e2e2;border-radius:6px;padding:0 6px}
  .glyphs{letter-spacing:.5px}
  .measure{margin-left:auto}
</style>

<div class="wrap">
  <h1>Font comparison: Verdana · Roboto · Arial · Helvetica</h1>
  <div class="grid" id="grid"></div>
</div>

<script>
(() => {
  const fonts = [
    { label: "Verdana",     stack: 'Verdana, Geneva, Tahoma, Arial, sans-serif', note: 'fallback: Geneva/Tahoma/Arial' },
    { label: "Roboto",      stack: 'Roboto, "Noto Sans", Arial, Helvetica, sans-serif', note: 'fallback: Noto/Arial' },
    { label: "Arial",       stack: 'Arial, Helvetica, sans-serif', note: 'fallback: Helvetica' },
    { label: "Helvetica",   stack: '"Helvetica Neue", Helvetica, Arial, sans-serif', note: 'fallback: Arial' },
  ];

  const pangram = "The quick brown fox jumps over the lazy dog 1234567890";
  const tricky  = 'Il1 | O0 | rn m | cl d | a e o';

  const grid = document.getElementById('grid');

  function mk(text, cls){ const el=document.createElement('div'); if(cls) el.className=cls; el.textContent=text; return el; }

  function measure(el){ return el.getBoundingClientRect().width.toFixed(1) + " px"; }

  fonts.forEach(f => {
    const card = document.createElement('section');
    card.className = 'card';
    card.style.fontFamily = f.stack;

    const hdr = document.createElement('div');
    hdr.className = 'hdr';
    hdr.appendChild(mk(f.label, 'name'));
    const fb = mk(f.note, 'fallback');
    hdr.appendChild(fb);
    card.appendChild(hdr);

    [12,16,24].forEach(sz => {
      const row = document.createElement('div');
      row.className = 'row size' + sz;

      const sample = mk(pangram, 'sample');
      row.appendChild(sample);

      const meta = document.createElement('div');
      meta.className = 'meta';
      meta.appendChild(mk(sz + 'px / 1.35', 'sz'));
      const m = mk('', 'measure');
      meta.appendChild(m);
      row.appendChild(meta);

      // after attach so metrics are real
      card.appendChild(row);
      m.textContent = measure(sample);
    });

    const glyphRow = document.createElement('div');
    glyphRow.className = 'row size16';
    glyphRow.appendChild(mk(tricky, 'sample glyphs'));
    const meta2 = document.createElement('div'); meta2.className='meta';
    meta2.appendChild(mk('Ambiguous glyphs', 'lbl'));
    glyphRow.appendChild(meta2);
    card.appendChild(glyphRow);

    grid.appendChild(card);
  });

  // Re-measure on resize (text wrapping off, but widths change w/ zoom)
  window.addEventListener('resize', () => {
    document.querySelectorAll('.card .row .sample').forEach(s => {
      const m = s.parentElement.querySelector('.measure');
      if (m) m.textContent = (s.getBoundingClientRect().width.toFixed(1) + ' px');
    });
  });
})();
</script>

Run it

https://brenden.com/compare_fonts.html