feat: switch to IBM Plex font family

packages/theme/fonts/ibmplex/README.md

@@ -0,0 +1,10 @@
+# IBM Plex Sans and IMB Plex Serif
+
+The font files have been downloaded from [Google Fonts](https://fonts.google.com/?selection.family=IBM+Plex+Sans|IBM+Plex+Serif:400,400i,700,700i&query=IBM+plex+se)
+and converted into webfonts with [FontSquirrel](https://www.fontsquirrel.com) using the
+"optimal" setting.
+
+The `ibmplex.css` file has been created manually to make the "IBM Plex Sans" and "IBM Plex Serif"
+fonts available as a single font with regular, italic, bold, and bold-italic as supported styles.
+
+You can directly import the CSS file to make the font available in your app.

packages/theme/fonts/ibmplex/index.css

@@ -0,0 +1,63 @@
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-weight: 400;
+  font-style: normal;
+  src: url('ibmplexsans-regular-webfont.woff2') format('woff2'),
+    url('ibmplexsans-regular-webfont.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-weight: 400;
+  font-style: italic;
+  src: url('ibmplexsans-italic-webfont.woff2') format('woff2'),
+    url('ibmplexsans-italic-webfont.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-weight: 700;
+  font-style: normal;
+  src: url('ibmplexsans-bold-webfont.woff2') format('woff2'),
+    url('ibmplexsans-bold-webfont.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-weight: 700;
+  font-style: italic;
+  src: url('ibmplexsans-bolditalic-webfont.woff2') format('woff2'),
+    url('ibmplexsans-bolditalic-webfont.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'IBM Plex Serif';
+  font-weight: 400;
+  font-style: normal;
+  src: url('ibmplexserif-regular-webfont.woff2') format('woff2'),
+    url('ibmplexserif-regular-webfont.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'IBM Plex Serif';
+  font-weight: 400;
+  font-style: italic;
+  src: url('ibmplexserif-italic-webfont.woff2') format('woff2'),
+    url('ibmplexserif-italic-webfont.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'IBM Plex Serif';
+  font-weight: 700;
+  font-style: normal;
+  src: url('ibmplexserif-bold-webfont.woff2') format('woff2'),
+    url('ibmplexserif-bold-webfont.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'IBM Plex Serif';
+  font-weight: 700;
+  font-style: italic;
+  src: url('ibmplexserif-bolditalic-webfont.woff2') format('woff2'),
+    url('ibmplexserif-bolditalic-webfont.woff') format('woff');
+}

packages/theme/src/textStyles.js

@@ -3,34 +3,35 @@ import { css } from '@emotion/core';
 import wf from './withFallback';
 
 const primaryFontFamily = css`
-  font-family: Asap, Lucida Grande, Tahoma, Verdana, Arial, sans-serif;
+  font-family: IBM Plex Sans, Lucida Grande, Tahoma, Verdana, Arial, sans-serif;
 `;
 
 const secondaryFontFamily = css`
-  font-family: Georgia, Gudea, Lucida Grande, Tahoma, Verdana, Arial, sans-serif;
+  font-family: IBM Plex Serif, Gudea, Lucida Grande, Tahoma, Verdana, Arial,
+    sans-serif;
 `;
 
 const styles = {
   xlarge: css`
     font-size: 20px;
-    line-height: 1.3;
+    line-height: 1.4;
   `,
   large: css`
-    font-size: 15px;
-    line-height: 1.27;
+    font-size: 16px;
+    line-height: 1.5;
   `,
   title: css`
-    font-size: 15px;
-    line-height: 1.6;
+    font-size: 16px;
+    line-height: 1.5;
     ${secondaryFontFamily}
   `,
   body: css`
-    line-height: 1.54;
+    line-height: 1.57;
     ${secondaryFontFamily}
   `,
   normal: css`
-    font-size: 13px;
-    line-height: 1.23;
+    font-size: 14px;
+    line-height: 1.57;
   `,
   bold: css`
     font-weight: bold;
@@ -61,7 +62,6 @@ const styles = {
 };
 
 const baseStyle = css`
-  letter-spacing: 0.08em;
   ${primaryFontFamily}
   ${styles.normal}
 `;