Blog post readability

Also use .md file extension to enable spellchecking.

2 files changed, 14 insertions, 15 deletions

diff --git a/.prettierignore b/.prettierignore
index 4f92f13..59243de 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -12,3 +12,4 @@ node_modules/
 
 # See https://github.com/orgs/mdx-js/discussions/2067
 *.mdx
+*.md
diff --git a/blog/2024-04-05/variable-css-font-features.mdx b/blog/2024-04-05/variable-css-font-features.md
index 184aa69..ce7f379 100644
--- a/blog/2024-04-05/variable-css-font-features.mdx
+++ b/blog/2024-04-05/variable-css-font-features.md
@@ -6,8 +6,8 @@ title: Variable CSS font features
 description: How to set up and use font variation axes in CSS, create a custom subset with OpenType font features, and make the font features switch based on variation settings automatically.
 tags:
   - css
-  - design
   - frontend
+  - docusaurus
 authors: kris
 ---
 
@@ -53,9 +53,9 @@ Recursive defines **5 variation axes:**
   We don't have to do anything special to use this axis, because it is mapped to the `font-weight` CSS property by browsers automatically.
 - The `"slnt"` axis controls the slant of the font[^oblique].
   I couldn't get the browser to map this to `font-style: italic` properly, so we'll have to take care of this axis manually[^italic].
-- The `"MONO"` axis blends the font between proportional and monospaced. Browsers don't support this out of the box.
-- The `"CASL"` axis blends the font between serious and casual. Browsers don't support this out of the box either.
-- The `"CRSV"` axis is the most interesting. At 0, you get normal letters, while at 1 you get <span style={/** @type {import('react').CSSProperties} */ ({ '--crsv': 1 })}>cursive</span> ones. At 0.5, you get **automatic switching:** normal letters for upright type and italic ones for text slanted more than 14 degrees[^slant].
+- The `"MONO"` axis blends the font between proportional and monospaced. For values greater than `0.5`, monospace-specific letterforms kick in for some characters. Browsers don't support this axis out of the box.
+- The `"CASL"` axis blends the font between serious and casual. Browsers don't support this axis out of the box either.
+- The `"CRSV"` axis is the most interesting. At `0`, you get normal letters, while at `1` you get cursive ones. At `0.5`, you get **automatic switching:** normal letters for upright type and italic ones for text slanted more than 14 degrees[^slant].
 
 [^oblique]: It goes in the direction opposite to the [`font-style: oblique`][font-style-prop] property.
 
@@ -139,7 +139,7 @@ Docusarus shifts the sizes of headings up by one for text generated from Markdow
 
 Some letters now look a little awkward: the two-story letter '<span style={/** @type {import('react').CSSProperties} */ ({ '--casl': 0.01 })}>g</span>' can be hard to read in small body text. Also, the '@' gets squished horizontally in monospace text way too much. There's even a [GitHub issue](https://github.com/arrowtype/recursive/issues/509) for that in the Recursive repository!
 
-Luckily, Recursive has a number of **OpenType font features** that can change the shape of the characters. You can take a look at them in Recursive's [README page](https://github.com/arrowtype/recursive?tab=readme-ov-file#opentype-features). I also reproduced the image below, but it's a bit large, so you'll need to click to reveal it.
+Handily for us, Recursive has a number of **OpenType font features** that can change the shape of the characters. You can take a look at them in Recursive's [README page](https://github.com/arrowtype/recursive?tab=readme-ov-file#opentype-features). I also reproduced the image below, but it's a bit large, so you'll need to click to reveal it.
 
 import recursiveFeatures from './recursive-v1.064-opentype_features.png?placeholder=true&sizes[]=360&sizes[]=559&sizes[]=930&sizes[]=1504&rl';
 import recursiveFeaturesOriginal from './recursive-v1.064-opentype_features.png?url';
@@ -207,7 +207,7 @@ Recursive doesn't declare any RFN, so we can keep referring to our custom subset
 
 :::
 
-Now we can include our custom subset in our CSS:
+We can now include our custom subset in our CSS:
 
 ```css
 @font-face {
@@ -222,7 +222,7 @@ Now we can include our custom subset in our CSS:
 }
 ```
 
-For this website, I actually wrote a [small Python script](https://git.marussy.com/blog/tree/scripts/subset_fonts.py) to generate the font subsets. I also use a [template](https://git.marussy.com/blog/tree/scripts/fonts.css.jinja2) for generating the corresponding CSS. Both files can be found in the [Git repository](https://git.marussy.com/blog/) of this website with <MITLicenseLink />.
+For this website, I actually wrote a [small Python script](https://git.marussy.com/blog/tree/scripts/subset_fonts.py) to generate the font subsets. I also use a [template](https://git.marussy.com/blog/tree/scripts/fonts.css.jinja2) for generating the corresponding CSS. Both files can be found in the [Git repository](https://git.marussy.com/blog/) of this website under <MITLicenseLink />.
 
 ### Selecting features
 
@@ -230,11 +230,11 @@ I decided to take the features `ss02`, `ss05`, `ss10`, `ss12`, and `titl` for a
 
 <VariableAxisSettingsWithFontFeaturesToggle />
 
-After a bit of experimentation, I decided to use the features in the following way:
+After a bit of experimentation, I ended up using the features as follows:
 
 * The simplified look of the letter 'g' with the `ss02` feature is suitable for body text, but I prefer the two-story '<span style={/** @type {import('react').CSSProperties} */ ({'--casl': 0.01})}>g</span>' for headings.
 * The `ss05` feature does nothing for proportional text, but makes the letter `l` more similar to that in my favorite coding font, [Fira Code](https://github.com/tonsky/FiraCode) in monospace text. We can safely set this for all text.
-* The `ss10` (dotted zero) and `ss12` (simplified `@`) features affect proportional text, too, so we shouldn't set them for all text. But, for me, they make text more readable once the monospace letter shapes kick in after `--mono: 0.5`.
+* The `ss10` (dotted zero) and `ss12` (simplified `@`) features affect proportional text, too, so we shouldn't set them for all text. However, they do make text more readable for me once the monospace letterforms kick in after `--mono: 0.5`.
 * The alternative '<span style={/** @type {import('react').CSSProperties} */ ({'--casl': 0.01})}>Q</span>' with `titl` is nice for headings, but I prefer the default 'Q' with descender for body text.
 
 ### Automatic feature switching
@@ -266,13 +266,13 @@ In short, we want something like
 ```
 
 We will use [`calc()`](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) to determine the values of [`font-feature-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings).
-However, looking through the list of [CSS math function](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#math_functions), we find few options for creating [discontinuous expressions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#stepped_value_functions). The [`round()`][round] function sounds promising, but it ~isn't~ wasnt't supported by Chromium until May&nbsp;2024.
+However, looking through the list of [CSS math functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#math_functions), we find few options for creating [discontinuous expressions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#stepped_value_functions). The [`round()`][round] function sounds promising, but it ~isn't~ wasn't supported by Chromium until May&nbsp;2024.
 
 [round]: https://developer.mozilla.org/en-US/docs/Web/CSS/round
 
 :::info
 
-Because browsers now support [`round()`][round] near universally, I added an [update](#the-round-function) to this blog post on August&nbsp;16, 2024 below.
+Since browsers now support [`round()`][round] near universally, I added an [update](#the-round-function) to this blog post detailing its use below on August&nbsp;16, 2024.
 
 :::
 
@@ -326,10 +326,8 @@ You can set the variables axes below with up to 0.01 precision:
 
 ### The `round()` function
 
-
-
-Since May&nbsp;2024, the [`round()`][round] CSS math function became widely avaiable in browsers.
-This allows use to write the font feature computeations is a more straightforward way, and also avoids the problem of variation axis values like `0.0005` or `0.5005`.
+Since May&nbsp;2024, the [`round()`][round] CSS math function became widely available in browsers.
+This allows use to write the font feature computations is a more straightforward way, and also avoids the problem of variation axis values like `0.0005` or `0.5005`.
 
 The updated code snippet looks like this: