These are live blog notes from the ATypI 2013 conference in Amsterdam Day 1
Usual disclaimer for live blogging: These are informal notes taken by me, Dave Crossland, at the event, and may or may not be similar to what was said by the people who spoke on these topics. Probably if something here is incorrect it is because I mistyped it or misunderstood, and if anyone wants corrections, they should email me (firstname.lastname@example.org) – or post a comment. Thanks!
In fact I didn’t even read this document once before posting it, so its probably FULL of errors. What do you want for free? ho ho ho
[late by 10 mins]
David Kuettel from Google:
Analyse alexa top 1M sites and beyond, using ‘big query’
Thisis the top 1M, 35% web font usage, but top 100 have 62%. This is a great signal of whats to come!
In analysing the entire web, we found 1 Bn pages using web fonts. this has been in the works for 20 years and its a huge milestone for the whole industry
There are 35 million domains using web fonts on 1+ pages
John G from Monotype
Tom Phinney has done research, and enterprise usage of web fonts has SPIKED in the last year. pan european support has gone up 5x in the last year. the demand for responsive demand is driving the adoption of web fonts. there isn’t a better way to do typography on the web.
fonts.com has seen font requests increase by 20% in the last 6 months, you can see this on this unmarked graphed, the curve rising. This is billions of requests per day, its very exciting.
Whats really fun is that as adoption has taken off, its hard to relate to these numbers. this is the most viewed video on youtube, gingham style, and its 1.7Bn total views. but open sans has 139.5Bn, its 15Bn per month now. Sorry Psy! 😉
We’d like to spend more time analysing this, its font views around the world by country; north and south america, western europe and russian and india are the early adopters, and there’s a big opportunity for the rest of the world.
Lets look at Flash. this is the web archive graph of top 200k sites using flash, you can see this is 2 lines, and there’s an extrapolation of the 2 trends, and i see them crossing over around may 2014.
There is a spike in june-july this year, we’re not sure what that was but we saw a spike in web fonts use.
Q: Was it Google IO?
JG: not sure about that, it was earlier in the year…
So, extensis said there is an explosion in pan european.
fonts.com says graphics are converting to images to web fonts, and WOFF2 will streamline interations with better copmression/lower latency.
Googel fonts see over 10B web pages using web fonts within 2 years.
And now the best part!
We are making the database available. we went through privacy review with a senior VP, and its a database you can use in many ways.
Here’s a query to see how Source Sans Pro is being used across the web for more than 50% of the text on the page.
here’s the schema for the database.
Here’s a short link to how to access it:
JG: So the rate of adoption in the last 3 years is amazing, and its very exciting
DK: 1B pages is a big milestone for the industry
JG: The majority of top sites are experimenting with web fonts, and so the future is really bright, but we’re not done
DK: so we call for initiatives to make the web better! Thanks everyone. Questions?
Patrick from Canada Type Q: How to the page requests count?
DK: WIth the large analysis, we loaded 10Bn web pages through Chrome, and we looked at REFERENCE resources – did the browser pull a font over the web?
Patrick from Canada Type Q: Right, but what if verdana is being used as a web font?
DK: so we are defining web fonts for this purpose as fonts that are loaded by @font-face.
JG: Do you think this is a big factor?
Patrick from Canada Type Q: Say Helvetica, it ships on Mac but not Windows, so people do use that as a web font but its not for a lot of mac users.
Raph Levien Q: Blogs were the early adopters of web fonts. What is category #2 and what is lagging the most?
DK: Good question. I haven’t broken the data down that way. Large scale integrations are sites like GOogle Maps, Google Play, and for Google there are Ads integrations coming up that have billions and billions of views.
* * *
Mixing hebrew and latin raises some issues, contrast and stem direction, solved by changing the angle of the broad nib pen.
How should hebrew look in latin italic? ashkenazi cursive is a 15thC european style of hebrew, and is used as a cursive style of handwriting in isreali schools today. i collected samples of it to use as a base for hebrew italic.
We can find greek venetian style in Griffo’s types for Aldus. I got 3rd prize in Granshan for my text greek based on this. This is released by Paratype.
Granshan inspired me to work on Armenian script, using Lagoda’s braodnib style.
Modern Georgian script doesn’t mix well by default with latin. it is causeless and has different x height and asc/desc proportions. I consulted with a Georgian palaeographer who is really a cocreator.
* * *
Can we choose fonts objectively?
Type cooker, a parameter is a thing you can measure. If there is a feature that can be measured, its a parameter. These are useful for type design – e.g. type cooker.
And then there’s Computer Modern, a big family of type designed by Donald Knuth, and its important because each letterform is defined by 60 parameters. That gives you power of varying shapes. It doesn’t matter what the final form is, its in the math. the shapes are refined with these 60 parameters.
Type deign is pure mathematics, Its numbers, coordinates. There is lots to measure. So answer the question, can we make fonts with receipes of algorithsm?
This is a close up for a graphic made by a designer, Alan Burmahuse (?) on the web. Its explaining the PANOSE system. I think its intesting to reduce to numbers, a small bunch, the possible shapes in a typeface. SO you can have a code and each typeface has a code, and you can use that to substitute fonts when you are missing the font.
So its another set of parameters, not for type design but for use of type.
Oscar in Colombia designed a game, i’d like to show you, its a card game to teach students what a high contrast type is, what one has the highest x height. its a fun way to introduce the topic of font selection. even though its learning.
These are more pictures of the game. The players compete for the highest or lowest values of certain parameters.
So, lets go to the topic of font selection. On the myfonts.com website, you have the Tags to select type. its become more widespread. this semantic approach doesn’t use parameters, its just qualifying these shapes. you put a tag on a font, an equivalence in a language, so the user can easily choose fonts.
but this approach has its problems. if i click ‘friendly’ then it means different things for different people
I am a teacher, so this isn’t a commercial thing really… i made th experiment of selecting a font for footnotes in a book. lets see how it works!
I took my font library, these are font in my library in OS X Finder, and I made a biased decision, lets use what I call ‘text’ typefaces – no single style fonts, nothing i think is hard to read. text fonts i made, system fonts, fonts from friends.
then i made this spreadsheet, measured the values – first, UPM, so i could normalise things to compare. then i calculated the upperase, relative uppercase to lowercase ratio %age, uppercase stem width, etc etc.
So i think type design is about comparing requirements with specifications. its like 3 overlapping requirements, in a venn diagram: stroke width, contrast amount, copy fit index. this reduces your options a lot.
This is the process:
1. define what you need a typeface for
2. see what options are available, how they look like
3. compare attributes in (2) with requirements of (1)
4. repeat until you find a sufficient match
When you compare parameters you can find things you didn’t expect. This is the x height versus stroke width graph, sort of typographic colour versus size. this was inspired by an astronomy graph that shows stars across their attributes like this.
so you can see relative x height versus contrast amount, and again you see a relationship between the contrast amount and the x height.
These 2 attributes have areas i think are best for e.g. caption use. and looking at what fonts are in the graph in that area, some fonts came out for caption use, that i didn’t expect.
1. define the parameters subject to evaluation
2. quantify the values – imagine what they could be good for (graphs help!)
3. match specifications when requirements, what you have with what you want to do
So this graph, relative x height against contrast amount, for caption text, running text or display?
I realised that picking fonts is matching speficiations versus requirements. What you drew versus what you wanted to draw.
So i made another spreadsheet showing what you can do.
Somethings can be measured, some things not. its fun to try! and fun to not conform with what you know. perhaps there are more complicated ways, interesting ways, to select and evaluate type.
Scarcity of data was a challenge for me. If i didn’t use PANOSE numbers, I had to make my own. they are limited. they don’t have the richness a measurement can.
I’d like to study the PANOSE system more, and if all the designers would study it more, perhaps the measurements wouldn’t be needed and it could be more refined and useful not for substituting fonts but selecting them too.
This could be used to TEST classification systems.
If we can do this, the implications could be huge. if there is a way, if we can design an application that compares typefaces like this and helps to deal with big amounts of information using parameters, the implications are huge – so many things we can do automatically.
* * *
On Digitization, by Erik van Blokland
This is small, fun science.
Capture a shape in a series of points, line and curves. Its numbers, it has to be exact. We all do this, most of the room draw beliers, a few quadratics.
Drawing these curves is mathamerica, it has to be eact?
Its not really so exact though. so i devised an experiment. i wanted to find out how to do an expeiemtn with the scientific method. this is a ‘n’ from an ecnschede specimen, its some point size, i forgot, its an n and its a bit fought, you can see the paper texture… Some caslon, i could pick nothing.
i sent it to all my students and friends, i got 90 differetndrawings so far. i said digitise it like any other letter as good as you can. theres no context, nothing else, its limited, but it means ai can focus on the numbers that came in.
this is not a map of stars, its a map of on curve (red) and off curve (orange) and start point (blue). These are the outlines.
RoboFont defaults to an x-height of 500 units. you can see this by overlaying. Many people didn’t set any metrics, so the coordinates don’t mean much horizontally. the baseline is safe, btut the other heights are nebulus.
to show, i used python and robofont to visualise this. i drop any UFO in and it makes these graphics. these drawings are all unique, like fingerprints. with 90 results, not a single matching point strucure.
the data so far, people didn’t know what i was doing. if i find a duplicate, i’ll ask about it.
there are skinnier ones, rounded joins, sharp joins, so much difference, amazing.
how to compare these?
no human interpretion? not depending on landmarks? what to process, bitmaps or outlines?
so i found Procrustes Analyses, a method named on a greek bandit who kidnapped people and ‘adjusted’ them to fit his bed. this takes the scale out, so they have the same scale/rotation/offset. by scaling them to the same surface area.
so the video shows the before and after of that transformation; after this, you can see the origins are scattered, the baseline is fuzzy too, but the top right is now much more together.
The connection between the stem and curve varies a lot.
(no remove overlap?)
If we do bitmap comparison, we can see the points overlaid on a bitmap grid, and we see the clumps of red points that are on curve, an the clumps of orange off curve points. but even after Procrustes Analyses, not a single point is copositioned.
If you take the groups, their extremes, and place a point in the mean, you get an outline that closely matches the original bitmap shape.
Procrustes can be useful for omparing glyph data.
Path contrusttuion records a unique a HUMAN interpretation of the shape (DC: Thus copyright in outlines)
Closeness is not spread evenly.
So, if you have stats experience, I have questions for you.
If you have outline drawing experience, go to leterror.com/digitization-experiement/ and get the image and send me a UFO.
Toshi: Need to use Robofont?
Erik: You can use anything, send me an OTF is fine.
* * *
Roboto: Faster than a Speeding Bullet
We typically get 4 styles in font families, we ‘d like to have a full range of (18) styles
You can see Arial used in Google+ and it feels really heavy when used at large point sizes. We use the ‘light’ weight of Roboto now, it looks better, a poor mans optical scaling.
We want fast web fonts. G+ switched to using Roboto light on May 15th, and other Google sites have been followingslowly.
under good conditions, unbar area with broadband, you have 1-10ms per kilobyte for downloads, so you get a 200kb font load, 0.2 to 2 seconds. this is not a ‘show stopper’
But a 30Mb CJK font could be a 3-60 second delay, where no text is displayed, or where you see the page for 30 seconds in one font then it flashes to another
The BBC feels that passim is so much better for Arabic, that a 100-1000ms load time is ok
But many people refuse to use web fonts because of the download delay. maps and g+ are now ‘slow’ sites.
I use google search as a spell chcker, its so fast. if it took 3s i wouldn’t use it like that.
And we don’t want just 1 font, we want to up 18 fonts per family, a couple of families, it really adds up.
What is being done today?
AppCache is one option. load once, its cached after that. See the blog post ‘AppCache is a Douchbag’ for details about why this doesn’t work well.
LocalStorage is a similar thing, it looks great for latin fonts, but in production, a few % of users, see very long delays. So its not something for production. And its too slow for CJK fonts. I tried a 20Mb CJK font and browsers could hang for 90 seconds.
Subsetting. This is common. I initiated the sfntly library, I got Stuart who became my boss to take on most of the coding for that. If you look at the core of Google Web Fonts, its the library we built. The subsetter has problems. Many Latin fonts heve Cyrillic and Greek, you can reduce a font to Western Latin to go from 200k to 80k. But this can be problematic for e.g. place or people names that are outside the western latin char set, giving a ‘ransom note’ appearance due to fallback.
You can subset to a single page. The is the best reduction for Latin fonts, things like blog titles, you can often reduce a CJK font by 90% for a single page. This is best for the ‘Drive By Web’, who has heard of this? no one. okay, this is a term for visiting a website once and never return. This is great for that kind of usage. Its a lot of work on the server side. I think Monotype has done something in this realm. Its not trivial.
Then there’s the HTML5 FileSystem. This maps special URLs to a local ‘sandbox’ filesytsem. Its similar to AppCache, its fast, but it requires a lot of JS code. It only works in Chrome today.
However, since a lot of G+ users use Chome, being Chrome only could be okay. We still server Arial to MSIE 8. We saw great performance results during development. But in production we saw very long delays. We couldn’t reproduce them in development. I proposed this paper not knowing if I would resolve this or not, and to date I have not.
Is there a future?
Work is on going to replace AppCache. There is NavigationController, like ServiceWorker or EventWroker, that prognoses to have the performance of AppCache but more reliable.
Q: What is causing the delay in AppCache? Will we repeat the same mistake with NavControl?
* * *
Our technology makes compound glyphs, its not character based.
Its archigrapheme based, separate dots and vowels
Its procedural, not static typography.
we produce templates for type designers with automatic reuse of layout information, with Karsten Lucke.
Tasmeem for Adobe InDesign, and lately, SVG web technology. So there is no typeface at the end, the type is on a server
Tom: www.decotype.com/ATypI is online for the duration of the conference, you can play with what we’ve made
This is me working in my office. I do this work with my brother Peter, an aircraft engineer who did all the programming, and Tom Milo, my husband who interrupted me already 😉
This work started in 1985.
The first point, we are glyph based not character based. We are content based though, the content is searchable unicode, its not a 1:1 glyph:character model as OpenType is. We have glyphs that are pen strokes. This is DecoType Naskh. These characters are already compositions. This is the DT nastaliq. This started in 1992. This is finalised in 2004. The Ruq’ah was first designed in 1985 and we remade it in 2011, with full unicode coverage for arabic script.
Here is the same word in the 1985 and the 2011 versions. The end user software at the moment is Tasmeem.
Here you can see the 4 ways of writing this specific word, 3 ways of shaping the final part. Again you can compare the old and the new versions of the same choice of ways.
This is the nastaliq. This is a context sensitive analysis, based on script grammar. Typeface dependent settings mean user configurable features are possible. To show what it means to be archigraphemic, you can see the same word changing in shaping and vowel positioning. You have kerning for both horizontal and vertical positioning. The end user can adjust these too.
This is fast and effective, you can handle huge amounts of text without crashing or slowing down.
Here is some Urdu text, the spacing is wide, so we change the internal horizontal spacing, and do this with the word space too. it gets tighter and tighter but will never collide. The shapes know how big they are. We can decrease spacing more,a nd the line width is now like a headline for a newspaper.
Here is a real Urdu newspaper. You can save all these setting as style sheets.
Here is a page or Urdu text. With different settings, the page looks totally different. This allows the user to control their typography. This is the Urdu count, you see with the 2 dimensional way to shape the letter, the medial letter maintains its form.
This is a nastaliq for the persian market, and then another for the pakistan market. Persia initiated the style of script, and Pakistan extended the grammar. The persians prefer the kaff connected at the top, the pakistanis prefer it connected from the bottom. With our technology you can easily choose.
Here are two ecotype naskh typeface compared: The handwriting nasty and a cold metal type naskh. You can superimpose our Naskh and Emiri. You can see the problem a metal type has, and handwriting positions the dot correctly, and digital type should be able to do so too.
A couple more comparisons. We can see smiilariaries, but the Emiri has a different line width which effects the shape. The DT Emiri can add elongations easily to compensate.
Bringhurst said, ‘Tasmeem is a wonderful tool, its based on a very close and careful stuy of a classical script. Its a modern tool, a very sophisticated tool …..’ – Thanks Robert! 🙂
This was at IS Type 2013 in Istanbul this summer. He made 2 samples, he showed the default naskh …
RBringhurst, ‘Its not made for dummies … for people who like to think while they work, its very pleasant to use’
Some famous typographers (list) have used DT to do their typography. Archteyp in Cambridge, Brill in Leiden and Boston, Mage Publishers in Washington …
This is the book by Robert Bringhurst that was sold at ATypI in Dublin.
Then Titus Nemeth produced some scholarly work for Brill, and I took this picture from Titus’ website.
This is an autobiography by a 90 year old Persian diplomat. You can imagine his life in 90 years of that work; its all set with Decotype technology by Titus.
We produced a few years ago, a Royal Book for …
The first one was not produced with Tasmeem and InDesign; the latest editions use all the features of Tasmemm.
Lara Capton, she produced our nice T shirts for ATypI Iceland. This is the map of Iceland made with Arabic type, and this is a image of the northern lights made in the same way.
Here is some typography by Thomas Milo
Here is a new poster by Lara
So making the tech is fun, but making real things with nice people is the best part of my work. “Karel always said, I have Gerrit, Alexander and Chris Brandt in my mind, they are my best friends and the best typographers in the netherlands.” I like this idea.
So now you can see the Decotype on the web with SVG, you can see how our shapes are box elements completely PostScript compatible outlines, positioned with coordinates on a baseline.
Q: How did you get started?
A: I like to do work that is so involved you become friends. you get people who admire the work, you can not choose any more than following the line that has been set up. the first line was looking for any proper arabic typography available, and int he 1970s there was none. there was metal typeset books that were nice, only them. I had studied in art school, and i had made a wooden sculpture, you could take apart the character to reveal its pen strokes. Thomas saw that this could work for Arabic. It was a huge challenge at the start. We took the arabic ‘H’, a rich letter, and it has a lot of varied shapes, and gradually it became a lifetime’s work.
Thomas: open the SVG website, we call it kerning, but kerning is normally a fixed table. this is a dynamic spacing system. www,decotype.com/atypi
* * *
1150 Reinventing digital type design | Yuri Yarmola, Adam Twardoch
We’re FontLab, we made the 3rd and 4th most popular font editors on the market today. we’ll see 😉
We didn’t reinvent everything yet. But we are in the process. We now want your feedback. In the next few days, talk to us. We started a forums section, this is the beginning of what we are doing.
Many people asking me for new font lab, or adding features to old font lab and fontgrapher.
we are not adding new features to either for a few years now.
many type designers draw on paper, they take it to the computer. we want that workflow to be great. we want to reinvent paper sketching.
we want to make the path from this to a font as simple as possible.
adam: we’ll show you the application, the codename for the project is Victoria, the application isn’t likely to be the final product. we’re in the middle of heavy development.
uri: you see a piece of paper, a white thing you can zoom in and out. its a huge paper with no limits. This is the main UI for vicotira. its like paper. You can paint area, you can draw line. this is from fontographer.
you can bring in any assets you have like a photo, you can change the blur or contrast of the image.
you can auto trace the image. the quality of the outline is quite ok.
the paper is flexible, you can zoom in and out a lot. scroll to a new area and draw something new.
Then you can put it on the font. how you do it?
lets open some font.
here is a zip archive with some fonts.
adam: we are shipping in the next few days, transtype 4, which is the first finished product from the victoria project. we finished the production side.
So we see the fonts side panel listing the fonts in that zip. you can drag them into the paper area and you have a table view, you can align these frames easily. we have a hand icon, we can click it to activate the glyph, then cut and pate the hand into the glyph like an accent.
you can not just copy the hand drawing. you can clone it. If I paste that into the glyph, you can see it is there by typing multiple isntanes of that character.
we have a typical font view table, you can see the codepage. you can search. we have a history panel that records all the searches you do. you can bookmark these searches. so instead of codepages or filters or such, its all just searches that are saved.
you can copy paste, all the normal things.
adam: what about outline editing?
yuri: what we like is that idea of zoomable UI. you zoom out, its like seeing the text in a book or publication. zoom in you see more controls. you don’t see controls when object isn’t selected.
we can split the window.
adam: you can have multiple views on the area
yuri: so we have 3 levels of zoom. the preview of a font. the 2nd is medics .you see the H and V metrics, and you DONT see the nodes. then you zoom more and you see the nodes. you smoothly move from one to another by zooming.
As you can see, we have interpolation of points, by default. you can see we have smart guidelines. if i move a lot there is no snap, but if i pause, there is a snap. so we use smart guides in space and moving in time.
You can select points in multiple glyphs and edit them together.
You are not limited to rectangular marquee selection, you can lasso too.
We have a new tool, a screw.
ADam: Tim Ahrens told me, the best node removal algorithm is in Fontographer, Tim said, its so that I can not improve the result manually. I remove the node and the shape is the best I have.
Yuri: I wanted to improve my algorithm to be better, but I gave up and I used it.
ADam: So we rewrote a lot of new stuff, we use fractional co ordinates like fontographer for good transforms and boolean operations.
Yuri: Speaking of boolean operations, you can see we do Remove Overlap a lot. We decided its not needed to do in a fixed way. we have dynamic boolean operations now. this is the shape built with 2 shapes that are still accessible and editable. its not just a fill of the outline. if i DECOMPOSE the shape then its a classic single outline.
Adam: what about working with frames? Miram was working with shape based design for arabic. we have been thinking along the same lines. designers use the same shapes throughout their design.
Yuri: This paper has 3 frames, a few little decorative graphics for fun. If you look at the font, some elements look similar. I select a glyph, select some points in the descender of the ‘p’ and its like a shape, a ‘subroutine’ for some people. So I copy this, and connect it to another glyph, the q, and flip it – you can see they are still connected. We have a View, Show, Shape Relations, that shows their relation like a global air routes map.
You can join the shapes and it keeps the connections, no problem. You can sset the 2 end points used to connect the shape to another shape, and these can be smooth curves or corner points that don’t change the shape.
You can see a structure pane, with the data strucures under this.
ADam: now i want to see numbers. masure the stems.
Yuri: We have a ‘beam’ that show shows measurements. as you zoom in, it will show you the full float, zoom out and it shows you the int value. a zoomable UI shows you only what you want to see at that level of details. here is another measuring line that is at an angle.
Adam: These are not complete features, these are parts that we will put into some tools you ail see soon, and others you will see later. talk to us, we started blog.fontlab.com and you can see more information there. thanks a lot!
* * *
1215 Speed Punk | Yanone
This is a quick overview of this UI I made. I’ll go into the theory.
This is a straight line. no curvature. this is a perfect cirlce. its curvature is the same all arund. i didn’t invent this tool. if you draw a circle in a font editor and turn on my illustration, you will see another large circle.
a circle quarter with 2 lines would have a similar halo.
these 3 circles, the small one has the most dense curves, the halo is larger, the cirlces get bigger so the curves are less dense so the halo is the same size.
bezier curves were made for CAD of cars for citroen. citron decided to keep the development a secret, but thats why we know it under the name bezier because renault didn’t keep it secret. we use it for designing many things, airplane wings, and type.
we have a zero level of curves. e.g., 2 curves that don’t connect.
g0 continuity means 2 curves and they do connect like a corner points
g1 means the curves connect with a common tangent but no curve continuity – a corner point
g2, what you aim for with type design, the curve halos meet!
g3, acceleration continuity, the 1st or 2nd derivative of the common cubic bezier, is also continuous. this is not always what you want in type, its a design decision. by using this tool I’m’ not enforcing how to design type. its on you. but this tool helps you understand what you are drawing.
why is this important? if you ride a roller coaster, and you drive form a flat to a 1/4 circle, it would hurt you entering the curve and exiting it. we need it for designing roads, you need to smoothly turn into the bend in the road.
we want something more like this, the curvature starts at zero, increases to a maximum and goes back down to zero slowly.
If you draw a curve on paper it is continuous, beliers are made of these sections, and if you place them on extremes…. tarts arguable if its needed or not. take this braodnib ‘o’ and here are some extremes that are not HVCurve style extremes but are LOGICAL extremes.
This is an old RoboFont. in the drawing tool, you go to the anarchist A button,a nd say if you want the illustrations inside or outside the glyph. you can them adjust the beziers to join up. the colour varies to show the lowest or biggest amount of curvature in the glyph to help you make similar curves.
We have a histogram so you can fade out the effect of very small curves that have a very dense curvature but are not very important in the overall design.
The tool appears to have no bugs, so I don’t think there will be any new versions.
This is now in glyphs. Its the same tool in both. This is visual proof of the fact you can not draw perfect cirlces with bezier outlines, you see the curvature is a little off, but then with ‘snap to grid’ it distorts the circle.
This is an inflection: a ‘s’ bend, the curvature crosses from one side to another of the curve.
Q: You had the idea of harmonising things the way you’d like automatically?
A: There is the Tim Ahrens Harmonizer that does exactly that. This tool and my previous tool Autopsy just illustrates, so you can understand better what you see and make informed decisions. Ify ou use a tool like harmoniser it does exactly that. you have to believe that tool does its job, and it does it well – with this you can see it doing the job.
* * *
Free Fonts: Threat or Menace
* * *
So we have automatic accents, you don’t need to do the mark to mark positioning.
and we have auto binary generation so you can run InDesign and have it reload the font as you make changes in the editor.
We have expand stroke, so you can make a mono line script typeface, she turned it into 4 masters, then you go to Font Info, Instances, and you can apply filter to each instance, so Martina Fior (?) made this single master into like 50 styles.
[Someone] recently released Starburst. it has a think stroke that is 0.3 points wide. OpenType can have non integer points. If you set Grid Spacing to 0, then Glyphs will use the floating units when it generates.
* * *
What is OpenType? Its like a swiss army knife for fonts, you can do small caps, ligatures, you have cross platform stuff, its a great situation compared to 15 years ago. OpenType was introduced 10 years ago. All the problems with PS fonts are gone, we have everything in one format. Is it true?
As type designers know, you care about ligatures, programming opentype features, testing they all work, and you hope your customers and friends can easily play with your font software and hopefully find the opentype features.
We think its normal to use OpenType features, but its often hidden. Here is the way to access the features in InDesign today. I’d like to hint to our friends in Adobe, we could improve the UI for accessing this.
What about the use of OpenType features in Microsoft Word?
Who knows about this. [like 3 people raise their hands in a room of 100] Simon Daneils from Microsoft doesn’t count! [lol]
Now in Office 2011 it possible to use OpenType features. Like InDesign, its hidden. So I’d like to hint that it would be wonderful for application developers to make it easier to access OpenType features in fonts.
caniuse.com has a great table that shows you browsers support,and you can see OpenType feature support in browsers now looks promising!
What about standardisation? In CSS level 3, recently, just october 3rd last week, the CSS v3 Fonts module got the status ‘candidate recommendation’ which is the 2nd stage after ‘working draft’ status. next is ‘proposed recommendation’ and then the full bore ‘recommendation’ 🙂 So its still a few steps away but its coming along. personally i think this is a milestone and the syntax for opentype feature use on the web is now quite solid.
So here is a test document that shows if things are working. I recommend doing intense testing of your OT features for the web.
I asked a monotype web developer for tips, and he said define classes for the small caps, then just use that class, so you don’t deal with the complexity.
The main problem:
You aren’t preparing your website for the newest browsers. you must expect people to use older versions of MSIE 8 or 9, or perhaps Firefox.
Web fonts are all about latency. Smaller files can be made by subletting and REMOVING opentype features.
As OTL support in browsers increases, how can we manage this? the balance between latency and OpenType rich fonts?
With increasing performance of the net, I expect this period will pass in a few years.
Browser differences continue to be annoying but that will also pass as the CCSv3 Fonts module beomes a Recommendation.
Or we could do the old PostSCript approach, remapping the features to standard unicode positions. this is not that helpful for web developers, if you want to play around with features its pushing the complexity to managing the CSS.
So Monotype made a JS solution. we analyse the GSUB and GPOS tables of the font and generate new GSUB table based on rules with new remappnig, and a small JS file, which comes with the web font to the browser. So from the end user perspective, you set up a sample, and then the software knows which features are supported by the font file, and turn on the features you wish, and copy and paste the css code to use those features that is made for you.
What about OTL ‘kern’ feature support? Its not robustly implemented yet. Custmers expect text to render the same in all browsers.
So this JS positions
Sampo is the engineer behind this technology, and I asked him if this would be worthwhile in 2 or 5 years?
He said, we still face many web rendering engines. Google just started with Blink forking from WebKit. So we see this as a rock solid fall back solution. Supports most GSUB features, kern goos.
Cons, the load times of the asset could be higher, and it uses Private Use Area unicodes.
Challenges for the type industry?
We and all foundries should care about OT features, be aware of them and access and use them. Something for all of us.
How can we help users EASILY use these features on their websites.
The potential of fine typography on the web with OTL is promising. The CSS3 syntax is coming along nicely, and good work arounds exist today from Monotype. Thanks!
Raph Q: On Android the Chrome browser does support this, so mobile is looking good. As we test on browsers, Blink is open source, if you test and find a bug, if its not rendering a font right, we can get that fixed.
Erik van Blokland; You said text to speech is broken thanks to PUA glyphs. Does that mean Copy and Paste is broken, and does is break search?
Joerg A: I think its okay but lets ask the engineer, Sampo
Sampo: The JS jumps in before the text is displayed on the screen. A search engine doesn’t execute the JS, just reads the HTML, so it should be okay.
Patrick CAnada Type: THis isn’t available for self hosting.
Joerg: Right, you need the server.
Sampo: We have a compiler, that reads the OTL in the font and spits out JS that does the layout, and it puts the glyphs needed in the Private User Area. The substation features don’t have unicodes.
Patrick: These glyphs are in the PUA?
Sampo: Not usually. We have to assign PUAs when the Unicode value is -1.
Joerg: When we produce OT fonts, we use PUA unicodes, its an old technique.
Q: On you’re kerning slide, you emtnioned inconsistent results. Is there a max for kern pairs?
Joerg: The natural speaking high level approach for CSS files
* * *
There wet primitive fons on early computers, but DTP started with PostSCript printers. People called the fonts for PS, Type 1, ‘post script fonts’ and the next gen version of the format is OpenType CFF. Thats where the action is today.
the other main format is TrueType. The 2 differences is the math they use for curves. This has little impact on a type designer, you convert PS to TT curves.
The other differences hinting. This is information added to help rendering of fonts. PS hints are simple, pointing out glyph features for the rendered to deal with. TrueType hints are actually programs that can control rasterising, that nwas needed for black and white rendering. being programs they can be a security risk, leading to e.g. iPhone jail breaking.
TureType puts smarts in the font file. PS puts the smarts in the rasterisiers. This means pasteurisers are different, and a PS rasterisier is hard to do well. Both have evolved over time and become more similar.
Mobile devices used hand edited B&W bitmaps fonts. TrueType was good for that environment, so it was a logical choice as mobile got better. And now most mobile devices use TTF fonts. Most mobile platforms don’t have good CFF rasterisation.
Why should I care about mobile readers? Most readers are on the desktop?
But mobile users are the future of type. Content creation will happen on mobile, and the desktop will be a niche.
There are benefits that would come with CFF on mobile devices. Selection: there is always a desire for more styles and faces. The biggest selection of fonts are in CFF and many fonts don’t become TTF as the designer won’t do TT hinting. PS htinign is easy to learn and leverage. For mobile, font size matters. Large numbers of fonts or fonts with large numbers of glyphs are problematic.
But no one was doing much to make CFF in mobile happen. So I did.
Adobe’s working on its pasteurisers for 30 years, and we think ours are the best our there. PFR is the mobile font rendered we hate today. We recognise there are times when its better to give something away than make it proprietary. We contributed code based on ATM to Microsoft for Windows 2000 in 1998.
So to make CFF for mobile, I had to convince adobe management to make their most valuable technology open source. googol was enthusiastic to add our code to free type, and we signed contracts with GOogle and Freetype.
First, I want to emphasise that the work with Google and Aodbe was a joy. 18 months ago I was asked if I shall do this, if I would accept adobe CFF code into free type. I was happy to do it because freeytpe was not able to do it in a good way. To show the difference, this is the old code of freeypte and this is the new one. Look at this glyph. you can see the horizontal stokes are not even in the old one. This is critical for reading CJK. Here you see this stroke is too low and with adobe’s code its positioned very good.
the integration took 2 months. i was contracted by google and got financial support from google and adobe. then the project was dormant. lawyers had to do something. then we continued.
here is the code from dave arnold, who fit the CFF engine into FreeType, so it was an add on but not a serparete module. You see the CTS engine that contains the PRF engine. So my job was to do this: it looks trivial but it took a long time to rename variables and reformat and finally bring the code into shape. This is my usual approach for coding.
During the process I removed dead code specific to Adobe’s engine, and tried to reuse more of fretype’s existing features, for memory and math handling. essentially after doing all these changes, the adobe stuff compiled into 60kb of code. this is small. if you look at modern applications, they are megabytes. its nothing.
If David Lemon talks about a rasteriser, but for me, I am talking about the last end. There is a parser, a hinting engine that transforms the font space into a device space to rasterise properly, and finally there is the conversion of the hinted outline to the screen. Adobe delivered the hinting engine. The other parts free type already had.
AFter much discussion and delays caused by various reasons, I got the cod win January, and it took me 2 months. Dave Arold gave me a private git repo, and in April I published it in the main free type git repo. At the end of April, we released a beta version, so Googel and Adobe could announce the CFF engine to the public. IN May I released v2.4.12 with the new engine turned off and a few weeks later in June, 2.5.0 was released with the new CFF rendered enabled by default.
We found a small bug, but besides that it works very fine.
Now we have good CFF in free type, we an see good CFF on all computers. Thats normal on the desktop, its getting there on the web, and soon the mobile world will be there too.
We’ll be around, email@example.com and firstname.lastname@example.org
Dave Crossland Q: Would making the FDK libre software help spread the adoption of CFF?
David: I question the premise that there is problem with CFF adoption. We hope to have a libre version later this year.
Q: Will … ever improve?
David: There is a way to get around that. We released CID fonts that we use for East Asian CJK fonts. THey can have several hint zones for different glyphs. Sadly, there are too many applications that make incorrect assumptions about CID fonts. It was not working reliably enough for non asian fonts. I’d like to see that happen very much.
Q: Looking at past releases of free type, how long will it take to arrive in consumer devices?
David: I don’t see anyone raising their hand. Its not mine to speak to.
Raph Levien A: I am tech lead on text and font rendering on Android. I can’t say anything about future releases on Android, but I believe in this technology, its fabulous. Interpret from that what you will.
Simon Daneils Q: With TrueType very popular and big res screens and WOFF 2.0 compression here, is this too little to late?
David Lemon A: With the higher resolution screen, the less important that hints are. We think APple displays would look better by using hints again. I think its still worthwhile, yeah.