Vari­able fonts: Times are chang­ing

Vari­ables fonts prom­ise an on­line ty­po­graph­i­cal ex­pe­ri­ence on par with print

Web Designer - - Contents - Tamás Ha­jas Se­nior En­gi­neer, Mirum miru­ma­gency.com

Se­nior en­gi­neer at Mirum dis­cusses the ben­e­fits of vari­able fonts and how to use them

While we have had web font sup­port for around a decade, web de­sign­ers and de­vel­op­ers were un­able to ap­ply all but the most ba­sic ty­po­graphic prin­ci­ples to on­line con­tent. But the times are chang­ing and with them the emer­gence of the vari­able font for­mat. What are vari­able fonts? “A vari­able font is a sin­gle font that acts as many” says Vari­able­fonts.io ed­i­tor John Hud­son. But what does it mean in prac­tice? As you know, a font fam­ily can have a lot of vari­a­tions; a font can be thin or bold, nar­row or wide, and so on. Reg­u­lar web fonts store all th­ese vari­a­tions in sep­a­rate files. In vari­able fonts all the vari­a­tions are stored in a sin­gle file. Each char­ac­ter has only one out­line and the con­nec­tor points of this out­line have in­struc­tions on how they should move to cre­ate an­other style. As a re­sult — most of the time — a vari­able font file will have a smaller file size than the sep­a­rate font files to­gether. It will also have more pos­si­bil­i­ties than a reg­u­lar web font.

So how should you use vari­able fonts? Vari­able fonts are sup­ported by the cur­rent ver­sions of all the ma­jor desk­top browsers, just like the de­fault browsers on mo­bile plat­forms. This means you can start us­ing them right now, but it is rec­om­mended that you add them as an en­hance­ment. You can add a vari­able font to your site us­ing the same ol’ ‘@font-face’ dec­la­ra­tion you know al­ready: @font-face { font-fam­ily: ‘My Vari­able Font’; src: url(‘fonts/my-vari­able-font.woff2’) for­mat(‘woff2’);}

//Then you can use it in you CSS rule­set:

.head­ing {å font-fam­ily: ‘My Vari­able Font’, ‘Reg­u­lar Web­font’, sys­tem-font; font-vari­a­tion-set­tings: ‘wght’ 812, ‘wdth’ 72; }

There is a strange thing in the above code: ‘font-vari­a­tion-set­tings’. This is a so-called low-level prop­erty of CSS that’s be­ing used to de­fine vari­able font set­tings for the time be­ing. Its value should be built from one or more pairs of a four-char­ac­ter tag and num­ber.

Ev­ery type­face is dif­fer­ent be­cause it de­pends on the fea­tures the font de­signer has de­cided to add. A font can have any num­ber of cus­tom axes (this is the of­fi­cial name of the change­able prop­er­ties of the font) and there are five reg­is­tered (or com­mon) axes. We saw ‘wght’ and ‘wdth’ al­ready, which are the weight and the width of the font. There are also ‘ital’, ‘slnt’ and ‘opsz’, which mean italic, slant and op­ti­cal siz­ing. You may have no­ticed al­ready that the val­ues of the weight and the width prop­er­ties are not the usual round num­bers. This is be­cause by us­ing vari­able fonts we can de­fine any whole num­ber in the prop­erty range as a value and they will re­sult in a dif­fer­ent font dis­play.

The value of the italic set­ting can only be ‘0’ or ‘1’ be­cause the italic ver­sion of a font is so dif­fer­ent from the nor­mal ver­sion that an in-be­tween for­mat would not be any­thing but ugly. (Most of the time the italic ver­sion of a vari­able font will be a sep­a­rate font file, just as it is with a reg­u­lar web font). We may have a slant set­ting, how­ever, which can be use to set an oblique ver­sion of the font. It is worth men­tion­ing that this slant­ing — just like the other set­tings — won’t mean that the font will be dis­torted, since it works in the way it was set by the font de­signer.

Last, but not least, there is op­ti­cal siz­ing. This is the pos­si­bil­ity that the font will have more or less de­tail de­pend­ing on its size — for ex­am­ple, a smaller font will have thicker stems, while a big­ger font will have thin­ner ones. This was the priv­i­lege of print de­sign — un­til now.

Note: You have to use a low­er­case tag to set a reg­is­tered axis and an up­per­case tag to set a cus­tom axis. Us­ing the lat­ter, you can set any­thing pro­vided by the font de­signer — for ex­am­ple, x-height, round­ness, grade, and so on. Oh, and did I men­tion that any of the reg­is­tered or the cus­tom axes can be an­i­mated? (Beat that, print!). Cur­rently, we have to use the ‘font-vari­a­tion-set­tings’ prop­erty to style vari­able fonts, but when the CSS4 Font mod­ule is im­ple­mented by browsers we will have high-level prop­er­ties for the reg­is­tered axes. Some of them may be fa­mil­iar — like ‘font-style’, ‘font-weight’ or ‘font-stretch’ — but there will be a new one, too, ‘font-op­ti­cal-siz­ing’, which will be au­to­matic by de­fault.

Ev­ery type­face is dif­fer­ent be­cause it de­pends on what fea­tures the font de­signer de­cided to add

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.