Arrg how do I get font-sizes to be responsive now that i have a responsive page? (answers here)
This article is focused specifically on font sizes — the various types of font “methods” for lack of a better term — and how to figure out what will work on all devices (it is possible). we are not going into breakpoints and other topics covered 1000s of times.
If you have done any significant (current) web development, you have likely dealt with:
* Mobile vs Laptop sizing issues
* @Media queries
* Font size issues (its readable on laptop but not on mobile)
* You aren't sure which library to use to help, if any!
Remember — the more libraries you include, (remote or local) the more the attack surface you are opening up on your site, so this makes the right headers critical. Keep it in mind, do regular pen tests on your own sites.
Two Libraries i have found to be insurmountably critical in designing my pages are not really ‘libraries’ but 2 style sheets: I recommend you look into them:
one more —
Our goals when it comes to text on our pages:
* Most Compliant (According to w3 standards as well as ARIA)
* Readability must be top notch (even for disabled people — Google ARIA)
* If our visitors have to zoom in or turn the device sideways — we did wrong
<!-- after you define your viewport and utf-8 in <head> -->
<link rel="stylesheet" href="https://yourdomain.com/css/reset.css">
<link rel="stylesheet" href="https://yourdomain.com/css/normalize.css">
<!-- I suggest unless you have a strong reason not to, put bigger libraries
like jQuery and Bootstrap .js files at the very bottom of the script before
the last tag inside body - This does not go for the CSS file associated with
bootstrap - put that below the normalize. Then put your custom style sheet -->
The only things I am going to state about the above is when i see this;
<link rel="stylesheet" href="//yourdomain.com/css/reset.css">
<link rel="stylesheet" href="//yourdomain.com/css/normalize.css">
<!-- I shudder when i see this
This is an incredibly bad practice which can open you up for plaintext http
attacks, what it means, is load the script defaulting to http then https
whatever is more convienent.
One more practice to get into is specifying the entire FQDN in the paths to
your resources, not just css/style.css but https://yourdomain.com/css/style.css
This is one step that just makes it a LITTLE harder to hack your site.
and in this day and age - you need all the help you can get
-->
Back on track with the topic, and keeping it short and sweet, lets discuss the various options available for sizing your fonts:
The following is a list and brief explanation of the options available:
1) Pixels (px):
* The most commonly used / basic and widely supported unit.
Fact making this not the best choice:
Absolute unit, meaning it does not scale with the rest of the elements.
^^^^^[ what this means is do not use it for responsive sites ] ^^^^^^^
2) Ems (em):
A *relative* unit that sizes fonts in relation to the font size of the parent element.
Useful for scalable and responsive designs.
^ Highly recommended for beginner
3) Rems (rem): Similar to ems, but relative to the root element's font size
(usually the html element). Provides more consistency than ems as
it avoids compounding. * THE BEST CHOICE ALONG WITH EM *
4) Percentages (%):
Another relative unit, where the size is a percentage of the parent
element's font size. Often used for responsive text sizing.
5) Viewport Width (vw) and Viewport Height (vh):
Relatively new units where 1vw is 1% of the viewport's width and 1vh is 1% of its height.
Great for creating truly responsive text that adjusts based on the size of the viewport.
6) Points (pt):
Traditionally used in print media (1pt = 1/72 inch).
Not recommended for screen display due to inconsistency in rendering across different devices.
7) Ex: Relative to the x-height of the current font (roughly the height of lowercase letters).
Not as widely used as em or rem.
8) Ch: Relative to the width of the "0" (zero) character in the selected font.
Useful for aligning text in monospace fonts.
9) Centimeters (cm), Millimeters (mm), and Inches (in):
Absolute units based on physical measurements.
*Not* commonly used for screen display due to varying screen densities
and sizes.
10) JS Library dependencies pre-defined keywords:
Includes values like small, medium, large, x-large, etc.
Offers a limited range of sizes and less fine-grained control.
11) Calc() Function:
Allows combining different units to calculate a font size.
Useful for complex responsive typography. Not recommended unless your
having a specific useOverall recommendation for Global Font Scaling: Use em/rem for font sizes to keep consistent scalability across the site. The rem unit is generally considered the most compliant and readable way for setting font sizes, as it combines flexibility with predictability.
Below is a *basic* overview of a conversion table to help you convert PX -> EM -> REM until you get the hang of it, or until you find an online conversion utility
// this is your basic conversion table that might want to have handy from now on
html { font-size: 16px; /* Base font size */ }
body { font-size: 1rem; /* 16px */ }
h1 { font-size: 2rem; /* 32px */ }
.small-text { font-size: 0.75rem; /* 12px */ }The best thing to do to learn this, after youve learned mobile design, is to look at the most amazing responsive sites you can find, and inspect them, find out how they are doing it!!
Until next time
dj substance
https://9x.network
