Skip to content

Commit 43d8010

Browse files
wmedranowmedrano
committed
Improve styling
1 parent 8ca1503 commit 43d8010

6 files changed

Lines changed: 168 additions & 163 deletions

File tree

‎content/css/styles.css‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
align-items: center;
55
justify-content: space-between;
66
padding: 1.1rem 2rem;
7-
border-bottom: 0.5px solid #e5e5e5;
7+
border-bottom: 0.5px solid #eee;
88
}
99

1010
.navbar a:first-child {
@@ -18,7 +18,7 @@
1818
.navbar a:last-child {
1919
font-size: 14px;
2020
font-weight: 500;
21-
color: #666666;
21+
color: #444;
2222
text-decoration: none;
2323
padding: 6px 14px;
2424
letter-spacing: 0.02em;
@@ -33,11 +33,17 @@ a:visited {
3333
}
3434

3535
.content {
36-
max-width: 800px;
3736
margin: 0 auto;
38-
padding: 0 20px;
37+
padding: 0 4px;
3938
font-family: Sen, sans-serif;
4039
font-size: 16px;
40+
color: #222;
41+
line-height: 1.5;
42+
}
43+
@media (min-width: 800px) {
44+
.content {
45+
max-width: 640px;
46+
}
4147
}
4248
table {
4349
margin: 0 auto;
@@ -55,7 +61,7 @@ th, td {
5561
text-align: left;
5662
}
5763
th {
58-
background-color: #f0f0f0;
64+
background-color: #fff;
5965
font-weight: bold;
6066
}
6167

@@ -74,36 +80,37 @@ h6 { font-size: 16px; }
7480
img {
7581
display: block;
7682
width: 100%;
77-
border: 1px solid #e5e5e5;
83+
border: 1px solid #eee;
7884
}
7985
label.org-src-name {
8086
font-size: 14px;
81-
color: #666666;
87+
color: #444;
8288
}
8389
.post-date {
8490
font-size: 14px;
85-
color: #666666;
91+
color: #444;
8692
}
8793
.figure p {
8894
margin: 0 !important;
8995
font-size: 14px;
90-
color: #666666;
96+
color: #444;
9197
}
9298
div.figure {
9399
margin: 1.5rem 0;
94100
}
95101
code, pre {
96102
font-family: "Fira Code", monospace;
97-
font-size: 14px;
103+
font-size: 13px;
104+
line-height: 1.1;
98105

99106
}
100-
code {border: 1px solid #e5e5e5;}
107+
code {border: 1px solid #aaa;}
101108
div.org-src-container {
102109
margin: 1rem 0;
103110
}
104111
.src {
105112
overflow-x: auto;
106-
border: 1px solid #e5e5e5;
113+
border: 1px solid #eee;
107114
padding: 6px;
108115
margin: 0;
109116
}
@@ -114,7 +121,7 @@ div.footdef {
114121
display: inline;
115122
}
116123
#postamble {
117-
border-top: 1px solid #000;
124+
border-top: 1px solid #333;
118125
padding-top: 0.5rem;
119126
font-size: 13px;
120127
opacity: 0.5;
@@ -128,7 +135,7 @@ div.footdef {
128135
.org-comment, .org-comment-delimiter {color: #b22222;}
129136
.org-constant {color: #008b8b;}
130137
.org-doc, .org-string {color: #8b2252;}
131-
.org-function-name, .org-css-selector {color: #0000ff;}
138+
.org-function-name, .org-css-selector {color: #0000ff; }
132139
.org-keyword, .org-variable-name, .org-css-property {color: #a020f0;}
133140
.org-type {color: #228b22;}
134141
.org-variable-name {color: #a0522d;}

‎content/post/2026/04/11/fonts-q1.org‎

Lines changed: 86 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,21 @@
22
#+date: <2026-04-11 Sat>
33
#+author: Will S. Medrano
44

5+
/(Reading time: 5-10 minutes)/
6+
57
* Introduction
68
:PROPERTIES:
79
:ID: 8441fc9d-1865-439c-95de-5de5833e41f0
810
:END:
911

12+
1013
I just completed my first full quarter on my new team[fn:startdate], the Google
1114
Fonts team. It went about as I expected; I learned a lot of stuff, but wish I
1215
had learned it all faster.
1316

1417
So what does the Google Fonts team do? Quite a bit of random stuff here and
15-
there, some of it internal to Google, and some of it open source. It's easy to
16-
talk about the more open stuff than the internal.
18+
there, some of it internal to Google, and some of it open source. It's tricky to
19+
talk about the internal stuff, but I can comment on the open source efforts.
1720

1821
** Google Fonts
1922
:PROPERTIES:
@@ -34,11 +37,12 @@ you can embed the font files into your website.
3437
<link href="https://fonts.googleapis.com/css2?family=Baskervville:wght@700&family=Sen:wght@400..800&display=swap" rel="stylesheet">
3538
#+END_SRC
3639

37-
The neat part about the Google Fonts API is thatit provides the font hosting. No
38-
need to download and serve the fonts. If you look at the generated CSS, you can
39-
see a few different technologies to better serve fonts.
40+
The neat part about Google Fonts is that the API takes care of the font
41+
hosting. No need to download and serve the fonts. If you look at the generated
42+
CSS, you can see how the serving is optimized compared to serving simple static
43+
files.
4044

41-
#+CAPTION: Note the use of =woff2= and =unicode-range= to serve only the required glyphs. This page actually only needs the /latin/ range.
45+
#+CAPTION: Note the use of =woff2= and =unicode-range= to serve only the required glyphs. This blog post actually only needs the /latin/ range.
4246
#+BEGIN_SRC css
4347
/* latin-ext */
4448
@font-face {
@@ -79,9 +83,11 @@ see a few different technologies to better serve fonts.
7983
:ID: 346f6172-0f28-4b18-b41f-a27789e7c580
8084
:END:
8185

82-
Google maintains and develops [[https://github.com/googlefonts/fontc][fontc]], a Rust-based compiler that takes font sources
83-
and converts them into ttf/otf files. It's a lot quicker than the previous Python
84-
font compiler, [[https://github.com/googlefonts/fontmake][fontmake]], which was also developed and maintained by Google.
86+
Google maintains and develops [[https://github.com/googlefonts/fontc][fontc]], a Rust-based compiler that takes font
87+
sources and converts them into the binary ttf and otf files. Font sources come
88+
in various formats, but usually boil down to definitions for outlines, kerning,
89+
metadata and more. It's a lot quicker than the previous Python font compiler,
90+
[[https://github.com/googlefonts/fontmake][fontmake]], which was also developed and maintained by Google.
8591

8692
** Fontations
8793
:PROPERTIES:
@@ -102,30 +108,41 @@ open source. Since it's open source, I can actually present some of the stuff
102108
I've done.
103109

104110
** Better Gradients for Resvg+TinySkia
111+
:PROPERTIES:
112+
:ID: 44143173-9bff-4337-8cf8-9a6edcad2636
113+
:END:
105114

106115
*** Task
116+
:PROPERTIES:
117+
:ID: bd821425-fc63-4e7c-9db2-e4211d5f6ae5
118+
:END:
107119

108-
My starter project was to fix [[https://github.com/googlefonts/sleipnir][Sleipnir]] rendering of color fonts like
120+
My starter project was to fix [[https://github.com/googlefonts/sleipnir][Sleipnir]] rendering of color fonts like emojis and
109121
[[https://fonts.google.com/specimen/Nabla?query=nabla&preview.script=Latn][Nabla]]. Sleipnir is a Rust library that can render text and icons into png or
110122
svg.
111123

112124
This one was quite a rabbit hole. The most important skill I picked up was
113-
understanding the font format. Fonts (ttf/otf files) are composed of tables. The
114-
tables define things such as contours, supported unicodes, ligatures, kerning,
115-
and lots of other stuff; it's a fairly extensible format.
125+
understanding the font format. Fonts (binary ttf/otf files) are composed of
126+
tables. The tables define things such as outline contours, supported unicodes,
127+
ligatures, kerning, and lots of other stuff; it's a fairly extensible
128+
format. Font's can make use any assortment of the spec to accomplish the
129+
goal. The spec is fairly complicated due to decades of legacy.
116130

117131
To inspect the contents of a font, you can open it with the =ttx= command from
118132
[[https://github.com/fonttools/fonttools][fonttools]]. This produces an =xml= representation of the tables. To help me out,
119133
I even made an Emacs package that adds the ability to open ttf, otf, and
120134
woff2[fn:woff2] font files. Check out [[https://github.com/wmedrano/ttx-mode][=ttx-mode=]] if interested.
121135

122136
*** Detour
137+
:PROPERTIES:
138+
:ID: 6a3f92bf-8748-4d06-998e-c1cac7374ef7
139+
:END:
123140

124-
It turns out that getting Nabla to work was not too complicated. However, the
125-
underlying 2D graphics library did not have the full expressiveness of Radial
126-
Gradients and was missing Sweep Gradients entirely. I originally was going to
127-
leave it as is, but my manager encouraged me to continue. So I ended up learning
128-
some math and implementing [[https://github.com/linebender/tiny-skia/pull/164][radial gradient]] and [[https://github.com/linebender/tiny-skia/pull/166][sweep gradients]].
141+
It turns out that getting Nabla to work was not too complicated. However,
142+
=tiny-skia=, the underlying 2D graphics library, did not have fully support
143+
Radial Gradients and was missing Sweep Gradients entirely. I originally was
144+
going to leave it as is, but my manager encouraged me to continue. So I ended up
145+
learning some math and implementing [[https://github.com/linebender/tiny-skia/pull/164][radial gradient]] and [[https://github.com/linebender/tiny-skia/pull/166][sweep gradients]].
129146

130147
What's rewarding about this is that it affects a few other users. Once /typst/
131148
updates their dependencies, they should have better gradients ([[https://github.com/typst/typst/issues/7760][issues]]). I also
@@ -144,29 +161,34 @@ are pretty popular open source tools.
144161
:END:
145162

146163
The main project I should be working on at the moment is landing IFT on the
147-
client. I said should since I've spent most of this quarter procrastinating and
148-
failing to comprehend specs. At least I've made a bit of progress.
164+
client. IFT is a font technology that reduces the size of fonts on the web. I
165+
said /should/ since I've spent most of this quarter procrastinating and failing
166+
to comprehend specs. At least I've made a bit of progress.
149167

150168
IFT stands for Incremental Font Transfer. It is a font technology that
151-
theoretically enables more efficient transfer of fonts. One of my coworkers has
152-
been working on the spec and prototype for a while. He's done a great job at
153-
authoring the [[https://www.w3.org/TR/IFT/][W3 Spec]] for it.
169+
theoretically enables more efficient transfer of fonts. My coworker, Garret, has
170+
been working on the spec and prototype for a while. The spec can be seen on
171+
[[https://www.w3.org/TR/IFT/][W3.org]].
154172

155173
IFT requires 2 components:
156174

157-
1. A font must be IFT encoded. This splits the font into a base font and a
158-
collection of patches.
175+
1. An IFT encoded font. This splits the font into a base font and a collection
176+
of patches.
159177
2. Client support. Clients (web browsers) must be able to request and apply the
160178
patches as needed.
161179

162180
#+BEGIN_SRC dot :file ift-encoder.svg :exports results
163181
digraph IFT {
164182
rankdir=LR;
165-
node [fontname="sans-serif"; fontsize=12; shape=record;];
166-
font [label="Font File"];
167-
base [label="Base Font"];
168-
patches [label="Patch 0|Patch 1|⋮|Patch N"];
169-
encoder [label="IFT\nEncoder"];
183+
bgcolor="transparent";
184+
node [fontname="sans-serif", fontsize=12, style="filled", penwidth=1.2];
185+
edge [color="#555", arrowsize=0.8];
186+
187+
font [label="Font File", shape=note, fillcolor="#fff7e6", color="#b07a2b"];
188+
encoder [label="IFT\nEncoder", shape=box, style="filled", fillcolor="#e6f0fb", color="#2b5a9b"];
189+
base [label="Base Font", shape=note, fillcolor="#fff7e6", color="#b07a2b"];
190+
patches [label="Patch 0|Patch 1|⋮|Patch N", shape=record, fillcolor="#fff7e6", color="#b07a2b"];
191+
170192
font -> encoder;
171193
encoder -> base;
172194
encoder -> patches;
@@ -181,19 +203,23 @@ digraph IFT {
181203
#+BEGIN_SRC dot :file ift-client.svg :exports results
182204
digraph IFTClient {
183205
rankdir=LR;
184-
node [fontname="sans-serif"; fontsize=12; shape=record;];
206+
bgcolor="transparent";
207+
node [fontname="sans-serif", fontsize=12, style="filled", penwidth=1.2];
208+
edge [color="#555", arrowsize=0.8];
185209

186-
webpage [label="Web Page"];
187-
browser [label="Browser"];
210+
webpage [label="Web Page", shape=note, fillcolor="#fff7e6", color="#b07a2b"];
211+
browser [label="Browser", shape=box, style="filled", fillcolor="#e6f0fb", color="#2b5a9b"];
188212

189213
subgraph cluster_cdn {
190214
label="CDN";
191-
color=gray;
192215
fontname="sans-serif";
193216
fontsize=12;
217+
style="filled";
218+
bgcolor="#f9f9f9";
219+
color="#bbb";
194220

195-
basefont [label="Base Font"];
196-
patches [label="Patches"];
221+
basefont [label="Base Font", shape=note, fillcolor="#fff7e6", color="#b07a2b"];
222+
patches [label="Patches", shape=note, fillcolor="#fff7e6", color="#b07a2b"];
197223
}
198224

199225
webpage -> browser;
@@ -209,48 +235,52 @@ digraph IFTClient {
209235

210236
So why is it useful to split up a font? This is all to reduce download sizes and
211237
make things load quickly and more consistently. When using a font, a web page
212-
may not need all the glyphs (characters) or styles (italic/bold/underline).
238+
may not need all the glyphs (characters) or styles (italic/bold).
213239

214240
*** Actual Deliverables
215241
:PROPERTIES:
216242
:ID: 0894041b-86cb-4551-818e-95c382fee073
217243
:END:
218244

219-
Well, I've been really procrastinating on this since it's rather
220-
intimidating. I've read some spec, IFT code, and Chromium code, but that's not
221-
really a deliverable[fn:ift-progress].
245+
Well, I've been really procrastinating on IFT since it's rather
246+
intimidating. I've read some spec, encoding code, decoding code, and Chromium
247+
code, but that's not really a deliverable[fn:ift-progress].
222248

223-
However, at the end of the quarter I managed to squeeze in =fonttools= support
224-
([[https://github.com/fonttools/fonttools/pull/4072][PR]]). This allows us to inspect the =IFT= table with the very useful =ttx=
225-
tool[fn:ttx]. This is useful for debugging the feature as =IFT= contains all the
226-
metadata for defining the available patches.
249+
However, I kind of lied about not having any deliverables. At the end of the
250+
quarter I managed to squeeze in =IFT= support ([[https://github.com/fonttools/fonttools/pull/4072][PR]]) into =ttx=. This will allow
251+
us to inspect the =IFT= table as human readable =XML=. This is useful for
252+
inspecting the patch definitions while we debug quirks of our new =IFT=
253+
implementation.
227254

228255
*** Next
229256
:PROPERTIES:
230257
:ID: ac6005e1-8823-4c19-be1e-b92839a10764
231258
:END:
232259

233-
My Q2 goal is to have working IFT support in the browser. This means understanding
234-
the Chromium code, implementing the feature, and shipping it behind a flag.
260+
My Q2 goal is to have working IFT support in the browser. This means
261+
understanding the Chromium code, implementing the feature, and shipping it
262+
behind an experimental flag.
235263

236264
** An Appreciation for Typeface
265+
:PROPERTIES:
266+
:ID: 3136f878-0e28-4bac-a78e-368b9db7fb4e
267+
:END:
237268

238-
#+CAPTION: It's a typeface Steve.
239-
#+ATTR_HTML: :style width:50%;margin:auto;
269+
#+ATTR_HTML: :style width:50%;margin:auto; :alt Tuxedo Winnie the Pooh meme: regular Pooh labeled "font", fancy tuxedo Pooh labeled "typeface".
240270
[[./pooh.jpg]]
241271

242272
I've also gained an appreciation for typeface[fn:typeface]. I've liked tweaking
243273
around the monospace font I use after I started programming. Here's where I've
244274
landed for now:
245275

246-
| Context | Purpose | Typeface | Designer |
247-
|---------+-------------+--------------+----------------------------------|
248-
| OS | Interface | [[https://indestructibletype.com/Jost.html][Jost*]] | [[https://indestructibletype.com/BuyJost.html][indestructible type*]] (Owen Earl) |
249-
| OS | Body Text | [[https://rsms.me/inter/][Inter]] | [[https://rsms.me/inter/download/][rsms]] (Rasmus) |
250-
| OS | Terminal | [[http://levien.com/type/myfonts/inconsolata.html][Inconsolata]] | [[https://github.com/raphlinus][raphlinus]] ([[https://tug.org/tc/devfund/][TUG]] for funding) |
251-
| OS/Blog | Code | [[https://github.com/tonsky/FiraCode][Fira Code]] | [[https://carrois.com/studio/][Carrois Type Design]] & [[https://github.com/tonsky][tonsky]] |
252-
| Blog | Blog Header | [[https://anrt-nancy.fr/en/fonts/baskervville][Baskervville]] | [[https://anrt-nancy.fr/en][ANRT]] ([[https://www.rosaliewagner.com/][Rosalie Wagner]] & [[https://ko-fi.com/rosaliewagner][ko-fi]]) |
253-
| Blog | Body Text | [[https://philatype.com/sen][Sen]] | [[https://philatype.com/][PHILATYPE]] (Kosal Sen) |
276+
| Context | Purpose | Typeface | Designer |
277+
|---------+-----------+--------------+----------------------------------|
278+
| OS | Interface | [[https://indestructibletype.com/Jost.html][Jost*]] | [[https://indestructibletype.com/BuyJost.html][indestructible type*]] (Owen Earl) |
279+
| OS | Body | [[https://rsms.me/inter/][Inter]] | [[https://rsms.me/inter/download/][rsms]] (Rasmus) |
280+
| OS | Terminal | [[http://levien.com/type/myfonts/inconsolata.html][Inconsolata]] | [[https://github.com/raphlinus][raphlinus]] ([[https://tug.org/tc/devfund/][TUG]] for funding) |
281+
| OS/Blog | Code | [[https://github.com/tonsky/FiraCode][Fira Code]] | [[https://carrois.com/studio/][Carrois Type Design]] & [[https://github.com/tonsky][tonsky]] |
282+
| Blog | Header | [[https://anrt-nancy.fr/en/fonts/baskervville][Baskervville]] | [[https://anrt-nancy.fr/en][ANRT]] ([[https://www.rosaliewagner.com/][Rosalie Wagner]], on [[https://ko-fi.com/rosaliewagner][ko-fi]]) |
283+
| Blog | Body | [[https://philatype.com/sen][Sen]] | [[https://philatype.com/][PHILATYPE]] (Kosal Sen) |
254284

255285
* Footnotes
256286
:PROPERTIES:
@@ -266,8 +296,5 @@ days.
266296
[fn:ift-progress] At the time this was written, my grasp is a lot better. That's
267297
a relief, but it would be a 2026Q2 update!
268298

269-
[fn:ttx] You know, the thing I talked about earlier. The font file to xml
270-
converter.
271-
272299
[fn:typeface] Typeface is the design, for example, the Helvetica typeface. The
273300
font is the digital representation manifested into bytes.

0 commit comments

Comments
 (0)