font-optical-sizing-1-ref.html (1739B)
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-optical-sizing: none; 13 } 14 </style> 15 </head> 16 <body> 17 <!-- Voto has an optical size axis that ranges from 12.0 to 72.0, 18 so for sizes outside that range the value applied will be clamped --> 19 <div style="font-size: 9px; font-variation-settings: 'wght' 50, 'opsz' 12;">Voto <span style="font-variation-settings: 'wght' 100, 'opsz' 12;">bold</span> at 9px</div> 20 <div style="font-size: 12px; font-variation-settings: 'wght' 50, 'opsz' 12;">Voto <span style="font-variation-settings: 'wght' 100, 'opsz' 12;">bold</span> at 12px</div> 21 <div style="font-size: 16px; font-variation-settings: 'wght' 50, 'opsz' 16;">Voto <span style="font-variation-settings: 'wght' 100, 'opsz' 16;">bold</span> at 16px</div> 22 <div style="font-size: 24px; font-variation-settings: 'wght' 50, 'opsz' 24;">Voto <span style="font-variation-settings: 'wght' 100, 'opsz' 24;">bold</span> at 24px</div> 23 <div style="font-size: 32px; font-variation-settings: 'wght' 50, 'opsz' 32;">Voto <span style="font-variation-settings: 'wght' 100, 'opsz' 32;">bold</span> at 32px</div> 24 <div style="font-size: 48px; font-variation-settings: 'wght' 50, 'opsz' 48;">Voto <span style="font-variation-settings: 'wght' 100, 'opsz' 48;">bold</span> at 48px</div> 25 <div style="font-size: 72px; font-variation-settings: 'wght' 50, 'opsz' 72;">Voto <span style="font-variation-settings: 'wght' 100, 'opsz' 72;">bold</span> at 72px</div> 26 <div style="font-size: 96px; font-variation-settings: 'wght' 50, 'opsz' 72;">Voto <span style="font-variation-settings: 'wght' 100, 'opsz' 72;">bold</span> at 96px</div> 27 </body> 28 </html>