Introduction to CSS font
Most developers work on different responsive screens, and the most common issue other than the design is font. Sometimes the font gets shrunk, and sometimes the font gets over zoomed-in with different screen sizes.
Most of the time, some of the font families are not supported by browsers, and it creates multiple issues and destroys the feel and UI of the web page.
So now the question arises of how we can resolve this issue. Now we have the answer for it.
The splitting of code into components or numerous bundles which can be loaded when there is a demand or in parallel. Click to explore about, Code-Splitting in ReactJs
What is CSS font?
CSS font size adjusts all the measurement units in which font sizes are present, like rem, em, px and viewport units. It is the best solution for responsive font sizes and font families as we know that most of the time, font families are not browser compatible, so font size adjustment is the solution for it.
We can apply the font size adjust property to IDs and Classes and element selectors. According to the screen resolution, it is the best hack for the sudden decrease in font sizes.
Syntax Introduction
Font Size
CSS font-size property shows glyphs of an assumed height based on the font. However, for a non-scalable font, the absolute unit of the font size is matched with the set size of the font. The scalable factor is applied to calculate the font size for the scalable font.
- Absolute Number: It refers to the computed font (value) size.
- Relative Size: It has the value according to computed font size and font table.
- Length Percentage: Specify that the font size is absolute
Font Size Adjust
When the font sizes are not behaving properly, we can use the font-size adjust property.
If we want to adjust the font-size property, the elements should be modified based on the height of the lowercase letter instead of the uppercase letter.
- None: Specifies that the font's x-axis height is not preserved.
- Number: This value refers to the value of the Number of first used fonts, and then the rest are available, which are scaled according to the below formula.
c = (a/a’) s
Where
For Example
If 18px Roboto (with an aspect value of 0.60) was unavailable and the next given font had an aspect value of 0.50, the font size of the substitute font used would be 18*(0.60/0.50) = 21.75px
Impact on Performance
When the font sizes are automatically responsive throughout the page so it would help us to increase our webpage performance, the impact of this method is very positive, and almost every developer should use this in their respective projects.
Calibrating Fonts
You, as the author, determine the calibration target(s) for normalizing the font scale. You might normalize on Times, Arial, or system font, then adjust custom fonts to match. Or, you might adjust local fonts to match what you download.
Remote Target
It adjusts local fonts towards downloaded fonts.
Conversational user interfaces is as easy to use and talk about as talking or having information from a human being. Click to explore about, Principles for Best Conversational User Interfaces
Implementation of CSS
Consider the following snippet, which adjusts a locally available font to match a small src custom font. A small custom font is a target for calibration, a brand font perhaps:
In the above example, we have the local font family (Arial) and the adjusted font-family Arial for the brand. In this case, the Arial font will calibrate according to the required size and provide smoothness according to the responsiveness.
Having a brand typeface as the target is also how Malte's calculator works. Choose a Google Font, and it will calculate how to adjust Arial to swap with it seamlessly. Here's an example of Roboto CSS from the calculator, where Arial is loaded and named "Roboto-fallback":
This process is a blessing for designers and developers.
Note:
Local Target
It adjusts downloaded fonts against local fonts.
In this case, we have an advantage for rendering things without any changes or adjustments.
Now after both the targets, we have to do a Final Tuning for a smoother user experience related to
fonts while shifting to multiple devices.
Final Tuning
Ascent Override
It defines the height above the baseline of a font.
Descent Override
It defines the height below the baseline of the font.
Line Gap Override
It defines the line-gap metric for the font.
CSS is near revolutionizing the concept of responsive design by adding some new queries. Click to explore about, Component-Driven Responsive Design
How does CSS font-size-adjust Works?
In this particular image, we are using the comic sans font family for left-hand side words, and they have an aspect value of 0.53, and Calibri for the right-hand side words has an 0.47. So to resolve this issue, we have to take the highest aspect value in font-size-adjust.
The CSS font adjusts property's actual value impacts the predefined or used value of the 'Font-size' but does not impact its actual value. It only affects the dimension of the relative units supported by the font metrics like rem, ex, ch, etc., but it does not damage the scale of em units.
As we know that line-height values are defined in numerical, the CSS font-size-adjust property does not modify the used line-height value, but it adjusts the font-size value.
Implementation
HTML
<!doctype html><head><title>font-size-adjust Example</title><link rel="stylesheet" href="style.css"></head><body><p>Font Without adjustment.</p><p class="adjust">Font With adjustment.</p><hr><p>Previewed on {Browser}.</p></body></html>
CSS
p {font: 20px Verdana, Helvetica, sans-serif;}.adjust {font-size-adjust: 0.78;}
Conclusion
Now we have learned about the CSS property font-size-adjust and how to use it, and the parameters of this CSS property. This CSS was introduced in CSS 2, and it was removed in CSS 2.1 and again added in CSS 3 version. But it is only supported in Mozilla Firefox from 43 to 30, and in Chrome, it runs under specific settings, and we have to enable it, but it is not compatible with the Safari browser. Hence we cannot use this property if we focus more on the safari browser and refer to the below image for compatibility.
- Discover more about Fluid Typography Best Practices
- Read more about User Experience Design
- Know more about Performance Monitoring
