paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit 41b930a8a8ed7983ce3bc1c6abaaee917078f125
parent 5d20d9756f237384ee89bf675fec615c6cab5cda
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Thu, 28 May 2020 23:59:47 -0400

Publish new blog post, twice by accident

Diffstat:
Mpages/blog.md | 1+
Apages/blog/a-quick-rant-about-web-font-sizes.md | 40++++++++++++++++++++++++++++++++++++++++
Mpages/home.md | 6++----
Mpublic/feeds/sitewide-feed.xml | 15+++++++++++++++
Mpublic/sitemap.xml | 1+
5 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/pages/blog.md b/pages/blog.md @@ -20,6 +20,7 @@ href="https://social.paritybit.ca/@jbauer">Mastodon</a>. ### 2020 <ul> + <li>2020-05-28 <a href="blog/a-quick-rant-about-web-font-sizes">A Quick Rant About Web Font Sizes</a></li> <li>2020-05-27 <a href="blog/i-like-perl">I Like Perl</a></li> <li>2020-05-26 <a href="blog/choosing-a-self-hosted-git-service">Choosing a Self-Hosted Git Service</a></li> <li>2020-05-25 <a href="blog/going-from-user-to-contributor-with-foss">Going From User to Contributor With FOSS</a></li> diff --git a/pages/blog/a-quick-rant-about-web-font-sizes.md b/pages/blog/a-quick-rant-about-web-font-sizes.md @@ -0,0 +1,40 @@ +## A Quick Rant About Web Font Sizes + +[//]: # "A quick rant about font sizes on websites and what I did for my website." + +[//]: # "main.min.css" + +[//]: # + +<div class="byline"> +<b>Written By:</b> Jake Bauer | + <b>Posted:</b> 2020-05-28 | + <b>Last Updated:</b> 2020-05-28 +</div> + +Once I discovered how font sizes actually work in CSS, sites that lock the font +size by specifying it in some value of `px` annoy me to no end. I typically have +my browser's font size cranked up to 20px because it's way easier to read and I +don't need to strain my eyes just to fit more text on screen at once. + +For that reason, I used the CSS `max()` property to set my website's font size +to `max(18px, 100%)` which essentially tells the browser to render the site at +`18px` or the font size that the user set in their browser settings if they set +it to something higher than 18px. + +I was recently thinking, though, that this rule is basically useless. I may as +well just set the font size to `100%` and let the user pick what font size they +want to see my site in because different users have different preferences and +different accessibility needs. Therefore, who am I to decide what size the text +should be on my website for other people? + +That's my short rant on website font sizes. Just use some reasonable percent +value (like `100%`) and scale the rest of your font sizes based off of that. If +choosing a specific font size is necessary to make text fit in some specific box +or shape, consider scaling that whole box or re-design that section because it +wasn't going to be accessible anyways. + +_This is my thirty-second post for the +[#100DaysToOffload](https://social.paritybit.ca/tags/100DaysToOffload) +challenge. You can learn more about this challenge over at +[https://100daystooffload.com](https://100daystooffload.com)._ diff --git a/pages/home.md b/pages/home.md @@ -20,6 +20,8 @@ extent)! Access through `gopher://paritybit.ca` or `gemini://paritybit.ca`. src="/img/feed-icon.png" width="15" height="15" alt="Click for RSS Feed"/> </a> </div> +2020-05-28 <a class="feed-item" href="blog/a-quick-rant-about-web-font-sizes">A Quick Rant About Web Font Sizes</a> + 2020-05-27 <a class="feed-item" href="blog/i-like-perl">I Like Perl</a> 2020-05-26 <a class="feed-item" href="blog/choosing-a-self-hosted-git-service">Choosing a Self-Hosted Git Service</a> @@ -37,10 +39,6 @@ extent)! Access through `gopher://paritybit.ca` or `gemini://paritybit.ca`. 2020-05-19 <a class="feed-item" href="blog/attempting-to-replace-my-thinkpads-touchpad">Attempting to Replace My Thinkpad's Touchpad</a> -2020-05-18 <a class="feed-item" href="blog/trying-out-aerc">Trying Out aerc</a> - -2020-05-17 <a class="feed-item" href="blog/setting-up-gpg-keys-from-scratch">Setting Up GPG Keys from Scratch</a> - ### What is a Parity Bit? It is a bit (in the 1's and 0's sense) used in checking for errors in digital diff --git a/public/feeds/sitewide-feed.xml b/public/feeds/sitewide-feed.xml @@ -7,6 +7,21 @@ <description>The feed that covers all notable additions, updates, announcements, and other changes for the entire paritybit.ca website.</description> <item> + <title>A Quick Rant About Web Font Sizes</title> + <link>https://www.paritybit.ca/blog/a-quick-rant-about-web-font-sizes</link> + <guid>https://www.paritybit.ca/blog/a-quick-rant-about-web-font-sizes</guid> + <pubDate>Thu, 28 May 2020 23:57:15 -0400</pubDate> +<description><![CDATA[<h2 id="a-quick-rant-about-web-font-sizes">A Quick Rant About Web Font Sizes</h2> +<div class="byline"> +<p><b>Written By:</b> Jake Bauer | <b>Posted:</b> 2020-05-28 | <b>Last Updated:</b> 2020-05-28</p> +</div> +<p>Once I discovered how font sizes actually work in CSS, sites that lock the font size by specifying it in some value of <code>px</code> annoy me to no end. I typically have my browser’s font size cranked up to 20px because it’s way easier to read and I don’t need to strain my eyes just to fit more text on screen at once.</p> +<p>For that reason, I used the CSS <code>max()</code> property to set my website’s font size to <code>max(18px, 100%)</code> which essentially tells the browser to render the site at <code>18px</code> or the font size that the user set in their browser settings if they set it to something higher than 18px.</p> +<p>I was recently thinking, though, that this rule is basically useless. I may as well just set the font size to <code>100%</code> and let the user pick what font size they want to see my site in because different users have different preferences and different accessibility needs. Therefore, who am I to decide what size the text should be on my website for other people?</p> +<p>That’s my short rant on website font sizes. Just use some reasonable percent value (like <code>100%</code>) and scale the rest of your font sizes based off of that. If choosing a specific font size is necessary to make text fit in some specific box or shape, consider scaling that whole box or re-design that section because it wasn’t going to be accessible anyways.</p> +<p><em>This is my thirty-second post for the <a href="https://social.paritybit.ca/tags/100DaysToOffload">#100DaysToOffload</a> challenge. You can learn more about this challenge over at <a href="https://100daystooffload.com" class="uri">https://100daystooffload.com</a>.</em></p>]]></description> +</item> +<item> <title>I Like Perl</title> <link>https://www.paritybit.ca/blog/i-like-perl</link> <guid>https://www.paritybit.ca/blog/i-like-perl</guid> diff --git a/public/sitemap.xml b/public/sitemap.xml @@ -3,6 +3,7 @@ <url><loc>https://www.paritybit.ca</loc></url> <url><loc>https://www.paritybit.ca/home</loc></url> <url><loc>https://www.paritybit.ca/blog</loc></url> + <url><loc>https://www.paritybit.ca/blog/a-quick-rant-about-web-font-sizes</loc></url> <url><loc>https://www.paritybit.ca/blog/i-like-perl</loc></url> <url><loc>https://www.paritybit.ca/blog/choosing-a-self-hosted-git-service</loc></url> <url><loc>https://www.paritybit.ca/blog/going-from-user-to-contributor-with-foss</loc></url>