Ever been annoyed that one Webpage has text far too small, while the next is far too large? This style does it's best to fix that, without breaking the layout.
Global Normalize by baerbeisser

Details
Authorbaerbeisser
LicenseCC-BY-SA-4.0
Categoryglobal
Created
Updated
Code size6.2 kB
Code checksum996b3468
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This style has font-size: 1rem as its base. Change your browser settings if it's too big or small for your taste.
Continuously tested and improved in the wild.
Source code
/*
==UserStyle==
@name Global Normalize
@namespace https://example.edu/
@matches <all_urls>
@description Carefully balanced stylesheet to keep HTML elements consistent across the web. Works best with site-specific fonts disabled. (Change your browser settings if it's too big or too small).
@version 2.2.2
@author Baerbeisser
@license CC-BY-SA-4.0
==/UserStyle==
*/
/* https://html.spec.whatwg.org/multipage/rendering.html */
/**
* font
*/
/* i use 1rem instead of names (small,medium), because 1rem is 1rem but names representation differs greatly */
/* people doing dumb shit like font-size: 60% in html root tag */
html, body, :root {
font-size: 1rem !important;
}
/* always ugly, why people keep doing this? */
h1,h2,h3,h4,h5,h6 { text-shadow: none; }
/* setting baseline */
h1,h2,h3,h4,h5,h6,
:is(h1,h2,h3,h4,h5,h6) a {
font-size: 1.3rem !important;
line-height: 1.6rem !important;
font-weight: bold !important;
}
/* show anchor tags *
article a::after {
content: " (" attr(href) ") ";
color: blue;
}*/
html, :root,
a, p, span, em,
blockquote, strong,
input, summary,
div, div > * {
font-size: 1rem !important;
font-size-adjust: none !important;
line-height: 1.5rem !important;
}
a:hover { text-decoration: underline; }
h1,h1 >:is(a,span,strong),.h1 {font-size: 1.8rem !important; line-height: 2rem !important;}
h2,h2 >:is(a,span,strong),.h2 {font-size: 1.3rem !important; line-height: 1.5rem !important;}
h3,h3 >:is(a,span,strong),.h3 {font-size: 1.15rem !important; line-height: 1.4rem !important;}
h4,h4 >:is(a,span,strong),.h4 {font-size: 1rem !important; line-height: 1.2rem !important;}
h5,h5 >:is(a,span,strong),.h5 {font-size: 0.85rem !important; line-height: 1rem !important;}
h6,h6 >:is(a,span,strong),.h6 {font-size: 0.7rem !important; line-height: 1rem !important;}
a >:is(h1,h2,h3,h4,h5,h6)
{ font-size: 1.4rem !important; line-height: 2rem !important; }
:is(h1,h2,h3,h4,h5,h6) >span, /* wikipedia subtitle */
li :is(h1,h2,h3,h4,h5,h6) >:is(a,span) { font-size: 1rem !important;}
article, section,
[id*="blog"i],
[class*="blog"i],
[id*="content"i],
[class*="content"i] {
font-size: 1rem !important;
}
.inner-wrap,
.mh-content,
:is(.container,#content):has(.sidebar):is(.inside-article,.entry-content,.post) {
width: auto !important;
max-width: var(--content-max-width) !important;
}
/**
* lists
*/
dir, dd, dl, dt, menu, ol, ul {
/*display: block !important;*/
font-size: 1rem !important;
}
li, li:is(p,a) {
text-align: match-parent;
font-size: 1rem !important;
}
article, aside,
h1, h2, h3, h4, h5, h6,
hgroup, nav, section {
display: block;
/*margin-block-start: 1rem;
margin-block-end: 1rem;*/
}
/* should we or should we not?
input ~ div {
height: 1.2rem !important;
width: 1.2rem !important;
max-height: 1.5rem !important;
max-width: 1.5rem !important;
}*/
/* side-navs */
aside, nav a,
.reference > a { font-size: 80% !important; }
/**
* codeblocks
*/
span > samp,
span > code,
.s-prose :not(.s-code-block) > code,
[class^="code-"],[id^="code-"],
[class$="-code"],[id$="-code"],
[class^="code-"] *,[id^="code-"] *,
[class$="-code"] *,[id$="-code"] *,
code, pre,
code span,
#highlight,
.highlight,
.ace_editor {
font-size: 0.9rem !important;
font-family: monospace;
overflow-x: scroll;
}
/**
* tables
*/
/*td:empty { display: none; }*/
table { display: table; }
caption { display: table-caption; }
colgroup, colgroup[hidden] { display: table-column-group; }
col, col[hidden] { display: table-column; }
thead, thead[hidden] { display: table-header-group; }
tbody, tbody[hidden] { display: table-row-group; }
tfoot, tfoot[hidden] { display: table-footer-group; }
tr, tr[hidden] { display: table-row; }
td, th { display: table-cell; }
colgroup[hidden], col[hidden],
thead[hidden], tbody[hidden], tfoot[hidden], tr[hidden] {
visibility: collapse;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
}
thead, tbody, tfoot, table > tr { vertical-align: middle !important; }
tr, td, td:has(>:is(li,div,p)), th {
vertical-align: inherit !important;
line-height: 1.3em !important;
font-size: 1rem !important;
}
thead {
font-size: medium !important;
line-height: 1.2em !important;
}
/*
* fixes for some frameworks
*/
:root {
--wb-ds-size-scale: 1; /* meteoschweiz.admin.ch, Adobe Experience Manager? */
}
/*
* fixes for some big sites doing stupid things
*/
.article-hero__title {
font-size: 1.8rem !important;
line-height: 2rem !important;
}
/* some forums making posts smaller because of font-size (??) */
.messageContent { min-width: 100%; }
h3.LC20lb,
h3 >a.l { /* Google search */
font-size: 1rem !important;
line-height: 1.2rem !important;
}
/* duckduckgo images scroll */
.tileview--grid .tile {
overflow-y: hidden;
}
/* github... listen, there's a <code> tag for code */
.blob-code-content > table *,
.highlight-source-shell * {
font-size: 0.8rem !important;
}
/*
* Experimental
*/
/* some sites really have no padding around text. Hope it breaks nothing */
body >p {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* why was this a bad idea again? */
div >p {
font-size: 1rem !important;
}
/*
article, section,
[id*="blog"i],
[class*="blog"i],
[id*="content"i],
[class*="content"i] {
min-width: 45rem !important;
}
article, section {
min-width: 45rem;
} breaks Galaxus */
/**
* view
*
main,
article,
article div {
max-width: var(--content-max-width) !important;
}
article img { max-width: 40rem; }
#container, .container,
#content, .content,
.post-inner { min-width: 50vw !important; }
*/
/* unbreak *
#js-repo-pjax-container { max-width: unset !important; }
*/
/* pages with article *and* sidebar squeezed in content are small already *
:is(.container,#content):not(:has(.sidebar)) {
min-width: 45rem;
}*/