Page MenuHomePhabricator

[landing] Bring back "fluid" `font-size` to `<p>`
ClosedPublic

Authored by atul on Mar 15 2022, 10:42 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Nov 9, 9:06 AM
Unknown Object (File)
Fri, Nov 8, 11:23 PM
Unknown Object (File)
Fri, Nov 8, 12:42 PM
Unknown Object (File)
Fri, Nov 8, 12:42 PM
Unknown Object (File)
Fri, Nov 8, 12:42 PM
Unknown Object (File)
Oct 27 2024, 5:17 AM
Unknown Object (File)
Oct 23 2024, 2:36 AM
Unknown Object (File)
Oct 22 2024, 9:17 PM

Details

Summary

Basically moved html.font-size to p.font-size

Before:

d94f.png (504×1 px, 280 KB)

After:
f428.png (578×1 px, 336 KB)


depends on D3430

Test Plan

Checked <p> tags and made sure that they look as they did before removing the html font-size clamp

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul edited the summary of this revision. (Show Details)
landing/global.css
11–12 ↗(On Diff #10399)

Stopped using these variables since it seems like an unnecessary indirection

41 ↗(On Diff #10399)

16px = 1rem so 12px = 0.75rem

16px = 1rem so 28px = 1.75rem

Harbormaster returned this revision to the author for changes because remote builds failed.Mar 15 2022, 10:57 AM
Harbormaster failed remote builds in B7387: Diff 10397!
Harbormaster failed remote builds in B7388: Diff 10399!
Harbormaster returned this revision to the author for changes because remote builds failed.Mar 15 2022, 11:12 AM
Harbormaster failed remote builds in B7389: Diff 10400!
atul requested review of this revision.Mar 15 2022, 11:14 AM
ashoat requested changes to this revision.Mar 15 2022, 8:35 PM

Question

landing/global.css
41 ↗(On Diff #10400)

It seems like the equation has changed from 0.75rem + 1vw previously, yeah? How was it determined?

This revision now requires changes to proceed.Mar 15 2022, 8:35 PM
landing/global.css
41 ↗(On Diff #10400)

Looks like it's half of this line: https://phabricator.ashoat.com/D3434#inline-20247

(Should that diff be connected with this stack in any way?)

This revision is now accepted and ready to land.Mar 15 2022, 8:40 PM
landing/global.css
41 ↗(On Diff #10399)

https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=12&fluidSize=1.0458&relativeSize=0.5408&maxSize=28

Image 2022-03-16 at 10.07.48 AM.jpg (1×2 px, 156 KB)

We should make the relative size 1rem. So when a user bumps up, or down their font size it changes enough to make a difference.

relative-size
Browser default root font size is 16px. This value can be changed by users in their browser settings, usually for accessibility purposes. Positive or negative "rem" values should be included to avoid locking font size to px value and to support user font size preferences.

from the about page.

landing/global.css
41 ↗(On Diff #10399)

We should make the relative size 1rem. So when a user bumps up, or down their font size it changes enough to make a difference.

Not sure I understand? What's the change you're suggesting?

I basically read through this: https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/, and it made sense, so I'm trusting it.

Spoke with Ben, determined that what we have is fine to land but there's still possibly room for improvement. I'll spend some time this weekend properly reading up on all these relative CSS units and their interactions with accessibility settings and whatnot and make any necessary changes.

benschac added inline comments.
landing/global.css
41 ↗(On Diff #10399)

https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#aa-what-if-the-user-changes-the-roots-font-size

I don't feel that strongly about it. But, in the referenced post the author talks about this exact shortcoming of his approach.

I also don't think many of our users are bumping their text and that this matters so much right now. But, could be worth going back to and taking a closer look.

(Should that diff be connected with this stack in any way?)

They aren't really "dependent" on each other (they could all be landed in whatever order), but I guess I could have flagged that they were part of the same body of work and should have included a link to the webpage with the math for each one.

My previous understanding was that we should use "depends on" when a diff doesn't stand alone (eg one diff introduces a function and another diff uses the function... basically where in the past people would do [1/n] diffs)... but I guess we just want every single diff to link to its parent so the "stack" view shows every step from master to the current diff? It seems a little tedious, but I'll do that going forward.

This revision was landed with ongoing or failed builds.Mar 16 2022, 11:53 AM
This revision was automatically updated to reflect the committed changes.
In D3432#93350, @atul wrote:

(Should that diff be connected with this stack in any way?)

They aren't really "dependent" on each other (they could all be landed in whatever order), but I guess I could have flagged that they were part of the same body of work and should have included a link to the webpage with the math for each one.

My previous understanding was that we should use "depends on" when a diff doesn't stand alone (eg one diff introduces a function and another diff uses the function... basically where in the past people would do [1/n] diffs)... but I guess we just want every single diff to link to its parent so the "stack" view shows every step from master to the current diff? It seems a little tedious, but I'll do that going forward.

Yeah, in my opinion it's less about documenting the actual dependencies, and more about laying a path for your reviewer to help them review things in the right order, and so they have somewhere to check if they see something they don't expect, or see something they think might've been addressed in a follow-up.