Misc edits (#3872)

* Misc edits

* Fix fonts

Author: tunetheweb

src/content/en/2019/accessibility.md

@@ -47,7 +47,7 @@ In order to make sure your website is readable under these conditions, making su
 
 {{ figure_markup(
   image="example-of-good-and-bad-color-contrast-lookzook.svg",
-  caption="Example of what text with insufficient color contrast looks like. Courtesy of LookZook",
+  caption="Example of what text with insufficient color contrast looks like. Courtesy of LookZook.",
   description="Four colored boxes of brown and gray shades with white text overlaid inside creating two columns. The left column says Too lightly colored and has the brown background color written as <code>#FCA469</code>. The right column says Recommended and the brown background color is written as <code>#BD5B0E</code>. The top box in each column has an brown background with white text <code>#FFFFFF</code> and the bottom box has a gray background with white text <code>#FFFFFF</code>. The grayscale equivalents are <code>#B8B8B8</code> and <code>#707070</code> respectively. Courtesy of LookZook",
   width=568,
   height=300

src/content/en/2019/mobile-web.md

@@ -101,7 +101,7 @@ One of the most beautiful parts of the web is how web pages load progressively b
 
 {{ figure_markup(
   image="example-of-a-site-shifting-content-while-it-loads-lookzook.gif",
-  caption="Example of shifting content distracting a reader. CLS total of 42.59%. Image courtesy of LookZook",
+  caption="Example of shifting content distracting a reader. CLS total of 42.59%. Image courtesy of LookZook.",
   description="A video showing a website progressively load. The text is displayed quickly, but as images continue to load the text gets shifted further and further down the page each time—making it very frustrating to read. The calculated CLS of this example is 42.59%. Image courtesy of LookZook",
   width=360,
   height=640
@@ -207,7 +207,7 @@ Designing tap targets appropriately to mitigate this issue can be difficult beca
 
 {{ figure_markup(
   image="example-of-easy-to-hit-tap-targets-lookzook.png",
-  caption="Standards for sizing and spacing tap targets. Image courtesy of LookZook",
+  caption="Standards for sizing and spacing tap targets. Image courtesy of LookZook.",
   description="A diagram displaying two examples of difficult to tap buttons. The first example shows two buttons with no spacing between them; An example below it shows the same buttons but with the recommended amount of spacing between them (8px or 1-2mm). The second example shows a button far too small to tap; An example below it shows the same button enlarged to the recommended size of 40-48px (around 8mm). Image courtesy of LookZook",
   width=800,
   height=430
@@ -255,7 +255,7 @@ When analyzing sites containing an email input, 56.42% use `type="email"`. Simil
       <td class="numeric">833</td>
     </tr>
   </table>
-  <figcaption>{{ figure_link(caption="Most commonly used invalid input types") }}</figcaption>
+  <figcaption>{{ figure_link(caption="Most commonly used invalid input types.") }}</figcaption>
 </figure>
 
 Make sure to educate yourself and others on the large amount of input types available and double-check that you don't have any typos like the most common ones in Figure 12.7 above.

src/content/en/2019/page-weight.md

@@ -219,7 +219,7 @@ Roughly speaking, mobile sites are about 10% smaller than their desktop counterp
       <td>4</td>
     </tr>
   </table>
-  <figcaption>{{ figure_link(caption="Page weight on desktop broken down by resource type") }}</figcaption>
+  <figcaption>{{ figure_link(caption="Page weight on desktop broken down by resource type.") }}</figcaption>
 </figure>
 
 ### Page weight over time

src/content/en/2019/security.md

@@ -273,7 +273,7 @@ Many new and recent features for site operators to better protect their users ha
 
 {{ figure_markup(
   image="fig8.png",
-  caption="Usage of Security Headers",
+  caption="Usage of Security Headers.",
   description="A vertical bar graph showing increasing usage of security headers list for both desktop and mobile listing from left to right: cross-origin-resource-policy (0 sites on both), feature policy (approx 8k desktop and mobile) report-to (74k desktop and 83k mobile), nel (74k desktop and 83k mobile), referrer-policy (142k desktop, 156k mobile), content-security-policy (240k desktop, 252k mobile), strict-transport-security (648k desktop, 679k mobile), x-xss-protection (642k desktop, 805k mobile), x-frame-options (743k desktop, 782k mobile) and finally x-content-type-options (770k desktop, 932k mobile).",
   chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRCG3clMcnkVPrnZSCWFi3qG-EU00Qr8X3XaRFQPWHEXQmYWMxnS_kfmmyMQsPZe2P6ECjzCjG0dVFg/pubchart?oid=2029255231&format=interactive",
   width=760,

src/content/en/2020/cms.md

@@ -278,7 +278,7 @@ The 0.1 to 1% adoption share category sees significantly more movement. These ac
       </tr>
     </tbody>
   </table>
-  <figcaption>{{ figure_link(caption="Relative % adoption of smaller CMSs (0.1% - 1% adoption share)", sheets_gid="1594044364", sql_file="top_cmss_yoy_all_clients.sql") }}</figcaption>
+  <figcaption>{{ figure_link(caption="Relative % adoption of smaller CMSs (0.1% - 1% adoption share).", sheets_gid="1594044364", sql_file="top_cmss_yoy_all_clients.sql") }}</figcaption>
 </figure>
 
 We see three new entrants here: Duda, GoDaddy Website Builder, and MyWebsite. Two, Tilda and Kentico CMS, have seen an adoption share change of over 100% in the last year. This "long tail" of CMSs cover a mix of open source and proprietary platforms and include everything from consumer-friendly to industry-specific. An incredible strength of the CMS platforms as a whole is one can get specialized software which powers every conceivable type of website.

src/content/en/2020/compression.md

@@ -34,7 +34,7 @@ For most text-based assets, such as [HTML](./markup), [CSS](./css), [JavaScript]
 
 {{ figure_markup(
   image="compession-methods-by-content-type.png",
-  caption="Compression methods for different content types",
+  caption="Compression methods for different content types.",
   description="A stacked bar chart showing the usage rate of different compression algorithms broken down by the content type. The stacked bars divide up the use of Brotli, Gzip, and no compression. `text/html` is the only content type that is compressed less than 50% of the time. `application/json` and `image/svg+xml` are each approximately 64% compressed. `text/css` and `application/javascript` are each approximately 85% compressed. `application/x-javascript` and `text/javascript` are greater than 90% compressed.",
   chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTxUj8-0vKTqPAblIXqekSbiRh1D1lEuA3gVD9w23qwGPtJRE8FbgrURfPAgfFZX2l0t84Wy5ZAGqzR/pubchart?oid=1658254159&format=interactive",
   sheets_gid="107138856",

src/content/en/2020/css.md

@@ -140,7 +140,7 @@ IDs can also be used to intentionally reduce or increase specificity. The <a hre
 Instead, the old, crude `!important` is still used a fair bit despite its <a hreflang="en" href="https://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/#post-475:~:text=Drawbacks,-to">well-known drawbacks</a>. The median page uses `!important` in nearly 2% of its declarations, or 1 in 50.
 
 {{ figure_markup(
-  caption="Mobile pages using `!important` in every single declaration!",
+  caption="Mobile pages using `!important` in every single declaration!.",
   content="2,138",
   classes="big-number",
   sheets_gid="1743048352",
@@ -440,7 +440,7 @@ Similarly, despite the much touted advantages of `rem` vs `em` for many use case
 
 {{ figure_markup(
   image="font-units.png",
-  caption="Relative share of font-relative units",
+  caption="Relative share of font-relative units.",
   description="Bar chart showing the relative popularity of different font-based units. `em` is used overwhelmingly on 87.3% of instances, followed by `rem` at 12.2, `ch` at 0.4%, and `ex` at 0.2% of instances on mobile pages.",
   chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRpe_HsNGpekn6YZV9k6QGmcZPxalqnDrL7DrDY-7X65RZEf_-aGfWuEvhk-yWV83ctIceE1bppCLpj/pubchart?oid=166603845&format=interactive",
   sheets_gid="1221511608",
@@ -1442,7 +1442,7 @@ It is no secret that Chrome and Safari have been way more prefix-happy, but it i
 Nearly all usage of prefixed functions (98%) is to specify gradients, even though <a hreflang="en" href="https://caniuse.com/css-gradients">this has not been necessary since 2014</a>. The most popular of these is `-webkit-linear-gradient()` used in over a quarter of pages examined. The remaining <2% is primarily for calc, <a hreflang="en" href="https://caniuse.com/calc">for which a prefix has not been necessary since 2013</a>.
 
 {{ figure_markup(
-  caption="Percent of gradient functions across all occurrences of vendor-prefixed functions in mobile pages",
+  caption="Percent of gradient functions across all occurrences of vendor-prefixed functions in mobile pages.",
   content="98.22%",
   classes="big-number",
   sheets_gid="1586213539",