
Times New Arial - chx
https://timesnewarial.liebermannkiepereddemann.de/
======
svat
Those who enjoy this sort of thing might also enjoy reading Donald Knuth's
“The Concept of a Meta-Font” (from 1982):
[http://visiblelanguagejournal.com/issue/61/article/748](http://visiblelanguagejournal.com/issue/61/article/748)
— although the technology used is very different (it was designed for print
after all), he plays a lot of lovely tricks with the font on the page
(changing x-height, “e-height”, etc), including gradually transitioning from a
serif to a sans-serif typeface. Note that even the “production” Computer
Modern family available by default with TeX distributions itself has all its
typefaces (including sans-serif, monospaced, bold, italic, etc. variants) by
varying parameters in a single font. Direct link to PDF: [https://s3-us-
west-2.amazonaws.com/visiblelanguage/pdf/V16N1...](https://s3-us-
west-2.amazonaws.com/visiblelanguage/pdf/V16N1_1982_E.pdf)

Also, look at Metaflop modulator:
[https://www.metaflop.com/modulator](https://www.metaflop.com/modulator)

------
wilg
Looks kinda nice in the middle there...

~~~
behnamoh
That reminds me of Cambria

------
ryanmjacobs
Very cool! Looks like it was done with a bit of jQuery magic :)

[https://timesnewarial.liebermannkiepereddemann.de/js/script....](https://timesnewarial.liebermannkiepereddemann.de/js/script.js)

~~~
chx
It's only for convenience, the magic is in the font:
css({fontVariationSettings: '"srff"' \+ yy + ', "ital"' \+ xx})

[https://developer.mozilla.org/en-US/docs/Web/CSS/font-
variat...](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-
settings)

------
ukoki
As suspected it struggles with 'g' :)

[https://imgur.com/umYbkbn](https://imgur.com/umYbkbn)

~~~
mcswell
Can you explain what you mean by "struggle"? If you click on the page, it
brings up what amounts to several character maps; there's a 'g' in the upper
right-hand quad. Then you can move the cursor around as before to observe the
changes. But I'm not sure what's wrong with the 'g'; is it on the X- or Y-axis
that you see problems? what kind of problems?

~~~
ukoki
> Can you explain what you mean by "struggle"?

An Arial 'g' and a Times New Roman 'g' are fundamentally different because

1\. The stem is on different sides

2\. They have a different number of loops

For most letters you can transition between the two fonts by simply adding or
removing serifs and and making things either more or less curvy. But for the
'g' you have to change the fundamental shape. As you can see in the
screenshot, I've added a 'g' to the example text and expect to see a 'g' which
is 93% Arial and 7% Times New Roman - however the 'g' shown is a Times New
Roman style 'g' and looks nothing like an Arial 'g' (which has the stem on the
right not the left, and one loop instead of two)

> If you click on the page, it brings up what amounts to several character
> maps

In the character map view, I can see that the Arial 'g' is nothing like a real
Arial 'g' \- it's a Times New Roman 'g' with fewer serifs.

------
cwillu
The backslash behaviour with slant is... unfortunate.

------
smitty1e
This Nice Alphabet

That's Newly Arrived:

Truly Natural Art

