Font Sizes from 4px to 99.9px

[thehorseofdoom]

https://tobylam.xyz/art/scale-rendered

[mdrzn]

Scrolling horizontally creates a very trippy and cool experience, I feel like I've been watching it for 10 minutes

[the_third_wave → mdrzn]

It acts like a stroboscope [1].

[1] https://en.wikipedia.org/wiki/Stroboscope

[tetris11 → mdrzn]

Sometimes when I stare at a long build in real time the text aligns like that and my eyes glaze over and I see all sorts of fun vertical patterns

Also I created a nice visual bouncy scroll loop in a comment further down.

[rafabulsing → tetris11]

See also: https://en.wikipedia.org/wiki/River_(typography)

[mdrzn → rafabulsing]

Love me some good rivers. Scrolling horizontally moving the mouse at different speed at OP's website creates beautiful artifacts.

[thehorseofdoom]

A ruler of sorts? Gives you a sense of how big a CSS pixel is. On desktop, you can auto-scroll and see some nice periodic graphics. Doesn't work too well on mobile. (It seems like the font sizes safari can display is discrete)

Inspired by that webpage that didn't close their h2 tags so the font size kept comically increasing

[cantSpellSober → thehorseofdoom]

> Doesn't work too well on mobile

a font-size value with decimals may be rounded to the nearest whole number, depending on browser

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#p...

[exikyut → thehorseofdoom]

That web page was using Comic Sans MS, too, wasn't it

I can't understand why something would be published in that condition - and that it would be considered acceptable and signed off on and stuff :)

Or maybe the page owner never actually visited the website...

[xigoi]

I love how it wiggles when you scroll horizontally.

[mediumsmart]

Why do 31.5 to 35.5 look the same to me? on a retina phone screen Orion browser.

[lifthrasiir → mediumsmart]

Due to the hinting that improves a visibility for smaller texts. The exact appearance can depend on font, operating system and text rendering stack; in my desktop Firefox with a specific font, 6.0--6.4, 6.6--8.3, 8.6--9.4, 9.7--10.3, 10.6--11.2, 11.5--13.4 and 13.8--14.6 look same to me for the same reason.

[account42 → lifthrasiir]

Makes sense for small sizes but having hinting make 31.5 and 35.5 appear the same sounds like a bug. FWIW neither FF, Edge nor IE show that behavior for me.

[crazygringo → account42]

Funny, it's 36–40 that are the same for me, on iOS, both on Chrome and Safari (makes sense since Chrome renders using Safari). The bug isn't present on Safari on Mac, however, so it seems to be iOS specific.

Yeah at those sizes it's definitely not a hinting artifact or rounding to the nearest integer.

Definitely some kind of bug. I have a hard time imagining what possible mechanism could cause that, though. That's a weird one.

[siquick]

Can you animate it to scroll up and down on loop? It’s a nice visual experience.

[tetris11 → siquick]

Best I've got is

```

    var speed_x = 50, speed_y = 2,
        step = 20, stop_after = 60 * 1000;
    
    var t = setInterval(function(){
        // scrollY faster for larger text
        let ymod = 1 + (50 * ((scrollY / scrollMaxY)**2))
        window.scrollBy(speed_x, speed_y * ymod)
        if ((scrollX >= scrollMaxX) || (scrollX <= 0)){
            speed_x = -speed_x
        }
        if ((scrollY >= scrollMaxY) || (scrollY <= 0)){
            speed_y = -speed_y
        }
    }, step);
    setTimeout(function(){clearTimeout(t)}, stop_after)

    

```

[wkat4242 → siquick]

Reminds me a bit of star wars lol

[gosub100]

Very cool! Someone has to have made a 3D game out of this, I bet you could have objects on a plane through some clever manipulation of fonts and perhaps unicode.

[nicman23]

i... dont know what i expected

[Aardwolf]

I'm very sure the 4px one uses more then 4 pixels height on my phone (firefox on android). The px measure is a lie!

[GRiMe2D → Aardwolf]

In web 1px defined as 1/96th of an inch

Source: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...

[yencabulator → GRiMe2D]

And the CSS definition of "inch", of course, has nothing to do with a real world inches. (He says, while pushing the zoom in/out buttons.)

[pcdoodle]

I love it

[sinuhe69]

Ha, the site shows how nice the font rendering on iPad is! Even the smallest ones are clearly visible and all the bigger font sizes are rendered differently. Nice!