From b6a01132f10a487d5765d548d27321acc30c3c68 Mon Sep 17 00:00:00 2001
From: Niko Strijbol <strijbol.niko@gmail.com>
Date: Tue, 13 Aug 2019 23:22:17 +0200
Subject: [PATCH] Replace "faux" small caps with real ones
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 content/assets/stylesheets/includes/general.scss | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/content/assets/stylesheets/includes/general.scss b/content/assets/stylesheets/includes/general.scss
index 13aed47..92da9b4 100644
--- a/content/assets/stylesheets/includes/general.scss
+++ b/content/assets/stylesheets/includes/general.scss
@@ -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 {