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
Size5.0 kB
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/
@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 small).
@version 2.2.1
@author Baerbeisser
@license CC-BY-SA-4.0
==/UserStyle==
*/
/* https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings */
/**
* font
*/
/* 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.5rem !important;
font-weight: bold !important;
}
/* show anchor tags *
article a::after {
content: " (" attr(href) ") ";
color: blue;
}*/
html, :root,
a, p, span,
blockquote, strong,
input, summary,
div, div > * {
font-size: 1rem !important;
font-size-adjust: 0.55 !important;
line-height: 1.6rem !important;
}
a:hover { text-decoration: underline; }
h1, .h1 {font-size: 1.8rem !important; line-height: 2rem !important;}
h2, .h2 {font-size: 1.3rem !important; line-height: 1.5rem !important;}
h3, .h3 {font-size: 1.15rem !important; line-height: 1.4rem !important;}
h4, .h4 {font-size: 1rem !important; line-height: 1.2rem !important;}
h5, .h5 {font-size: 0.85rem !important; line-height: 1rem !important;}
h6, .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; }
article, section,
[id*="blog"i],
[class*="blog"i],
[id*="content"i],
[class*="content"i] {
font-size: 1rem !important;
/*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;
}*/
.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: initial !important;
}
article, aside,
h1, h2, h3, h4, h5, h6,
hgroup, nav, section {
display: block;
/*margin-block-start: 1rem;
margin-block-end: 1rem;*/
}
/* 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;
}
/* github... listen, there's a <code> tag for code */
.blob-code-content > table *,
.highlight-source-shell * {
font-size: 0.8rem !important;
}
/**
* 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;
}
h3.LC20lb,
h3 >a.l { /* Google search */
font-size: 1rem !important;
line-height: 1.2rem !important;
}