mpopke
commented
1 year ago I've added font files for Raleway (an Open Font Licensed typeface that is pretty close analog for Proxima Nova) to the repository in the static/fonts directory. f7ec327 I've added 4 weights: Regular, Italic, Bold and Bold Italic. We need to include the files for Raleway because Google fonts do not support stylistic variants, and we will want to use a few in this case (explained in more detail below).
The below CSS should work for inclusion at the top of our stylesheet. The paths may need to be changed to work with Quire, but I think I got the path right:
@font-face {
font-family: 'Raleway';
src: url('./fonts/Raleway-Regular.eot');
src: url('./fonts/Raleway-Regular.eot?#iefix') format('embedded-opentype'),
url('./fonts/Raleway-Regular.woff2') format('woff2'),
url('./fonts/Raleway-Regular.woff') format('woff'),
url('./fonts/Raleway-Regular.ttf') format('truetype'),
url('./fonts/Raleway-Regular.svg#Raleway') format('svg');
font-display: swap;
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: 'Raleway';
src: url('./fonts/Raleway-Italic.eot');
src: url('./fonts/Raleway-Italic.eot?#iefix') format('embedded-opentype'),
url('./fonts/Raleway-Italic.woff2') format('woff2'),
url('./fonts/Raleway-Italic.woff') format('woff'),
url('./fonts/Raleway-Italic.ttf') format('truetype'),
url('./fonts/Raleway-Italic.svg#Raleway') format('svg');
font-display: swap;
font-style: italic;
font-weight: 400;
}
@font-face {
font-family: 'Raleway';
src: url('./fonts/Raleway-Bold.eot');
src: url('./fonts/Raleway-Bold.eot?#iefix') format('embedded-opentype'),
url('./fonts/Raleway-Bold.woff2') format('woff2'),
url('./fonts/Raleway-Bold.woff') format('woff'),
url('./fonts/Raleway-Bold.ttf') format('truetype'),
url('./fonts/Raleway-Bold.svg#Raleway') format('svg');
font-display: swap;
font-style: normal;
font-weight: 700;
}
@font-face {
font-family: 'Raleway';
src: url('./fonts/Raleway-BoldItalic.eot');
src: url('./fonts/Raleway-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('./fonts/Raleway-BoldItalic.woff2') format('woff2'),
url('./fonts/Raleway-BoldItalic.woff') format('woff'),
url('./fonts/Raleway-BoldItalic.ttf') format('truetype'),
url('./fonts/Raleway-BoldItalic.svg#Raleway') format('svg');
font-display: swap;
font-style: italic;
font-weight: 700;
}For the Japanese text, we can use a Google font, Zen Kaku Gothic New. It's nice and clean, and looks good alongside Raleway. The best way to get the font included is with link elements in the header so we can preconnect to google's servers and minimize the possibility of the font momentarily flashing as it is loaded. But if necessary, we can use the CSS @import statement instead.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap" rel="stylesheet">or
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');Below are CSS styles for using the typefaces throughout. I have some explanations for the choices made below the code block:
html {
font-size: 100%; /* 16px */
}
@media screen and (min-width: 108rem) and (orientation: landscape) {
html {
font-size: 1vw;
}
}
body {
font-family: 'Raleway', sans-serif;
font-size: 1.25rem;
line-height: 1.4;
/* lining numerals, ss02 = alternate a, ss09 = alternate W/w */
-webkit-font-feature-settings: "lnum", "ss02", "ss09";
-moz-font-feature-settings: "lnum", "ss02", "ss09";
font-feature-settings: "lnum", "ss02", "ss09";
}
:lang(ja) {
font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック" , "MS Gothic", "Noto Sans CJK JP", TakaoPGothic, sans-serif;
-webkit-font-feature-settings: normal;
-moz-font-feature-settings: normal;
font-feature-settings: normal;
word-break: keep-all;
}
h1 :lang(ja), h2 :lang(ja), h3 :lang(ja) {
font-size: 0.9em;
line-height: 1.555555em;
}I'm assuming a 20px (1.25rem) base font size. The primary purpose of this book is to be read so I would favor readability by making the type size nice and large. For tablets, it can scale down to 18px (1.125rem). I think 18px looks good on phones as well. It's what we use on our main site. Obviously, this can be tweaked as we look at laid out pages.
For Raleway, the above CSS specifies a few alternates: Lining numerals, an alternate 'a' character, and alternate 'W' & 'w' characters. I've tested the above in multiple browsers, and it works pretty consistently.
For the Japanese text, we'll need to make sure that Japanese characters are marked up with <span lang="ja"> throughout the markdown or else the styles won't apply. I can take that on. I'll go through and make sure that Japanese characters are marked up appropriately.
The fallback fonts for Japanese text are just the various OS-specific default fonts (necessary for some older browsers to prevent them from trying to use Arial or something). Font features are reset to defaults so the CSS renderer doesn't waste cycles looking for lining numerals or alternates corresponding to ss02 and ss09. And perhaps most-importantly, word-break is set to keep-all to prevent line breaks from occurring in the middle of Japanese words, which is fine in Japanese, but more confusing when including Japanese in English text.
Japanese text in headers is sized a little bit smaller (but with the same computed line-height) just so that the text looks a little more uniform in the places where the difference styles would be most visible. I refrain from doing the same with body text because the increased height of the Japanese characters does make them more readable in that context.
Again, all of this can be tweaked as we play around with real layouts later.
Either Proxima Nova or another font