font-optical-sizing-1.html (961B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <style> 6 @font-face { 7 font-family: Voto; 8 src: url(../fonts/VotoSerifGX.latin1.ttf); 9 } 10 body { 11 font-family: Voto; 12 font-variation-settings: "wght" 50; 13 font-optical-sizing: auto; 14 } 15 span { 16 font-variation-settings: "wght" 100; /* Voto weights are non-standard, 17 so this is actually quite bold */ 18 } 19 </style> 20 </head> 21 <body> 22 <div style="font-size: 9px">Voto <span>bold</span> at 9px</div> 23 <div style="font-size: 12px">Voto <span>bold</span> at 12px</div> 24 <div style="font-size: 16px">Voto <span>bold</span> at 16px</div> 25 <div style="font-size: 24px">Voto <span>bold</span> at 24px</div> 26 <div style="font-size: 32px">Voto <span>bold</span> at 32px</div> 27 <div style="font-size: 48px">Voto <span>bold</span> at 48px</div> 28 <div style="font-size: 72px">Voto <span>bold</span> at 72px</div> 29 <div style="font-size: 96px">Voto <span>bold</span> at 96px</div> 30 </body> 31 </html>