Fix font size variables to resolve to exact pixels

WordPress · Nov 1, 2018 · 934d8d4 · 934d8d4
1 parent afe66e9
commit 934d8d4
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 141 deletions.
diff --git a/sass/blocks/_blocks.scss b/sass/blocks/_blocks.scss
@@ -199,7 +199,7 @@
 		li {
 			color: $color__text-light;
 			font-family: $font__heading;
-			font-size: calc(#{$font__size_base} * #{$font__size-lg / 1em} );
+			font-size: calc(#{$font__size_base} * #{$font__size-lg} );
 			font-weight: bold;
 			line-height: $font__line-height-heading;
 

diff --git a/sass/site/secondary/_widgets.scss b/sass/site/secondary/_widgets.scss
@@ -28,7 +28,7 @@
 		li {
 			color: $color__text-light;
 			font-family: $font__heading;
-			font-size: calc(#{$font__size_base} * #{$font__size-lg / 1em} );
+			font-size: calc(#{$font__size_base} * #{$font__size-lg} );
 			font-weight: bold;
 			line-height: $font__line-height-heading;
 

diff --git a/sass/typography/_typography.scss b/sass/typography/_typography.scss
@@ -1,6 +1,6 @@
 
 html {
-	font-size: $font__size_base;
+	font-size: 100%;
 }
 
 body {
@@ -9,7 +9,7 @@ body {
 	color: $color__text-main;
 	font-family: $font__body;
 	font-weight: 400;
-	font-size: 1em;
+	font-size: $font__size_base;
 	line-height: $font__line-height-body;
 	margin: 0;
 	text-rendering: optimizeLegibility;

diff --git a/sass/variables-site/_fonts.scss b/sass/variables-site/_fonts.scss
@@ -5,17 +5,16 @@ $font__heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen
 $font__code: Menlo, monaco, Consolas, Lucida Console, monospace;
 $font__pre: "Courier 10 Pitch", Courier, monospace;
 
-$font__size_base: 22px;
-$font__size-ratio: 1.125;
+$font__size_base: 1.375rem;
 
-$font__size-xxs:   1em / (1.5 * $font__size-ratio);
-$font__size-xs:    1em / (1.25 * $font__size-ratio);
-$font__size-sm:    1em / (1 * $font__size-ratio);
-$font__size-md:    1em * (1 * $font__size-ratio);
-$font__size-lg:    1em * (1.5 * $font__size-ratio);
-$font__size-xl:    1em * (2 * $font__size-ratio);
-$font__size-xxl:   1em * (2.5 * $font__size-ratio);
-$font__size-xxxl:  1em * (3 * $font__size-ratio);
+$font__size-xxs:   0.875rem;
+$font__size-xs:    1rem;
+$font__size-sm:    1.25rem;
+$font__size-md:    1.375rem;
+$font__size-lg:    1.75rem;
+$font__size-xl:    3rem;
+$font__size-xxl:   4rem;
+$font__size-xxxl:  4.5rem;
 
 $font__line-height-body: 1.8;
 $font__line-height-pre: 1.6;

diff --git a/style-editor-frame.css b/style-editor-frame.css
@@ -18,7 +18,7 @@ body.block-editor-page .block-editor .editor-post-title__block:before {
 }
 
 body.block-editor-page .block-editor .editor-post-title__block:before {
-  width: 2.8125em;
+  width: 4rem;
   margin-top: 0;
   margin-bottom: 0;
   margin-left: 1em;
@@ -28,13 +28,13 @@ body.block-editor-page .block-editor .editor-post-title__block:before {
 
 body.block-editor-page .block-editor .editor-post-title__block .editor-post-title__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-size: 2.8125em;
+  font-size: 4rem;
 }
 
 /** === Default Appender === */
 body.block-editor-page .block-editor .editor-default-block-appender__content {
   font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-  font-size: 22px;
+  font-size: 1.375rem;
 }
 
 /** === Off-Center Content === */

diff --git a/style-editor.css b/style-editor.css
@@ -28,13 +28,13 @@ when Gutenberg supports styling those variations more intuitively.
 
 /** === Base Typography === */
 body {
-  font-size: 22px;
+  font-size: 1.375rem;
   font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
   color: #111;
 }
 
 p {
-  font-size: 22px;
+  font-size: 1.375rem;
 }
 
 h1,
@@ -47,7 +47,7 @@ h6 {
 }
 
 h1 {
-  font-size: 2.25em;
+  font-size: 3rem;
 }
 
 h1:before {
@@ -61,12 +61,12 @@ h1:before {
 
 @media only screen and (min-width: 768px) {
   h1 {
-    font-size: 2.8125em;
+    font-size: 4rem;
   }
 }
 
 h2 {
-  font-size: 1.6875em;
+  font-size: 1.75rem;
 }
 
 h2:before {
@@ -80,24 +80,24 @@ h2:before {
 
 @media only screen and (min-width: 768px) {
   h2 {
-    font-size: 2.25em;
+    font-size: 3rem;
   }
 }
 
 h3 {
-  font-size: 1.6875em;
+  font-size: 1.75rem;
 }
 
 h4 {
-  font-size: 1.125em;
+  font-size: 1.375rem;
 }
 
 h5 {
-  font-size: 0.88889em;
+  font-size: 1.25rem;
 }
 
 h6 {
-  font-size: 0.71111em;
+  font-size: 1rem;
 }
 
 a {
@@ -131,15 +131,15 @@ a:focus {
 figcaption,
 .gallery-caption {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-size: 0.71111em;
+  font-size: 1rem;
   line-height: 1.6;
   color: #767676;
 }
 
 /** === Paragraph === */
 .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-size: 3.375em;
+  font-size: 4.5rem;
   line-height: 1;
   font-weight: bold;
   margin: 0 0.25em 0 0;
@@ -149,7 +149,7 @@ figcaption,
 .wp-block-cover h2,
 .wp-block-cover .wp-block-cover-text {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-size: 2.25em;
+  font-size: 3rem;
   font-weight: bold;
   line-height: 1.4;
 }
@@ -195,15 +195,15 @@ body[data-type="core/cover"][data-align="right"] .wp-block-cover-text {
 .wp-block-gallery .blocks-gallery-image figcaption,
 .wp-block-gallery .blocks-gallery-item figcaption,
 .wp-block-gallery .gallery-item .gallery-caption {
-  font-size: 0.71111em;
+  font-size: 1rem;
   line-height: 1.6;
 }
 
 /** === Button === */
 .wp-block-button .wp-block-button__link {
   line-height: 1.8;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-size: 0.88889em;
+  font-size: 1.25rem;
   font-weight: bold;
 }
 
@@ -234,13 +234,13 @@ body[data-type="core/cover"][data-align="right"] .wp-block-cover-text {
 }
 
 .wp-block-quote.is-large, .wp-block-quote.is-style-large {
-  margin-top: 2.8125em;
-  margin-bottom: 2.8125em;
+  margin-top: 4rem;
+  margin-bottom: 4rem;
 }
 
 .wp-block-quote.is-large p,
 .wp-block-quote.is-style-large p {
-  font-size: 1.6875em;
+  font-size: 1.75rem;
   line-height: 1.3;
   margin-bottom: 0.5em;
   margin-top: 0.5em;
@@ -250,7 +250,7 @@ body[data-type="core/cover"][data-align="right"] .wp-block-cover-text {
 .wp-block-quote footer,
 .wp-block-quote .wp-block-quote__citation {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-size: 0.71111em;
+  font-size: 1rem;
   line-height: 1.6;
   color: #767676;
 }
@@ -301,7 +301,7 @@ body[data-type="core/pullquote"][data-align="left"] p,
 body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
 body[data-type="core/pullquote"][data-align="right"] p {
-  font-size: 1.6875em;
+  font-size: 1.75rem;
   font-style: italic;
   line-height: 1.3;
   margin-bottom: 0.5em;
@@ -318,15 +318,15 @@ body[data-type="core/pullquote"][data-align="right"] p {
   body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
   body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
   body[data-type="core/pullquote"][data-align="right"] p {
-    font-size: 2.25em;
+    font-size: 3rem;
   }
 }
 
 body[data-type="core/pullquote"] .wp-block-pullquote__citation,
 body[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation,
 body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-size: 0.71111em;
+  font-size: 1rem;
   line-height: 1.6;
   text-transform: none;
 }
@@ -370,7 +370,7 @@ body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citati
 
 .wp-block-file .wp-block-file__button {
   line-height: 1.8;
-  font-size: 0.88889em;
+  font-size: 1.25rem;
   font-weight: bold;
   background-color: #0073aa;
   border-radius: 5px;
@@ -398,14 +398,14 @@ body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citati
 }
 
 .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
-  width: 2.25em;
+  width: 3rem;
   margin-left: 0;
 }
 
 .wp-block-separator.is-style-dots:before {
   color: #767676;
-  font-size: 1.6875em;
-  letter-spacing: 0.88889em;
+  font-size: 1.75rem;
+  letter-spacing: 1.25rem;
 }
 
 /** === Latest Posts, Archives, Categories === */
@@ -427,7 +427,7 @@ ul.wp-block-archives li,
 .wp-block-categories li,
 .wp-block-latest-posts li {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-size: 1.6875em;
+  font-size: 1.75rem;
   font-weight: bold;
   line-height: 1.2;
 }
@@ -486,7 +486,7 @@ ul.wp-block-archives li ul,
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-  font-size: 0.71111em;
+  font-size: 1rem;
 }
 
 /** === Classic Editor === */
@@ -508,7 +508,7 @@ ul.wp-block-archives li ul,
 
 .wp-block-freeform blockquote cite {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-size: 0.71111em;
+  font-size: 1rem;
   font-style: normal;
   line-height: 1.6;
   color: #767676;