Replace "faux" small caps with real ones
Fake small caps are worse than just all caps — small caps are not just smaller caps. They must specially designed. It is 2019: most browsers (except Edge and Safari) have proper support for OpenType small caps.[1] Additionally, replacing all caps in text by small caps helps readability inside long texts. However, this was being applied to the whole page, including menus. This will restrict small caps to 'content' sections. More reading: * Bringhurst, R. (1992). The elements of typographic style. Point Roberts, WA: Hartley & Marks. * Butterick, M. (2013). Practical Typography. Reference section online: https://practicaltypography.com/small-caps.html [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#Browser_compatibility
This commit is contained in:
parent
71598d952e
commit
b6a01132f1
1 changed files with 4 additions and 6 deletions
|
@ -8,12 +8,6 @@ pre .line-numbers {
|
|||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.caps {
|
||||
text-transform: uppercase;
|
||||
font-size: 85%;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
// Override box styling without round corners
|
||||
.box {
|
||||
margin-bottom:10px;
|
||||
|
@ -234,6 +228,10 @@ footer.footer {
|
|||
sup {
|
||||
font-size: $size-small;
|
||||
}
|
||||
|
||||
.caps {
|
||||
font-variant-caps: all-small-caps;
|
||||
}
|
||||
}
|
||||
|
||||
.has-all-small-caps {
|
||||
|
|
Loading…
Reference in a new issue