[Music]
Hello. Uh, welcome back to session two
of the morning. I hope you're all
enjoying yourselves. Um, and if you're
not,
I don't know, keep it to yourself or
something.
Um,
I'm going to just hand over directly to
Zayn who's going to talk to us about
found font family.
Hello everyone. Um, this is a bit of a
talk that I threw together because I
ended up working with fonts a lot. I was
a front end engineer. I am still a front
end engineer, which turns out that fonts
matter aggressively, more so than any
other software engineering profession.
Um, and I never really understood them.
Uh, so I put together a little talk
explaining it. And after a couple of
cycles of revision, I've arrived at what
is effectively a 20-minute rant and a
little bit of a fever dream. and I'd
like you to come on this journey with
me. Let's start with the problem. Have
you ever used this little VS Code pets
extension? It's adorable. Would
recommend. And it means that you can
have a little cat or a dog or a pet. Uh
and it just dances around in the bottom
left of your screen while you code.
Gives you the moral support to get
through those long long days. Um and
it's it's very adorable and I want it in
my terminal desperately. I need it. Uh
however, there is a little problem I ran
into.
terminals don't like print images. I I
really you can find like GPU accelerator
ones that do it, but for the most part I
couldn't get a terminal to just output
an image which is weird to me because I
feel like a browser if there's one thing
a browser does is it shows you pictures
of cats maybe too much frankly. Uh and
there was no way there was no good way
to do it in the terminal. So I kind of
began my journey here. If I wanted a
cute temag style cat in my terminal, how
am I going to make that happen?
So first of all, I tried to look at
different ways that you could render
images to the terminal. There are some
programs that do it. They do a lot of
this. They do a lot of ASKI art. They
try and approximate every pixel to an
ASKI character or like a text character
and print it out. And the reason for
this is sort of this fundamental um uh
limitation of of terminals is that they
really only work with text. If you want
to be clever and have any sort of
graphics, everything on screen has to be
a character, a printable character that
your font renderer uh or your text
renderer better said uh can handle. So
that means that we're kind of limited
here on what we can do. However, this
led me down a little journey. What even
is text? What even is something that
like a text renderer can render? Cuz you
know, I've seen Python code and in
Python code you can use little accents
above the E. There's a pi symbol. That's
not a cast like a classical character,
but it renders fine. It works. You can
print that out to most terminals.
They'll handle it. So, you know, where
can we go with this? We begin with a
little bit of a of a fundamental
understanding. Computers don't know
anything basically at all. Uh, but they
do know numbers. Also, sometimes not
numbers. Don't talk about floating
points. Um, and you can assign every
glyph. I'm going to use the word glyph.
Uh, effectively I mean like a text
character, but we'll talk a little bit
later about why I have broadened it to
the term glyph. Uh, and it assigns it to
a number. the character A is 65. There's
a long history here about why it's 65,
but we're just going to trust that it's
65. Um, and all the font renderer does
or text renderer is it renders that
character to screen. Now, there are
other things that you can put into code
and put into any area that accepts text.
Basically, anything that renders
uni-ode, uh, such as an emoji and if you
print the value of it in the same way
that a is 65, this little oniri, which
is not a donut, uh, is 127833.
So all it is really is a mapping of
number to glyph. And the glyph is
because it can be a character, it can be
an emoji, it can be a little pi symbol,
it can be really basically anything. But
no, it can't be anything. It has to be
something that it can support. But this
led me to this wonderful realization. We
have we have images. You can print
emojis to the terminal. Who has used any
CLI application created in the last 5
years?
They're chocked full of it. Every time
npm like installs something, it'll give
you a little emoji. It'll give you like
a pretty little terminal output. Uh, so
you can use emojis. Is this the
solution? Which led me to a little
question. Can I add another emoji? Can I
just add emojis? Someone's adding them.
There's more now than there were 5 years
ago, right?
I'd like to play a little game with you
as a little demonstration. Would can
people have a guess at what these three
emojis are called in the official Uniode
spec?
You're on to it already, but yeah, very
close. Uh, but like you might assume
siren, you might assume police siren,
right? What about the second one? I call
this the yikes phase personally.
Grimacing teeth. You guys are all nerds.
Um, what about the last one?
Someone said steam. Yeah. Well, I would
say angry or very angry, but it is
police car revolving light. Grimacine
face with steam from nose. Now these
seem well practically useless for if I
am trying to search for an emoji to send
to someone because I search by emotion
frankly uh as I imagine most people in
this room would do. But the issue is is
that the unic code spec is not going to
stop today. It is hopefully going to
last for decades in the future. So there
is a basically a trend to not put too
much context into these words like
grimacine face is a direct um analysis
of what this is police cars roving light
is siren maybe wouldn't be right that
actually is context dependent maybe in
the future after an apocalypse everyone
uses the red light to actually mean
something completely different maybe
it's an everything is okay alarm you
know so this kind of reveals something
important about uni code is that it has
to survive and there's a nice little
example does anyone know what emoji This
is
pager. I have asked this to groups of
younger people and they cannot answer
and understandably so. I think aside
from maybe hospitals, there's no real
use case for a pager anymore. And yet,
not only will the emoji persist, it'll
persist indefinitely because uni code is
not just for now. It is universal. I
believe that's what the uni and uni code
stands for. Probably should look that
up. Um, and the point here is that we
can't just add emojis. They have to have
a real reason to put them in and a real
backing for why they need to exist long
term. Which is why we have a consortium.
One of the most powerful tools and yet
one of the most boring tools is a bunch
of people sitting around making very
small decisions with a lot of consensus.
But incredibly important because we get
uni code out of it. And
oh
that's crazy. It's a static slide.
It's an offline presentation.
Uh I'm just going to try again and
hopefully that goes through. Anyway, the
next slide is basically going to be
talking a little bit about how you get
an emoji in. It takes an average of two
years and it is unbelievably again this
like I downloaded the whole thing.
Anyway, um this is another rant I could
go on about the state of current
software. Uh it takes about 2 years for
an emoji to uh go from proposal up until
implementation. And I guess like what
can I do other than continuously
refresh?
Uh I'm going to turn Wi-Fi on again. Uh
yeah, two years. And also the funniest
thing, which is what I was going to show
you, is that there's official proposals.
There's documents that people write to
say I would like this emoji to exist. Um
and they're hilariously funny to read
because it is very serious. They have
graphs. They have justifications. They
have sort orders. But it is about an
emoji. And I would love to show you an
example.
I'm I'm just going to I'm going to
fingers crossed I'm also going to
hotspot. Oh, this is terrible. It worked
for the first five slides. It lled me
into a full sense of confidence.
Okay. Um anyway,
uh I am hotspotting now.
Nope.
Oh, there's also no reception here, of
course. Uh, I was warned about this,
which is why I I tested it offline, but
apparently it might just cach the first
five slides. So, when I went to the
first five, I thought it was going to be
fine.
The core networks all
the core network
scroll down.
Is that through? Is it just one of the
It's not on my list.
Oh, ACC. Yep. Got it.
Yeah. Are you going to hotspot me or
I'm currently going through the core
stuff?
No.
Okay. It's called spot.
Sorry guys. Hold.
Okay. See if I can find me.
Oh, there you go.
That's what he said.
Yeah, stop it. Anyway, thank you so much
for putting up with with this. Sorry,
guys.
Oh, 100%. Yikes. Like, I use that every
day in every situation. Oh, sorry.
Grimacine face.
Okay, we're going to try this thing one
more time.
Hey,
thank you so much to our speaker.
Absolute legend. Okay, I might uh I have
time. I might go a little bit faster.
Anyway, yes, it takes lots of time. This
slide was mostly because I love this
little section where it goes, "No, I'm
not going to make you dinner." And then
it nods, which I think is kind of funny
and often times how I've been using it.
Get out of my way, nod.
Uh it's very funny. Anyway, look, point
is this is more of an aside, but the
point is is that there is hard to put an
emoji in, but we're beginning to get
somewhere because we've had this concept
of a number and we have this concept of
something that could get printed to the
screen and it seems like the terminal
already has that going. So, can we
inject some code in the middle? This is
a lot of how I do software engineering.
So, there is something called a font
renderer or a text renderer which does
something with the number to actually
print it to screen. Can I inject
something in there? And actually this
led me to my next realization which is
what is actually taking a step back.
What's up with all these emojis? Why do
they render differently on different
platforms? Like I hope the whole point
of a unic code consortium like creating
all these emojis is that they're
standardized, right? So like why is it
that on iOS for some reason it has an
extra sticker on it, but on Google no
such information is stuck on the box,
not compliant. And Samsung just has a
blank one and then WhatsApp for some
reason switches it and also isn't
fragile. What does it say about Google
that their emoji is fragile but none of
the other ones are? Think about it. Um,
but the the fundamental question here is
why are they different? And I would like
to rephrase this problem to you. Is this
actually that weird? Single character 65
renders differently in different fonts.
Also, you should go to like Google fonts
and just look through some of the font
names. They get pretty crazy as like the
less popular you go. I love just me
again down here because try to use that
in a casual conversation of like what
font should I use? Um, anyway, so that's
like a
That's effectively how you can control
the rendering of certain characters. And
actually, that's the missing piece here
is that a font renderer doesn't just
render a single number to a glyph. It
actually takes in a font. And the font
helps it helps describe, in fact,
completely describes how each character
is rendered. So maybe all we need to do
is make a font. 65 can map to all of
these different types of characters. Why
could it not map to something more
interesting? Now, whose terminal looks
like this? blank default settings.
Classic respect whose terminal looks
like this. Yeah. Little power line. When
you set this up, did you have to install
something called like an icon font? Very
much so. Yeah. And that kind of was
another hint of like, okay, well, surely
there is a way to get a bunch of
arbitrary images into a font because I
did it when I set up my terminal to be
nice and pretty. Um, you'll see my
terminal later. I think it is very
pretty. And uh can we then co-opt this
method to get some kitties, right?
Okay, so we've arrived at the point in
the talk where all we have to do very
easily, very quickly, is make a font
with some kitties in it. How hard could
it be?
How hard
could it be?
Let's start super simple. When you're
doing software engineering, you break
the problem down as much as you can.
Bitmap fonts. These are actually what
every font was back in ye oldie days.
It's very simple. Every character is
just a little image. Uh it's a bit map
to be specific. It is literally here is
how big the character is and here's
every pixel that needs to be filled. And
this works fine. Maybe we can just use
this method. But it does have an Oh, can
everyone read that really easily? No.
Let me zoom in on it. Oh
yeah. Kind of ugly, huh? Yeah. Turns out
bitmap forms don't scale very well. Um
obviously earlier computers you only
really had like one text size. That's
fine. Uh but once we started adding
more, we just generated more bit map
points. someone would handdraw every
character in multiple different sizes.
That's how we dealt with it. But in
today's age, maybe you have a user who
needs accessibility needs and wants to
really pump up the screen size, sorry,
the font size. Maybe you have someone
who's a power user and wants as much
text possible on their screen at one
point and they want to make it small.
You kind of need to support an arbitrary
amount of font sizes. So, it doesn't
work for us. I want my kitty to render
in all possible sizes. So, this is a
little demonstration of why this
happens. Effectively, if I have one
pixel on the left and I'm trying to map
it to a new resolution, I believe
actually the last slide. That's fine.
Oh, yeah. Last slide, that's like 1.75
times bigger, which is important because
if it was an exact power of two, it
would actually easily scale. Yeah. But
in this one, you can see it's sort of
like half supposed to be covering some.
There's many different ways you can
handle this. Most text renderers go for
this approach where you blur across
different um pixels. Uh, and it's ugly.
I don't like it. So, what about vector
fonts?
Oh yeah, I forgot to put that in there.
Yeah, it is here. I don't know. Um,
vector fonts are kind of an amazing
concept, and I I would like to spend a
little bit of time talking about them
because I think they're a phenomenal way
to solve this problem. Uh, but
effectively, what if instead of encoding
every single pixel, we encoded the vibes
and a kind of looks like this. And if
you put a little bit of more rigor into
that, you come up with vector uh vector
formats. Uh, if you've ever worked with
SVG, this should probably be quite
familiar. Um, but effectively you have a
little pen and you tell the pen where to
go. And the nice thing about this,
actually, let's go through a little
example. Here's a little little pen.
I've moved it to the pixel 14. I can
then draw a line to 18. Note that I
didn't actually say fill in the pixels
between these two points. I just say
draw to this point. And then I can even
do curves. Uh, in the appendex is a link
to a video uh by Freya who explains how
Bezio curves work. It is a phenomenal
video, but it is very complicated.
Bezier curves are actually a whole field
of mathematics. though I'm not going to
talk about them here but trust you can
just curve mathematically
deterministically. Um and then you can
scale this up. And the nice thing is is
because we've stored not pixel
information but instructions you can
scale this up with arbitrary resolutions
and suddenly you have smooth lines no
matter what the screen size is.
So here's a little video. I think I took
this from Arl Hugh. Yep. This is a very
cool YouTube video he made about how
fonts work. Uh, and you can see how line
by line with a little pen you can draw a
G. Isn't that awesome? Um, so how do I
do this? I went online. There is a
beautiful uh community of open source
artists who like to um give out assets
for free like with with full licensing
and I love that. Uh this one's Elan. He
also has um paid sprites. If you need
sprites, maybe check him out. Uh and I
stole this little one. I say stole took
with licensing. Um and I converted it
into a little font. I took each pixel uh
pixel cat and I just filled it in with
black. Um fonts don't have to be
monochromatic. It helps if they are. It
makes it easier. Um and I made this
little asset. You can actually see this
little one is from the same spreadsheet.
Cool. Let's make it.
But there's one question we need to
answer. What uniode character do we give
the kitty? Right. We can't just chuck it
in. It needs something to reference it.
Well, I said whatever. E. What could go
wrong? Um,
oh no.
Oh, that's funny. It that's fine. It's
going to work. I'm going to reconnect to
this.
I think PyCon the PyCon Wi-Fi network
slightly loaded again and it went back.
Yeah.
Uh,
okay. Sure. Okay. Um, yeah, I I try to
run it and I just get an E out actually.
Oh, that is annoying. This was going to
be a lot more of a funnier joke with
like the I was going to do a setup for
it, but I will. Um, can you all give me
a polite laugh? Thank you. Thank you
very much. Oh, and the applause. Oh,
please guys. Uh, yeah. Okay. Well, for
whatever reason, it's not working. And
this brings us to an interesting problem
of how do we actually get the font to
work? Now I I threw this image in
because I did a practice run of this
talk with a friend and as I was
explaining to him how operating systems
do font resolution, he was like, "Oh
yeah, like Swiss cheese." And I looked
at it blankly and he went, "Oh yeah, cuz
like every word, sorry, every glyph goes
through multiple different fonts until
it gets a hit." Kind of like if you
layered Swiss cheese on top of each
other. Um, and I'm going to be Thank
you. I I really just wanted to say that
cuz um I thought it was funny more than
anything else. Uh another way to look at
it is like this where the major takeaway
here is that you're whenever you're
rendering uh a piece of text, you don't
actually render it like sentence by
sentence or word by word. You render it
glyph by glyph. So every single letter
in a sentence goes through and checks
for what font do I have installed that
tells me how to render this. Not so most
fonts don't actually have the full
unicode like uh set in it. There's a lot
of characters in the unic code set and
for the most part if I was making a
font, it'd be ridiculous for me to draw
every possible character in like the
Arabic alphabet, especially if I'm not
planning to use the Arabic alphabet. So,
what your browser will do is it'll go
through an order and it will check each
font until it hits one of them that can
render the character. So, you can see
here H actually isn't defined in let's
say this this hypothetical Japanese font
or in this icon font, but it is in this
uh font called Apache Mono, which is the
font I use for this. It's one of my
favorite fonts. Um, then the next one is
in the first Japanese font, so it hits
and it renders correctly. And same thing
with the icon font. And this is nice. It
means we can actually make a font with
literally exactly four characters in it,
which are the four sprites I want for my
cat. And I can just install it. And as
long as I make sure that there's no
clashes, it'll always work, which is
really nice. And we don't have to worry
about also designing like a cat version
of H and E and L and L. So, all right.
Yeah. Okay. So, I've installed it
correctly, but if you remember, we
actually we bound it to E. So, now every
time an E pops up, a little kitty comes.
But I will say I kind of love this. I
almost left it. Uh, but no, let's let's
do this properly. How do those uh icon
fonts work? They don't have any issues
rendering the icons with other text,
right? And it's because the Unicode
Consortium in their endless uh mercy
have given us a block, actually several
blocks called private use blocks.
Basically, they go, "Here's a block of
unicode characters. Use them for
whatever you want." They can't ensure
that two different fonts you've
downloaded off the internet don't both
use the same unicode uh point in the
private use. But they are promising that
the core consortium will never use
these. These are like free to use. Um
but it is funny cuz then every single
icon font you download uses the same
range. So actually they still fight with
each other. But uh I'm going to use this
and it's a little kitty. That's it. You
install it on your operating system. Oh,
thank you. Thank you.
This took weeks. Anyway, um it I'm
skimming over a lot of the complexities
of actually making a font. It is
horrific. If if anyone is uh interested
in font making, uh maybe don't. Uh so,
no, I'm kidding. It's it's very
complicated and the tooling is quite uh
intense. But you have a little kitty now
and it works fine. Isn't that beautiful?
So, now the question comes, can I make
it move? I don't want this little kid
kitty to just uh sit there and be pretty
as much as it is. Uh I want it to move,
maybe eat an apple, you know, be a
little teamagotchi.
So this comes into a the sort of the
next the chapter three of this talk. Um
which is how far can we push this?
Turns out pretty far people have
actually been using fonts to imitate
motion for a while. So there's a little
font that comes pre-installed on uh
Windows computers called Myro Boot. Does
anyone feel like this little loader is
familiar at all? Yeah, it's the Windows
10, I believe, or 11 loader, uh, which
specifically usually pops up when you've
blue screened of death to your computer.
Uh, which I did several times. Uh, and
yeah, it turns out that in that
environment, I mean, I guess I'm I'm not
an engineer of Windows, so I can't
guarantee this, but my assumption is
that in that environment, it was easier
to just put these glyphs into the font
and then just update the text every like
half a second to get the desired effect
than it was to import a full video
renderer or or like a GIF renderer or
GIF. Um, and it allows you to sort of
like circumvent a lot of code by just
leveraging something that you you have
to set up a text renderer on every
screen anyway. If you want to render
text to the user, you set up a text
render drawer and then you can just kind
of piggy back off of that instead of
having to do extra work. Uh but
effectively not very complicated. It's
just a spreadsheet if um we have any
like people who know the lingo from the
game dev community. Uh you can have
individual glyphs and you just cycle
through them. So fonts can be sprite
sheets. Here's what I've done. Four
exactly. Actually there's a there's a
fifth uh kitty that I'll show you later.
Um that if you they're very subtle. The
tail is about wagging up and down. It's
very simple. And all I've done is I put
this into the font and then I wrote a
Python program to just cycle through
each of those characters. I think I did
like every half a second,
right? Isn't it adorable? Yeah. Look at
it go. Um, so yeah, that allows us to
give motion. And since you can move
where the character is uh in a certain
block of text, it could also walk
around. You could change it walking
animation. You could do a lot here. Um,
in fact, could we could we run Doom, do
you reckon?
I I don't know. I think it could be
possible. Uh, but no, I I did briefly
consider pivoting this talk hard into
how I could run Doom through a font. Uh,
and I did I I got a little into it, but
no, it turned out to be a huge
undertaking. Um, sadly, because I don't
think you can compile C to a font yet.
So, instead, I've thought about what
else I can use. What what kind of
features of a font can I leverage here
to give me more functionality? And one
thing I wanted was if two kitties are on
the screen and they get close to each
other, I want them to hold hands.
Very simple. And I could do this by just
detecting when two kitties are close to
each other and then replacing them. Why
would I? That's ridiculous. Have you
heard about multi character liatures?
This is this cool This is this cool
system where uh if you're a programmer
and you use I think FOR code is the most
popular font that does this. Um, if you
have two equal signs next to each other,
it combines them into a single nice
pretty glyph. Same with like a bunch of
other ones. And also, and I have a
little caveat here, this isn't
technically a multi character liature in
like the implementation of it. Uh, but
there's something called ZWJ emoji
sequences, which stands for zero width
joiner, which is if you have an emoji, a
special glue character, and another
emoji, the font renderer reads that as
one block, combines them, and then
produces a different glyph. So a lot of
emojis that we use are actually
combinations of existing emojis. Uh for
example, I believe uh man and holding
hand are two men holding hands. Makes
sense. Um yeah. So can we leverage this
to our advantage? I would like to say
this alone took me hours cuz the way
that you have to define them in the font
files is actually surprisingly
complicated. But
oh sorry
actually you know what? Let's jump
forward. I want to show you this. I want
to show you it working.
Cute. Uh, so this other slide is
actually because um I was thinking about
what are the actual use cases for this
other than multic character liatures and
making the kitties hold hands. Also, you
can see that because of the way that the
character works, it had to like reduce
the size, but that's okay because
they're scalable vector graphics and we
could scale it back up. Uh, but yeah. So
other examples of this and one of my
favorite ones is that if you download
like Google's product font and you type
in Google logo that is a multi character
liature that then gets replaced with
like a high resolution logo. Yeah. Which
I thought was kind of cool. Um so
there's actually a lot of power here. If
there's one thing I'd like you to take
away from this talk is that you can push
fonts pretty far and it might be an
unusual or an unexpected solution to a
problem you've run into. The my boot
example is I think is a very fun one. Uh
but there's a bunch of other examples. I
didn't have time to mention them all
where I've seen people use fonts quite
cleverly to solve problems. And the
purpose of this talk mostly is to be
like, hey, that's a thing that can
happen. So, we have little kitties.
They're holding hands. Um, now this is
officially the end of my talk. If you'd
like to applause, you can.
Um, but since I have 5 minutes left, I
might do one appendex slide and then
we'll move on because there's one other
thing I want to mention, which is
variable fonts. So the the concept of a
font has actually evolved. And in the
same way that we now have this nice
ability for a uh single font file to be
able to render a character at any
arbitrary file, sorry, font size. That's
awesome. Why can't we do that with font
weight? If anyone has actually
downloaded a font family, it's usually
like seven copies for each font weight.
Usually like semi black, black, bold, uh
light, regular. Uh so variable fonts are
kind of a solution to this and they
allow you to define in the font file an
axis and the axis can be basically
anything. The spec is actually very
loose but practically you mostly use it
for things like font weight is now
arbitrarily renderable. You store
instructions on how to render the
thickness of a stroke differently
depending on this uh access variable. Uh
you can do it here. I believe this one
is Yep. It's like a standard. You can
see that it's not it's also nonlinear.
the middle of the S gets fatter as you
sort of slide it to the right faster
than the slide goes. Uh, this one's very
cool. This is a space filling one. So,
as you sort of expand it, it'll take up
more and more space. The character
fundamentally changes how it renders and
the points it renders against, which is
very cool. Um, and I forget what this
last one was doing. And because this is
a gif, I just have to like patiently
wait for it to cycle back around. See,
also very cool. Um, oh, I never get
there. Anyway, it's fine. Uh point is is
that this is actually probably like if I
was going to make Doom in a font, this
is probably where I would begin with an
axis for time and see how far I could
push it. Uh but this is a cool future
implication. Sorry, iteration. Uh maybe
the most important of which is being
optical size where if you're rendering
at a small size, you actually want to
change the way your character renders
almost entirely to maximize for
legibility. Whereas if you're rendering
as like a huge heading, you can kind of
be a lot more interesting and cursive
and, you know, uh play around with your
glyph a lot more. Um so this gives you a
way to do that. Uh, that's about it.
Here's a little link to the video if you
want to watch Freya's video on Bezier.
Thank you.
Thank you for the Wi-Fi.
Thank you. I I think that was the most
useful talk I've seen at this conference
so far. Stuff I learned in my
Stop it. Okay, I'm I'm sorry.
I think we have time for one question.
Yes. Um, do we have a room monitor?
Where can I download the kitty font?
I will upload it to GitHub. But it is
exactly the five gips.
I don't care. I still want it.
I'll get I will upload it to GitHub. I
got you.
I'll post in the Discord.
Thank you. That was the correct
question.
Uh, thanks everyone. 10-minute break. Uh
please be here for the next talk which
is Benner ranting about something or
other.