READ: In 2012 I gave my first talk on typography on the web. Titled Web Typography Now it documented the evolution of type on the web and was timely as universal @font-face support had just landed in all the major browsers. At the same time Open Type features were gaining support via the lower level CSS properties. It was an exciting time for type enthusiasts as we saw a brave new browser world not shackled to the six or so web safe fonts.

![small_typography_talk_94686fad8f.png](/uploads/small_typography_talk_94686fad8f_0caff3de9c.png)

Of course our new found type abilities came with drawbacks. Older versions of Internet Explorer needed a proprietary format. As did early versions of iOS. Performance was a major issue due to browser handling of font downloads and CSS parsing. More often than not we were faced with the horrors of Flash Of Invisble Text (FOIT), rendering the page unreadable until the font file finished downloading.

Over the years I have updated my typography talk. It has been presented a number of times in various formats. At meetups (DevUg, IO), at conferences (DevConf 2019, UX Craft South Africa) and in a series of workshops (CTFEDs Part One, CTFEDs Part Two).

Recently I presented the latest version at a FEDSA meetup. Titled Dynamic and Performant Web Typography it covers tips for selecting and matching typefaces, the latest techniques for optimising custom font performance, and how to use modern CSS for fluid type that scales seamlessly across devices.

As we now seem to do everything via Zoom (or similar tools), the talk was recorded and you can watch it on the FEDSA YouTube Channel.

One thing that came up in the discussion was around a list of resources on web type. I am currently putting that together in a GitHub repo and will post the link when it’s ready.

In 2012 I gave my first talk on typography on the web. Titled Web Typography Now it documented the evolution of type on the web and was timely…

Dynamic & Performant Web Typography

Layout on the web has always been very difficult because of a lack of real tools to accomplish this task. All manner of techniques from tables to floats, positioning, and display properties have been used in an attempt to emulate designs and create usable interfaces for the browser. While disparate all these techniques have one thing in common: they are by and large hacks.

![Modern Layout On The Web.png](/uploads/Modern_Layout_On_The_Web_e71d2055e8.png)

With the advent of Flexbox and latterly CSS Grid, as well as a whole host of other layout properties such as object-fit, writing modes, shapes and box alignment (to mention just a few) we are finally getting the tools we need to do layout on the web.

Recently, I gave a talk at a FEDSA meetup tracing the history of web layouts and demonstrated some of the new techniques at our disposal to create modern, designed interfaces with our new layout tools.

The talk was also recorded and you can watch it on the FEDSA YouTube Channel.

With the advent of Flexbox and latterly CSS Grid, as well as a whole host of other layout properties such as object-fit, writing modes, shapes and box alignment (to mention just a few) we are finally getting the tools we need to do layout on the web.