Type scale map and type utility classes. (Font)
Created by: dceluis
Hi! First of all, sorry for broken english. Please admins feel free to edit / ask for clarification is something doesn't make sense.
So, as I understand it, bootstrap has some options for the use of
typography. Like $font-size-lg and $font-size-sm variables and
the .small
and <small />
tags. Also, there's the possibility to
use the .h1 ... .h6
classes to change the font size of any element.
Still I find that lg
and sm
font-sizes are insufficient for every
case. And even though the .hX
could serve this purpose, they
have some inherent semantic sense that is inappropriate in many
cases. The docs even intruct to use them:
for when you want to match the font styling of a heading, but cannot use the associated HTML element.
It'd be useful to have dedicated: size-1
to size-6
(or better name)
that are only supposed to modify the element's font size. These
classes would be dependent on a potential $type-scale
variable like:
$type-scale: (
1: 2.5,
2: 2,
3: 1.75,
4: 1.5,
5: 1.25,
6: 1,
7: .8,
8: .7
);
This could be implemented with a function called font-size($scale-number)
.
I understand one of the counterpoints to this feature is that it can
be implemented with custom, per-project css, and it's true. But I
can see the benefit of having it by default in the framework. One
way it could be extended is having another line-height-for($scale-number)
function that calculates a line height that is a multiple of the base line
spacing ($line-height-base * $font-size-base)
, as an example.
So size-1
could, for example, apply:
font-size: font-size(1);
line-height: line-height-for(1);
Notice that there's space for additional font sizes smaller than the
base, (7 & 8). This is more practic than having
$font-size-{sm/lg/base/smaller/larger/super-large}
.
In summary, the things why I'd like to see this implemented are:
- Consistency / One source of truth. Font size units not
scattered around / duplicated. - Versatility.
size-1
would allow developers to just modify the sizing aspect of an element's typography. Leaving.hX
classes for proper title-replication. - Example value. By implementing a good-practice, well defined type scale.
- Extensibility. A couple of issues in the past were raised, in my opinion partly, because of a lack of font related features. Some of them: #24856 (closed) , #18137 (closed), #23119 (closed) .
- Easy to implement.
I'd love to hear your opinion, cheers!