Consider a generic typescale

Open
#308 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
css
Domain
design

Research direction

Start with the typography page and the existing fs-headline1 and fs-display2 type-size names, then compare them with the width and padding naming conventions mentioned in the issue. Done requires an agreed generic scale or literal naming scheme and updated type-size documentation and classes to match it.

Written by the indexing model from the issue text.

Description

discussion enhancement

Now that Stacks has matured and adoption has grown, I find myself visiting the documentation most for our type size. I just can't seem to internalize if something is a fs-headline1 or a fs-display2.

I find the motivations for doing so were to be a bit more prescriptive in our type scale, but in practice, if someone knows their type is at 21px, they're going to go to our typography page and choose the size that matches 21px. I don't know what it is without looking.

Here's what I propose.

Our font sizes should be literal. We should alias / rename our current type sizes with fs-[xx]. This could be more in line with how we represent width and padding, eg fs-11 meaning font-size: 11px or we could setup our typescale from 1–9, 1 being the smallest, and 9 being the largest.

Either way, it will be much easier to step through the type scale as we're implementing designs than constantly trying to figure out what class name 21px is.

Dominant language
TypeScript
Stars
672
Forks
107
Avg merge
2d 12h
Merged PRs (30d)
26

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from StackExchange/Stacks

All issues in StackExchange/Stacks

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.