🎹Variable Font Axis Settings Guide

Your axis ranges checked, with the CSS generated

CSS to paste


            

                
Axis by axis

                

                    
TagRange you enteredWantedVerdictHigh-level property

                    
                

                
No recommended axis value is offered. Each variable font publishes its own minimum and maximum per axis, so no value works everywhere. Enter the range the font publishes and the tool only checks whether the wanted value falls inside it, boundary included; outside it, the code carries the limit a browser would clamp to. Tags follow the convention that four lowercase characters mark a registered axis and uppercase marks a custom one. wght, wdth, slnt, ital and opsz have high-level properties, which CSS Fonts 4 prefers (as of October 2026).

            

        


    
    

        
You Might Also Need

        

            
                🔠
                
Drop Cap Size Calculator
Drop cap size and CSS from lines covered

            
            
                📏
                
Line Height Calculator
Optimal line-height by font size

            
        

    


        


        

            
How to use the variable font axis settings guide

            
A variable font packs several axes into one file, and you pick a shape with an axis tag and a value. The trouble is that the range of each axis differs per font. Enter a value without knowing the range and the browser quietly clamps it to a limit, so the weight you wanted never appears. This tool takes the range the font publishes plus your wanted value, checks whether it falls inside, and writes the font-variation-settings syntax.

            
Enter one axis per line as "tag min max wanted", separated by spaces or commas. An axis tag is always four characters, and by convention four lowercase characters mark a registered axis while uppercase marks a custom one. The registered axes wght, wdth, slnt, ital and opsz can also be written out as their high-level properties: font-weight, font-stretch, font-style and font-optical-sizing. Written as of October 2026.

            
No recommended axis value is offered. Ranges differ per font, so no common recommendation holds. The tool also never reads your font file, so it cannot confirm which axes the font really carries and works only from the range you entered. Interaction between axes and the quality of intermediate instances in the design space are not covered either, so confirm the result in a browser.

        

            
Frequently Asked Questions

            
Will it tell me what value to set an axis to?
No. Even the same wght axis runs 100 to 900 in one font and 200 to 700 in another, so there is no common recommendation. Enter the range the font publishes along with your wanted value and it only checks whether the value falls inside.

            
What happens if a value is outside the range?
The browser clamps it to the nearest limit. The generated code therefore carries the clamped value, and the table and warning line show both your original value and the clamped one. The limit itself counts as inside the range.

            
Can I just use font-variation-settings?
It works. But CSS Fonts 4 prefers high-level properties such as font-weight for registered axes like wght, wdth, slnt, ital and opsz, because inheritance and animation behave more predictably through them.