Usually, a venture may have a set of pre-determined font sizes, normally as variables named in such a means that seeks some semblance of order and consistency. Any venture of appreciable measurement can use one thing like that. There are all the time headings, paragraphs, lists, and many others. You may set font sizes explicitly and straight all over the place (e.g. font-size: 18px). Uncooked CSS, because it had been. I do see that sometimes — mixing not simply sizes but in addition items like px, rem and em in senseless chaos.
That’s why the CSS of a venture usually makes use of variables or mixins — we’re capturing for construction, maintainability and, finally, consistency. Everyone knows naming is tough and it doesn’t take wanting a lot additional than naming font measurement variables to see why. How ought to we identify a small font measurement variable so it’s clear that it’s smaller than a big font measurement variable? And what occurs if we have to insert a brand new variable in between them — is that one named in a means that clearly explains its relationship to the opposite measurement variables?
We’ll proceed speaking about naming font measurement variables on this submit. However, actually, the problem extends past font sizes to any type of measurement or size worth. Suppose paddings, margins, widths, heights, border radii, and many others. This stuff want construction and consistency, too!
How do you outline font sizes in your venture? Does it look one thing like this with customized variables:
:root {
/* Font measurement variables */
–small: 12px;
–medium: 16px;
–large: 24px;
}
Or maybe in Sass (which is what we’ll be utilizing all through this text) you might need variables for $small, $medium, and $massive font sizes.
Positive. After some time, let’s say the designer provides a brand new <h1> heading for a hero part. And it’s very massive. Bigger than something you’ve gotten within the venture. No drawback, you reply. You add an $xlarge to the venture, and go about your day.
The next day, the designer makes a pleasant kind label, which once more has a brand new font measurement. This new measurement, although, is bigger than small, however smaller than medium.
Right here we go.
What do you have to name it? $small-medium? $small-2? $smedium? No matter you identify it, you received’t be proud of it. As a result of there isn’t any phrase for that.
Or do you have to possibly refactor it? Create a brand new $xsmall, and alter all situations of $small to $xsmall? After which you should utilize $small for the shape label? There’s a small threat that you’ll neglect to alter someplace and, hey, presto: a bug. What occurs subsequent time, when one thing is launched that has a bigger measurement than the $medium variable worth? Do we have now to refactor $massive and $xlarge too?
I counsel adhering to a scale, all the time. A simple repair could be to additional abstraction, maybe ditching numbers and sizes in favor of useful names, like $form-label as a substitute of $small-2 or $xsmall.
However think about having a set of font sizes like this:
$small: 12px;
$form-label: 14px;
$medium: 16px;
$massive: 24px;
That could be a damaged scale. It’s a measurement idea and a part idea combined collectively. It raises questions. Ought to an alert or a button be allowed to make use of $form-label? Yuck.
Possibly you’ve gotten a Greek factor occurring, naming the variables $alpha, $beta, $gamma? Let me ask you then, what’s then larger than $alpha? $alpha-large? Or wait, is $alpha the small one?
I’ve additionally seen names like $button-font-size, $label-font-size, $blockquote-font-size. That appears to me like one variable per ingredient used, as a substitute of a scale, and sounds prefer it might be plenty of duplicated code if the identical worth is being utilized in a number of locations, however with totally different names.
Maybe you’re working with one base font measurement and percentages solely? Positive, however I’d say you want variables for the chances. That’s how Geoff handles font sizing and even he admits that the setup raises his personal eyebrows. Calculations with subjectively-named variables is perhaps clear to you, however crazy-looking and sophisticated for anybody else leaping into the venture.
h1 {
font-size: clamp(var(–text-size-large), calc(var(–text-size-base) * var(–text-size-scaler)), var(–text-size-huge));
}
We’d like a greater system
Including and eradicating stuff continually is the way in which we need to work. That is modern-day growth — MVP, Agile, and all the opposite sizzling buzzwords.
What we want is a scale syntax that enables room for adjustments. Including a brand new measurement to the dimensions must be straightforward with out introducing breaking adjustments. I’m pondering of a sort of scale that’s each versatile and infinite. It have to be extra refined than $small, $medium and $massive.
It must be even be descriptive and intuitive. Ideally, you shouldn’t need to search for the variable names within the settings file or the config, or wherever you retailer these items. I don’t have the slightest clue if $epsilon comes earlier than or after $sigma. Do you?
Utilizing current programs
Earlier than attempting to invent one thing new, is there an current syntax or system we are able to leverage? Listed below are a couple of I’ve encountered.
Worldwide system of units
Absolutely, you’re accustomed to phrases like “kilobyte” and “megabyte.” Europeans are very used to “millimeter” and “centimeter.” Different examples are “giga,” “tera,” and “peta.” These prefixes can be utilized for size, weight, quantity and extra. May a $centi font measurement work? It’s intuitive to a sure extent, that’s, should you’re accustomed to the metric system. It is a finite scale. And there’s no room so as to add new sizes as a result of they’re already set.
Conventional point-size names
Lengthy earlier than computer systems and desktop publishing, books and newspapers had been printed with lead sort. The kind setters had totally different names for various sizes. The sizes have a reference to a degree measurement (pt) and will, in principle, be used for pixel sizes (px).
The kind sizes on this system are known as “Nonpareil,” “Pica,” “Cicero,” and “Nice Primer,” simply to call a couple of. The names are totally different relying on continent and nation. Plus, the identical identify can have totally different sizes, so… fairly complicated.
That mentioned, I do like this method in a means as a result of it might be like paying respect to an previous craftsmanship from occasions previous. However the names are so bizarre and particularly meant for sort sizing, that it looks like a stretch to make use of for issues like breakpoints and spacing.
Putting on a regular basis objects on a scale
How about utilizing stuff from our on a regular basis life? Say chili peppers.
There are various sorts of chili peppers. The $habanero, is hotter than the $cayenne, which is hotter than the $jalapeno. That may be enjoyable, yeah?
However as a lot as I benefit from the thought of writing font-size: $tabasco, I see two issues. For those who’re not into peppers, you can not know which pepper is hotter than one other pepper — so, it’s not universally intuitive. Additionally, the bell pepper is 0 on the Scoville scale, and nothing is under that. Carolina Reaper is the most well liked pepper on the planet, so the dimensions is finite.
And yeah, peppers scale-wise are usually not bigger or smaller, they’re hotter. Unhealthy idea. Possibly one thing extra widespread, like varieties of balls?
There‘s a wide variety of various sorts of balls. You’ve gotten handballs, soccer balls, volleyballs, and many others. Want one thing bigger than a drugs ball? Use $seashore. One thing smaller than a tennis ball? Use $pingpong. That is very intuitive, as I’d think about everybody has performed with all types of balls in some unspecified time in the future, or no less than are acquainted of them from sports activities.
However is a ping pong ball bigger than a golf ball? Who is aware of? Additional, a bowling ball and a soccer ball are literally the identical measurement. So… once more, not excellent.
Scaling as much as planets may work, however you would need to be educated in astronomy.
How about straight-up numbers? We’re unable to make use of numbers alone as a result of instruments like stylelinter will protest. However would one thing like this work:
$font-14: 14px;
$font-16: 16px;
$font-24: 24px;
Properly, it’s infinite as there may be all the time room for brand spanking new additions. However it’s additionally extremely particular, and there are some downsides to have the precise worth be a part of the identify like that. Let’s assume that $font-18 is utilized in plenty of locations. And now, they are saying, all locations with 18px have to be modified to 19px (as a result of causes). Now we have to rename the variable from $font-18 to $font-19 then change the worth of $font-19 from 18px to 19px. And that’s earlier than we lastly replace all locations utilizing $font-18 to $font-19. That is virtually like utilizing uncooked CSS. Low rating for maintainability.
What concerning the animal kingdom?
Mom Nature has offered a myriad of species on this earth, which is useful on this state of affairs. Think about one thing like this:
$mouse: 12px;
$canine: 16px;
$hippo: 24px;
Want one thing smaller than a mouse? Use $bee, $ant or $flea. Bigger than a bear? Attempt $moose or $hippo. Bigger than an elephant? Properly, you’ve gotten the $whale, or heck, we are able to go prehistoric and use $t-rex. There’s all the time an animal to squeeze in right here. Very versatile, very intuitive, additionally infinite (virtually). And enjoyable, too — I wouldn’t thoughts doing font-size: $squirrel. 🤩
However then once more, even that may require needing to reference the variables, except we all know precisely which animals are contained in our zoo of font sizes. However possibly that’s not an enormous deal so long as it scales.
I’ve spent means an excessive amount of time pondering this
Or have I? The code base is the place you spend your working hours. It’s your work atmosphere, identical to chairs and displays. And the office must be a pleasant place.
How do you deal with your font measurement scales? Do you’ve gotten one system for fonts and one other for issues like margins? Can anybody leap proper into your code and perceive how every little thing is organized? Please inform within the feedback!
The submit The Dilemma of Naming Font Dimension Variables appeared first on CSS-Tips. You’ll be able to assist CSS-Tips by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!