Change fonts for improved readability
Key changes: - Change main font to Roboto Slab for enhanced readability. - Change code font to 'Source Code Pro' for consistent monospace code rendering. - Import and set code font explicitly for uniform appearance across platforms. - Update Slabo 27px (logo font) version from v6 to v14. - Update Yesteryear (cursive font) version from v8 to v18. - Drop support for historic browser-specific formats, retaining only WOFF2 for modern and TTF for legacy browsers. - Use `font-display: swap` to improve perceived load times and minimize layout shifts. Supporting changes: - Simplify font-weight usage to 'normal' and 'bold' for consistency. - Adjust inline code padding for better scalability and prevent overflow. - Introduce `$font-main` as main font variable. - Remove specification of main font as it's best practice to rely on the default font defined on `body` style. - Specify font in code area to ensure it uses the code font consistently as the rest of the application. - Remove local font search through `local` to simplify the import logic and prioritize consistency over performance. - Import bold font explicitly (`font-weight: 700`) for smooth and consistent rendering. - Move `font-family` definitions to `_typography.scss` to better adhere to the common standards and conventions. - Refactor font variables to have `font-family-` prefix instead of `font-` to improve clarity and differentiation between `font-size` variables. - Rename 'artistic' font to 'cursive' for preciseness and clarity. - Use smaller font sizes to match the new main font size, as Roboto Slab is relatively larger. - Add missing fallbacks for serif fonts to improve fault tolerance. - Change padding slightly on toggle switch for revert buttons to align well with new main font and its sizing.
This commit is contained in:
undergroundwires
@@ -1,35 +1,74 @@
|
||||
// https://google-webfonts-helper.herokuapp.com/fonts
|
||||
|
||||
@use "@/presentation/assets/styles/vite-path" as *;
|
||||
|
||||
/* slabo-27px-regular - latin-ext_latin */
|
||||
// This file should only contain @font-face definitions
|
||||
// Helpful resource: https://gwfh.mranftl.com/fonts
|
||||
|
||||
/* slabo-27px-regular - latin_latin-ext */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
|
||||
font-family: 'Slabo 27px';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('#{$base-assets-path}/fonts/slabo-27px-v6-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local('Slabo 27px'), local('Slabo27px-Regular'),
|
||||
url('#{$base-assets-path}/fonts/slabo-27px-v6-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('#{$base-assets-path}/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('#{$base-assets-path}/fonts/slabo-27px-v6-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('#{$base-assets-path}/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('#{$base-assets-path}/fonts/slabo-27px-v6-latin-ext_latin-regular.svg#Slabo27px') format('svg'); /* Legacy iOS */
|
||||
src: url('#{$base-assets-path}/fonts/slabo-27px-v14-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
url('#{$base-assets-path}/fonts/slabo-27px-v14-latin_latin-ext-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
||||
}
|
||||
|
||||
/* yesteryear-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Yesteryear';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('#{$base-assets-path}/fonts/yesteryear-v8-latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local('Yesteryear'), local('Yesteryear-Regular'),
|
||||
url('#{$base-assets-path}/fonts/yesteryear-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('#{$base-assets-path}/fonts/yesteryear-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('#{$base-assets-path}/fonts/yesteryear-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('#{$base-assets-path}/fonts/yesteryear-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('#{$base-assets-path}/fonts/yesteryear-v8-latin-regular.svg#Yesteryear') format('svg'); /* Legacy iOS */
|
||||
src: url('#{$base-assets-path}/fonts/yesteryear-v18-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
url('#{$base-assets-path}/fonts/yesteryear-v18-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
||||
}
|
||||
|
||||
$font-normal : 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
||||
$font-artistic : 'Yesteryear', cursive;
|
||||
$font-main : 'Slabo 27px';
|
||||
/* roboto-slab-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('#{$base-assets-path}/fonts/roboto-slab-v34-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
url('#{$base-assets-path}/fonts/roboto-slab-v34-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
||||
}
|
||||
|
||||
/* roboto-slab-regular - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('#{$base-assets-path}/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
url('#{$base-assets-path}/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
||||
}
|
||||
/* roboto-slab-700 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('#{$base-assets-path}/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
url('#{$base-assets-path}/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
||||
}
|
||||
|
||||
/* source-code-pro-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Source Code Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('#{$base-assets-path}/fonts/source-code-pro-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
url('#{$base-assets-path}/fonts/source-code-pro-v23-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
||||
}
|
||||
|
||||
/* roboto-mono-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('#{$base-assets-path}/fonts/roboto-mono-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
url('#{$base-assets-path}/fonts/roboto-mono-v23-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
||||
}
|
||||
|
||||
@@ -3,23 +3,27 @@
|
||||
*/
|
||||
|
||||
@use "@/presentation/assets/styles/colors" as *;
|
||||
@use "@/presentation/assets/styles/fonts" as *;
|
||||
@use "@/presentation/assets/styles/mixins" as *;
|
||||
@use "@/presentation/assets/styles/vite-path" as *;
|
||||
@use "@/presentation/assets/styles/typography" as *;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
@include flat-button($disabled: false);
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
@include flat-button($disabled: false);
|
||||
}
|
||||
|
||||
body {
|
||||
background: $color-background;
|
||||
font-family: $font-main;
|
||||
font-size: $font-size-absolute-normal;
|
||||
background: $color-background;
|
||||
font-family: $font-family-main;
|
||||
font-size: $font-size-absolute-normal;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: unset; // Reset browser default
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
@use "@/presentation/assets/styles/colors" as *;
|
||||
@use "@/presentation/assets/styles/fonts" as *;
|
||||
@use "@/presentation/assets/styles/typography" as *;
|
||||
|
||||
@mixin hover-or-touch($selector-suffix: '', $selector-prefix: '&') {
|
||||
|
||||
@@ -1,19 +1,24 @@
|
||||
// Keep the amount of fonts minimal. No more than 3 (except logo and monospace)
|
||||
// for visual consistency and readability.
|
||||
$font-family-main : 'Roboto Slab', serif;
|
||||
$font-family-logo : 'Slabo 27px', serif;
|
||||
$font-family-monospace : 'Source Code Pro', monospace;
|
||||
$font-family-cursive : 'Yesteryear', cursive;
|
||||
|
||||
/*
|
||||
This naming convention for font sizes adheres to CSS standards, distinguishing between absolute and relative sizes.
|
||||
|
||||
We prefix each variable with its type (absolute or relative) for clear identification and context.
|
||||
*/
|
||||
|
||||
// Absolute sizes use the <absolute-size> CSS data type, representing specific, fixed sizes unaffected by the parent element's size.
|
||||
// See: https://archive.today/2024.02.02-005228/https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size.
|
||||
$font-size-absolute-x-small : 14px;
|
||||
$font-size-absolute-small : 16px;
|
||||
$font-size-absolute-normal : 18px;
|
||||
$font-size-absolute-large : 22px;
|
||||
$font-size-absolute-x-large : 26px;
|
||||
$font-size-absolute-x-small : 13px;
|
||||
$font-size-absolute-small : 15px;
|
||||
$font-size-absolute-normal : 17px;
|
||||
$font-size-absolute-large : 21px;
|
||||
$font-size-absolute-x-large : 27px;
|
||||
$font-size-absolute-xx-large : 40px;
|
||||
|
||||
// Relative sizes employ the <relative-size> CSS data type, allowing font size adjustments based on the parent element's size.
|
||||
// See: https://archive.today/2024.02.02-010054/https://developer.mozilla.org/en-US/docs/Web/CSS/relative-size.
|
||||
$font-size-relative-smallest : 80%; // Common browser standard for `font-size: smaller;`
|
||||
$font-size-relative-smaller : 85%; // Common browser standard for `font-size: smaller;`
|
||||
$font-size-relative-smallest : 80%;
|
||||
$font-size-relative-smaller : 85%;
|
||||
|
||||
Reference in New Issue
Block a user