Why does font-weight: 600 look different across fonts or browsers?

The number is a request, not a universal measurement of how thick the letters must look. 600 is commonly labeled semibold, but that label does not standardize letterforms or stroke thickness across typefaces. [S1]

The browser interprets the request in the context of the selected font-family and the font faces available to it. So a 600 in one family can look lighter or heavier than a 600 in another, even when both requests are honored. [S1]

Treat the number as a way to select a weight within a font family, then judge the result visually in your actual design. Don’t assume that changing every family to 600 will produce a matching appearance.

If the selected non-variable font has no face at the requested weight, CSS uses a weight-matching algorithm to choose from the available faces. The matching search differs depending on whether the request is below 400, between 400 and 500, or above 500. [S1]

For a family with only regular and bold faces, a 600 request may therefore be matched to an available face rather than creating a new, perfectly intermediate design. The exact result depends on what faces the browser can use. [S1]

A practical check is to confirm which font family and files are actually declared and available, then compare the rendered result with the intended design. If the family is only a fallback or a face failed to load, the appearance can differ because the ultimately used font matters too. [S1]

A variable font may support a range of weights, so the browser can request values within that range instead of choosing only among separate static faces. But a range declaration alone does not make a static font variable: multiple requested values mapped to a static face can still look the same. [S1] [S2]

For example, if your variable font file supports weights from 300 to 700, you could declare that range like this:

@font-face {
  font-family: "Example Sans";
  src: url("[font-file].woff2") format("woff2");
  font-weight: 300 700;
}

.heading {
  font-family: "Example Sans", sans-serif;
  font-weight: 600;
}

Here, [font-file].woff2 is a placeholder, not a real URL. Declare the range that the actual file supports; the browser uses the declared range to match requests, and values in a variable range can produce different weights. [S2] A static face can also have a declared range, but different values in that range may look identical. [S2]

First compare the family each browser is using, the font files available, and the weight or range declared for those files. The appearance depends on the font ultimately used and on its actual faces or variation range. [S1] [S2]

Then check whether the intended 600 face is present, or whether the request is being matched to another face. For a variable font, confirm that the declared range corresponds to the file. These checks help explain a mismatch; the cited guidance does not establish that two browsers will render every font identically, or that a particular declaration guarantees identical appearance. [S1] [S2]

Use a side-by-side comparison of the same text, size, family, and weight request. If the visible result still differs, choose the weight that best fits the design in the browsers and font setup you support rather than relying on the number alone.