argyleink / argyleink/open-props

Parity between font and fontfluid

Open
#529 2 comments 1 reaction 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.