Web Fonts - Computerphile

Key Takeaways

i'm going to talk a little bit about the history and development of web font technologies well the web was first invented it wasn't possible to specify fonts the idea was that the page language html would specify the the the structure of the content where the headings are where paragraphs are tables lists and it'll be up to the up to the browser up to the viewer maybe even to take taking into account personal preferences of the user to actually choose which font to display the text in particularly commercial sites but also also authors wanted to have some kind of some kind of influence on how the how their content was being presented and i guess back in 1995 they started with netscape introducing the font tag but even back then it was only possible to refer to fonts that were actually installed on the computer and back then there weren't really very many standardized fonts across many across different systems essentially had helvetica or a an alternative like such as aerial in windows systems and a serif font such as such as times as well and authors had to specify numerous fallbacks and generic families microsoft introduced and they started a project in around 96 and they introduced a dozen or so of high quality fonts for web use really optimized for web use and these were published under a freeware license everyone could download them although there were restrictions on modifying them or bundling them in other commercial products and the result of this was that within a few years everyone could expect fonts such as vedana and georgia to be on installed on pretty much every system as well as aerial and times new roman we've done one or two videos on things to do with typefaces in the past often with professor brailsford why does it matter what typeface things are written if the website is um from a from a commercial company it communicates a certain brand and the type typography um is part of this brand's image i've got to be honest this sounds a little bit like selling sales speak mumbo jumbo let's go and delve under the hood what's happening technically though with these fonts i mean are they now embedded in the websites or how does it work well fonts nowadays are typically well they can be stored on the server just like anything else in the website but quite often they're being served by a third party companies such as google or adobe type kit and uh font the usage of the fonts is also licensed in such a way quite often per number of views um in the case of commercial fonts because in the past um font it wasn't really allowed to put commercial font files um on the internet at least typical installable fonts that we have on the system on on computer systems like true type and open type and put these files and make them accessible for the whole whole wide world to download and that's what was uh stalling the take up of of web fonts for so long so it kind of comes down to copyright does it very much so um and uh the way the font industry i think between like the late 90s and maybe 10 years later with the decline of print the font industry started to see web fonts as less of a threat and more of a business opportunity i guess the transformation started when there were numerous attempts at um embedding fonts in ways that they don't get downloaded using replacement techniques commercial websites would use headings would use images for headings and other largest larger picture pieces of text but now these replacement techniques were becoming more more complex using either either flash or scalable vector graphics which would enable the text to remain um searchable by search engines um but still um it wasn't because of the performance issues um and various uh other disadvantages these weren't proper proper web fonts and pressure was growing on the industry to find a solution for authors wishing to license fonts for web use and make them downloadable back in the 90s there were two attempts at a font format which could be downloaded but couldn't readily be installed and probably the most well-known one one of the of the two was a microsoft's embedded open type eot but that only worked in internet explorer and it wasn't open it used some proprietary encryption algorithms and that's why there was a pushback from from browser manufacturers and in in getting the format adopted as a w3 stat w3c standard and as an alternative they came up with waff the web open font format is a waft different from what i know of as say maybe a ttf or one of these fonts that you install how is that different yes yes yes it is different um it's i guess windows or your operating system doesn't you can't install it you can essentially convert it into a ttf um but it's missing many features that are that a commercially bought font would have particularly if the website didn't need it i guess in the most extreme way it could be subset in such a way that only the characters that the website uses actually appear in the font and it's possible to have a font served up server side in such a way for every single piece of text that you have in the font more commonly you'd have a complete alphabet but for example eastern european characters might be left out some features that aren't being used such as ligatures small capitals and obviously the font also supports any non-latin characters these would make the font much larger to download and one of the main benefits of waff is a compact file size from manufacturers is that the right word for them typeface houses are known as font foundries once those fonts are out there it's over for them isn't it um well fonts do get updated from time to time a good example a good more than a decade ago was there was the euro symbol which uh gave gave them an opportunity to essentially resell update and resell their products things like the newer symbol being added is they the main reason what these fonts get updated well that's certainly one the reasons particularly as foundries look at supporting an ever increasing number of non-latin scripts but also the outlines get reworked and certainly with respect to web fonts a number of fonts have been optimized for on-screen use generally using techniques that date back to the printer era such as a larger x height the x height is the height of lowercase characters in at least in respect to the height of of the capital so when you say you you increase the x height that means that the lowercase characters are proportionally larger so there's less difference between capital and lowercase characters slightly wider characters uh less contrast contrast is the difference between the thin strokes and the thick strokes of a typeface um and all this um helps legibility but another issue that web fonts have brought about is that of hinting and particularly on windows systems when text is displayed at very small sizes windows has a way of rendering the text which is very sharp but that's dependent on extensive hinting information being present in the outlines what is hinting it is essentially giving adding instructions to a font to how um how the the outline should fit the pixel grid and which compromises should be made so essentially the shape of the outlines is modified slightly this was covered actually in a previous computer via video by professor brasford how do you decide which pixels of these vertical stems to be colored in one of the most recent developments is the release of something called open type variations or variable fonts up to now when a font has been sold with a variety of styles you'd have a normal you'd have a bowl you'd have an italic you'd have a bold italic for example but what would a designer do if they were they wanted something in between a regular and a bold and with variations it's possible to specify really continuously um along a something called a variation axis i uh parameter how much boldness the designer wishes to have and this isn't only for design of potential use but also for the use of responsive responsive web pages it would be possible to for example on a smaller screen or a mobile device choose a slightly narrower version of the same typeface what are you talking about there then is effectively having a parameter like the size but for boldness or italicity is that a word well it felicity i don't know what the word is to be honest well um generally that's something that can't be varied it's not a parameter that it makes sense at least from a design perspective to make continuous quite often the shapes for certain typefaces it's more of a sort of cursive style and the italics have completely different shapes it depends on the font other parameters would be like i mentioned before the optical scaling to what extent should the x height and con x height being increased and the contrast reduced or relative relative width of characters do we have is a font condensed extended extra condensed and maybe want to really be able to verify that parameter can continuously in order to get text to fit into a certain certain predefined width this isn't even a new technology multiple master was i guess the most well-known product which was available back in the back in the 90s and that didn't catch on back then but now with web fonts fonts are getting bigger and bigger again because of increased number of features alternatives and larger character sets and um if it's possible to reduce the size of the fonts we have to download if we can download the whole family uh font family in one file which is marginally larger than the kind of files we have for each individual style then it's obviously very beneficial um also for simply for the delivery of web fonts even if we ignore the additional flexibility that we're getting from them and that's because uh at the moment you would download the bold version or the italic version and the all-round and or all these different types will be different types yeah and particularly if you want to have the flexibility of more than just just four the basic four styles then you you very much very quickly get to 16 or 32 and and it and it all grows from there and you end up in fonts that are with having fonts that are several megabytes in size now think of people in the third world who maybe need a non-latin character support anyway and at the same time are very low bandwidth connections and that whole disc instead of holding 50 or 60 different typefaces was devoted to holding times roman a hand tuned in about 40 usable point sizes stuff like that the thing that kept us going though the rumors on the horizon if you like were that two people working for xerox park