Grid with any sized or any color for body

Latest Version

Version
0.0.1
Update
July 4, 2022
Size
17.54KiB
Developer
moz.one
Category
Users
33
Rating
0 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
Storage
ActiveTab
Scripting
See more

Grid Background Extension

Why is Vertical Rhythm an Important Typography Practice?

You probably heard of the term Vertical Rhythm if you researched a little about typography on the web. It’s one of the most important practices when working with typography. I’ve used Vertical Rhythm on all my sites ever since I read about it.

One day, it struck me that I haven’t had a clue why vertical rhythm was important. Two more questions quickly arose following that thought: “How does Vertical Rhythm improve the design of the site? What lessons can I draw from Vertical Rhythm so I can improve my design?”

I decided to find out why. Here are my thoughts.

Let’s begin the article with some context so we’re on the same page.

What is Vertical Rhythm?
Vertical Rhythm is a concept that originated from print typography (I think). In Vertical Rhythm, we try to keep vertical spaces between elements on a page consistent with each other.

This is often done with the help of a baseline – A common denominator used to create the consistent spaces.

In practice, we often visualize the baseline in print design by overlaying our page with a baseline grid as shown below...

Reading it: https://zellwk.com/blog/why-vertical-rhythms/
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Grid Background", "description": "Grid with any sized or any color for body", "version": "0.0.1", "icons": { "32": "/images/favicon-32x32.png", "48": "/images/favicon-48x48.png", "128": "/images/favicon-128x128.png" }, "homepage_url": "https://moz.one/", "permissions": ["storage", "activeTab", "scripting"], "commands": { "_execute_action": { "suggested_key": { "default": "Ctrl+G", "mac": "MacCtrl+G" } } }, "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }}
Read more