I’m working with the Inter typeface and noticed something weird. When I use font-weight: 450 in my CSS, it looks exactly the same as font-weight: 500 in both Chrome and Firefox browsers.
font-family: 'Inter', sans-serif;
font-weight: 450;
But in design software like Figma, setting the weight to 450 gives me a clearly different appearance compared to 400 or 500. The difference is quite noticeable there.
Is there something I’m missing about how browsers handle intermediate font weights like 450, 550, or 650? Can I actually use these values in web development to get the visual differences I see in design tools?
Browsers map missing font weights to the closest available one. Since Inter doesn’t have a 450 weight, your browser jumps to 500 instead. Design tools are different - they can interpolate between weights to create that in-between look you’re seeing. If you want to match what you see in your design tool, grab a version of Inter that includes 450, or use a variable font version where you can fine-tune weights with font-variation-settings.
totally get what u mean! browsers often round to the nearest weight available, so if Inter ain’t got a 450, it defaults to 500. design apps like Figma can show more subtle differences since they handle weights differently. it’s tricky, right?
Had this exact problem last month with a client’s design. It happens because browsers handle font fallbacks differently than design software renders fonts. Most web fonts only come with specific weights like 300, 400, 500, 700 - so when you ask for 450, the browser just picks the closest available weight based on CSS specs. If you really need that exact 450 weight, try Inter Variable instead. It supports the full range from 100-900. You can use CSS custom properties to keep everything consistent across your design system. Variable fonts are a bit bigger file-wise, but the flexibility usually makes it worth it.