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 |
Css3 loader | Clknap | 2,391 Kb |
CSS Tooltips | Darylldoyle | 2,599 Kb |
Project_one | MOHIM | 9,592 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Commuter Line Tokyu 8500 | Pedox | 7,031 Kb |
Hello People | Danburrows | 2,365 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
React Markdown Previewer | C0d0er | 3,190 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!