Basic fluid typography with vw and issues with full-page zoom - completely broken example
How do I make an basic fluid typography with vw and issues with full-page zoom - completely broken example?
What is a basic fluid typography with vw and issues with full-page zoom - completely broken example? How do you make a basic fluid typography with vw and issues with full-page zoom - completely broken example? This script and codes were developed by Patrick H. Lauke on 25 September 2022, Sunday.
Basic fluid typography with vw and issues with full-page zoom - completely broken example - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic fluid typography with vw and issues with full-page zoom - completely broken example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p class="reference">Reference paragraph set to an absolute <code>16px</code>. This demonstration uses the base font size (fairly arbitrarily chosen) of <code>3vw</code>.</p>
<h1>Heading 1 at <code>1.5em</code></h1>
<h2>Heading 2 at <code>1.15em</code></h2>
<p>Main body text set to <code>1em</code>.</p>
<p class="reference">Note that while this result in fluid font sizing that adapt to different viewport widths, it remains unaffected by desktop browser zoom. In modern desktop browsers, full-page zoom effectively manipulates the mapping of CSS pixels to viewport/device pixels - for instance, zooming to 200% keeps the window dimensions the same (obviously), but halves the viewport width and height while simultaneously doubling the browser's dots-per-pixel. This means that <code>1vw</code> remains at the same rendered size on screen, regardless of zoom setting.</p>
<p class="reference">Using purely <code>vw</code>/<code>vh</code> is therefore quite useless in practice, as the resulting page will become un-zoomable (failing <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" target="blank">WCAG 2.0 1.4.4 Resize text</a>). Additionally, this of course also runs the risk of having a font size that scales far too small/large on differently sized viewports. An initial fix is to introduce a further element (which is unaffected by viewport size) to the font size <a href="https://codepen.io/patrickhlauke/pen/NbeobR" target="blank">using actual CSS <code>calc(...)</code> calculations</a>.</p>
</body>
</html>Basic fluid typography with vw and issues with full-page zoom - completely broken example - Script Codes CSS Codes
/* base font */
html { font-size: 3vw; font-family: Arial, Helvetica, sans-serif; }
/* from here on out, define everything else relative to fluid root size */
h1 { font-size: 1.5em; }
h2 { font-size: 1.15em; }
p { font-size: 1em; }
/* reference font size in absolute CSS pixels */
p.reference { font-size: 16px; }
| Developer | Patrick H. Lauke |
| Username | patrickhlauke |
| Uploaded | September 25, 2022 |
| Rating | 3 |
| Size | 2,339 Kb |
| Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
| Name | Username | Size |
| A Pen by Markku Lehmonen | SharpDal | 7,804 Kb |
| Blockquote design | Sjmcpherson | 1,863 Kb |
| Fireworks Show | Arianalynn | 3,048 Kb |
| Sticky footer testing | 75th | 1,649 Kb |
| Testing Portfolio Page | Sideshowli | 3,395 Kb |
| Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
| A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
| Contact | GanNichiHa | 2,514 Kb |
| React Vote Component | Souporserious | 5,465 Kb |
| Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!