# Variable fonts with an optical size axis > Variable families that redraw themselves for the size they are set at: sturdier and looser when small, finer and tighter when large. In metal type every size was cut separately, and punchcutters adjusted the design as they went. Small sizes were made wider and sturdier with looser spacing so they would survive on the page; large sizes were refined, with thinner hairlines and tighter fit. Digital fonts lost this when one outline began to be scaled to every size. The optical size axis, tag opsz, brings it back. In a font with this axis, the value normally corresponds to the size in points. At a low value the letters have a larger x-height, thicker thin strokes and more space between them. At a high value contrast sharpens and details become delicate. The practical result is that one family can serve as both text face and display face, and a caption stays readable without looking heavy. Browsers apply the axis automatically: font-optical-sizing is set to auto by default, so a font that has the axis adapts to the font size with no extra code. You can also set it by hand to deliberately use the display design small or the text design large. Ranges differ widely between families, from a text-only adjustment of a few points to a span of over a thousand, and the notes give each one as recorded. How these were chosen: Variable families whose records list an optical size (opsz) axis with a usable range; ranges and companion axes are quoted from the records. ## Fonts (16) - [Inter](https://trendhub.net/fonts/inter.markdown) (Sans Serif, 18 styles · variable, OFL): Optical size from 14 to 32 tunes a screen sans for small labels and larger headings, beside nine weights with italics. - [DM Sans](https://trendhub.net/fonts/dm-sans.markdown) (Sans Serif, 18 styles · variable, OFL): Optical size from 9 to 40 on a low-contrast geometric sans. - [Merriweather](https://trendhub.net/fonts/merriweather.markdown) (Serif, 14 styles · variable, OFL): A text serif whose optical size runs from 18 to 144, with weight and width axes. - [Bricolage Grotesque](https://trendhub.net/fonts/bricolage-grotesque.markdown) (Sans Serif, 7 styles · variable, OFL): Optical size from 12 to 96, with ink traps exaggerated at the small end, beside weight and width. - [Nunito Sans](https://trendhub.net/fonts/nunito-sans.markdown) (Sans Serif, 16 styles · variable, OFL): A small-size optical range, 6 to 12, among four axes with weight, width and lowercase height. - [Source Serif 4](https://trendhub.net/fonts/source-serif-4.markdown) (Serif, 16 styles · variable, OFL): Optical size from 8 to 60 in a transitional serif, with eight weights and italics. - [Newsreader](https://trendhub.net/fonts/newsreader.markdown) (Serif, 14 styles · variable, OFL): An optical size axis from 6 to 72, with weights from 200 to 800. - [Literata](https://trendhub.net/fonts/literata.markdown) (Serif, 16 styles · variable, OFL): A reading serif with optical size from 7 to 72, eight weights and italics. - [Playfair](https://trendhub.net/fonts/playfair.markdown) (Serif, 14 styles · variable, OFL): The widest optical range here, 5 to 1200, in a serif that also varies in weight and width. - [Fraunces](https://trendhub.net/fonts/fraunces.markdown) (Serif, 18 styles · variable, OFL): Optical size from 9 to 144 beside weight, Softness and Wonky axes. - [Bodoni Moda](https://trendhub.net/fonts/bodoni-moda.markdown) (Serif, 12 styles · variable, OFL): A high-contrast serif whose optical size runs from 6 to 96. - [Roboto Serif](https://trendhub.net/fonts/roboto-serif.markdown) (Serif, 18 styles · variable, OFL): Optical size from 8 to 144 among four axes, with weight, width and grade, and 18 named styles. - [Roboto Flex](https://trendhub.net/fonts/roboto-flex.markdown) (Sans Serif, 20 styles · variable, OFL): Optical size from 8 to 144 is one of 13 axes in a single file. - [Pathway Extreme](https://trendhub.net/fonts/pathway-extreme.markdown) (Sans Serif, 18 styles · variable, OFL): Optical size from 8 to 144 in a grotesque sans, beside weight and width axes. - [TikTok Sans](https://trendhub.net/fonts/tiktok-sans.markdown) (Sans Serif, 14 styles · variable, OFL): Optical size from 12 to 36 with weight, width and slant, four axes in a single file. - [Hedvig Letters Serif](https://trendhub.net/fonts/hedvig-letters-serif.markdown) (Serif, 1 style · variable, OFL): A single-weight brand serif whose only axis is optical size, from 12 to 24. ## FAQs ### What does optical size change in a font? Stroke contrast, spacing, x-height and fine details. Small optical sizes are sturdier and more open; large ones are sharper and more tightly fitted. ### Do I need to write CSS to use optical sizing? Usually not. Browsers match the axis to the font size automatically. To override it, set font-variation-settings: "opsz" followed by a value within the font's range. ### Which is better, an optical size axis or separate text and display fonts? They achieve the same thing. The axis is more convenient, covers the sizes in between and needs only one file. ## Related collections - [Variable fonts with a width axis](https://trendhub.net/fonts/for/variable-fonts-with-a-width-axis.markdown) - [Variable fonts with unusual axes](https://trendhub.net/fonts/for/variable-fonts-with-unusual-axes.markdown) - [Serif fonts for long reading on screens](https://trendhub.net/fonts/for/serif-fonts-for-long-reading.markdown) - [High-contrast Didone fonts for fashion and editorial headlines](https://trendhub.net/fonts/for/high-contrast-didone-fonts.markdown) - [Fonts for newspapers and magazines](https://trendhub.net/fonts/for/newspaper-and-magazine-fonts.markdown) - [Clean sans-serif fonts for app interfaces](https://trendhub.net/fonts/for/app-interface-fonts.markdown) --- Source: https://trendhub.net/fonts/for/variable-fonts-with-optical-size (trendhub)