argyleink / argyleink/open-props
Parity between font and fontfluid
- Dominant language
- HTML
- Stars
- 5.5k
- Forks
- 216
- PR merge metrics
- No merged PRs in 30d
Description
This might be an OPv2 issue, most likely.
`font.css` goes from 00-8 like this:
```css
/* font.css */
:where(:root) {
--font-size-00: 0.5rem;
--font-size-0: 0.75rem;
--font-size-1: 1rem;
--font-size-2: 1.1rem;
--font-size-3: 1.25rem;
--font-size-4: 1.5rem;
--font-size-5: 2rem;
--font-size-6: 2.5rem;
--font-size-7: 3rem;
--font-size-8: 3.5rem;
}
```
`fontfluid.css` goes from 0-3 like this:
```css
/* fontfluid.css */
:where(:root) {
--font-size-fluid-0: clamp(0.75rem, 2vw, 1rem);
--font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
--font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
--font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
}
```
## WHAT IF...
... `fontfluid.css` could match `font-size.css` and also go from 00-8? Too much choice?
```css
/* fontfluid-2.0.css */
:where(:root) {
--font-size-fluid-00: clamp(0.4rem, 1.5vi, 0.5rem);
--font-size-fluid-0: clamp(0.5rem, 2vi, 0.75rem);
--font-size-fluid-1: clamp(0.75rem, 2.5vi, 1rem);
--font-size-fluid-2: clamp(0.875rem, 3vi, 1.1rem);
--font-size-fluid-3: clamp(1rem, 3.5vi, 1.25rem);
--font-size-fluid-4: clamp(1.125rem, 4vi, 1.5rem);
--font-size-fluid-5: clamp(1.5rem, 5vi, 2rem);
--font-size-fluid-6: clamp(1.875rem, 6vi, 2.5rem);
--font-size-fluid-7: clamp(2.25rem, 7.5vi, 3rem);
--font-size-fluid-8: clamp(2.5rem, 9vi, 3.5rem);
}
/* or even use the font.css values as default values */
:where(:root) {
--font-size-fluid-00: clamp(0.4rem, 1.5vi, var(--font-size-00, 0.5rem));
--font-size-fluid-0: clamp(0.5rem, 2vi, var(--font-size-0, 0.75rem));
--font-size-fluid-1: clamp(0.75rem, 2.5vi, var(--font-size-1, 1rem));
--font-size-fluid-2: clamp(0.875rem, 3vi, var(--font-size-2, 1.1rem));
--font-size-fluid-3: clamp(1rem, 3.5vi, var(--font-size-3, 1.25rem));
--font-size-fluid-4: clamp(1.125rem, 4vi, var(--font-size-4, 1.5rem));
--font-size-fluid-5: clamp(1.5rem, 5vi, var(--font-size-5, 2rem));
--font-size-fluid-6: clamp(1.875rem, 6vi, var(--font-size-6, 2.5rem));
--font-size-fluid-7: clamp(2.25rem, 7.5vi, var(--font-size-7, 3rem));
--font-size-fluid-8: clamp(2.5rem, 9vi, var(--font-size-8, 3.5rem));
}
```
DEMO: https://codepen.io/Flerox/pen/azodWxJ?editors=1100
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by comparing font.css and fontfluid.css, then review the linked CodePen demo and the Open Props v2 context mentioned in the issue. Done requires a maintainer-approved decision on whether and how the fluid scale should match the 00–8 scale, because the issue presents alternatives rather than a settled implementation scope.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100