Use "Inter" as default typeface (#5741)

* Inter * tweaks * tweaks
2023-08-31 18:07:45 -04:00
parent 7abb4f9ad6
commit 4e53029377
15 changed files with 60 additions and 44 deletions
--- a/app/components/DocumentCard.tsx
+++ b/app/components/DocumentCard.tsx
@@ -279,8 +279,8 @@ const Heading = styled.h3`
  overflow: hidden;

  color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
+  font-weight: 500;
 `;

 export default observer(DocumentCard);
--- a/app/components/DocumentListItem.tsx
+++ b/app/components/DocumentListItem.tsx
@@ -262,8 +262,8 @@ const Heading = styled.h3<{ rtl?: boolean }>`
  margin-bottom: 0.25em;
  white-space: nowrap;
  color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
+  font-weight: 500;
 `;

 const StarPositioner = styled(Flex)`
--- a/app/components/FilterOptions.tsx
+++ b/app/components/FilterOptions.tsx
@@ -80,7 +80,7 @@ const Note = styled(Text)`
  margin-bottom: 0;
  line-height: 1.2em;
  font-size: 14px;
-  font-weight: 400;
+  font-weight: 500;
  color: ${s("textTertiary")};
 `;

--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -94,11 +94,9 @@ const Modal: React.FC<Props> = ({
                          {title}
                        </Text>
                      )}
-                      <Text as="span" size="large">
-                        <NudeButton onClick={onRequestClose}>
-                          <CloseIcon />
-                        </NudeButton>
-                      </Text>
+                      <NudeButton onClick={onRequestClose}>
+                        <CloseIcon />
+                      </NudeButton>
                    </Header>
                  </Centered>
                </Small>
--- a/app/components/Text.ts
+++ b/app/components/Text.ts
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";

 type Props = {
  type?: "secondary" | "tertiary" | "danger";
@@ -31,12 +31,17 @@ const Text = styled.p<Props>`
      : props.size === "xsmall"
      ? "13px"
      : "inherit"};
-  font-weight: ${(props) =>
-    props.weight === "bold"
-      ? 500
-      : props.weight === "normal"
-      ? "normal"
-      : "inherit"};
+
+  ${(props) =>
+    props.weight &&
+    css`
+      font-weight: ${props.weight === "bold"
+        ? 500
+        : props.weight === "normal"
+        ? 400
+        : "inherit"};
+    `}
+
  white-space: normal;
  user-select: ${(props) => (props.selectable ? "text" : "none")};
 `;
--- a/app/scenes/Document/components/ReferenceListItem.tsx
+++ b/app/scenes/Document/components/ReferenceListItem.tsx
@@ -49,8 +49,7 @@ const Title = styled.div`
  line-height: 1.25;
  padding-top: 3px;
  color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
 `;

 function ReferenceListItem({
--- a/app/scenes/Search/Search.tsx
+++ b/app/scenes/Search/Search.tsx
@@ -464,7 +464,7 @@ const SearchTitlesFilter = styled(Switch)`
  margin-left: 8px;
  margin-top: 2px;
  font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
 `;

 export default withTranslation()(withStores(withRouter(Search)));
--- a/app/typings/styled-components.d.ts
+++ b/app/typings/styled-components.d.ts
@@ -20,7 +20,9 @@ declare module "styled-components" {
    scrollbarThumb: string;
    fontFamily: string;
    fontFamilyMono: string;
-    fontWeight: number;
+    fontWeightRegular: number;
+    fontWeightMedium: number;
+    fontWeightBold: number;
    link: string;
    placeholder: string;
    textSecondary: string;
--- a/public/fonts/Inter-italic.var.woff2
+++ b/public/fonts/Inter-italic.var.woff2
--- a/public/fonts/Inter.var.woff2
+++ b/public/fonts/Inter.var.woff2
--- a/server/routes/index.ts
+++ b/server/routes/index.ts
@@ -23,7 +23,7 @@ const router = new Router();
 koa.use<BaseContext, UserAgentContext>(userAgent);

 // serve public assets
-router.use(["/images/*", "/email/*"], async (ctx, next) => {
+router.use(["/images/*", "/email/*", "/fonts/*"], async (ctx, next) => {
  let done;

  if (ctx.method === "HEAD" || ctx.method === "GET") {
--- a/server/static/index.html
+++ b/server/static/index.html
@@ -30,6 +30,21 @@
      title="Outline"
    />
    <style>
+      @font-face {
+        font-family: "Inter";
+        font-display: swap;
+        font-feature-settings: "ss03", "cv05";
+        src: url("{cdn-url}/fonts/Inter.var.woff2") format("woff2");
+      }
+
+      @font-face {
+        font-family: "Inter";
+        font-display: swap;
+        font-feature-settings: "ss03", "cv05";
+        font-style: italic;
+        src: url("{cdn-url}/fonts/Inter-italic.var.woff2") format("woff2");
+      }
+
      body,
      html {
        margin: 0;
--- a/shared/editor/components/Styles.ts
+++ b/shared/editor/components/Styles.ts
@@ -254,9 +254,9 @@ flex-grow: ${props.grow ? 1 : 0};
 justify-content: start;
 color: ${props.theme.text};
 font-family: ${props.theme.fontFamily};
-font-weight: ${props.theme.fontWeight};
+font-weight: ${props.theme.fontWeightRegular};
 font-size: 1em;
-line-height: 1.6em;
+line-height: -0.011;
 width: 100%;

 .mention {
@@ -285,9 +285,6 @@ width: 100%;
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
-  -webkit-font-variant-ligatures: none;
-  font-variant-ligatures: none;
-  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
  padding: ${props.editorStyle?.padding ?? "initial"};
  margin: ${props.editorStyle?.margin ?? "initial"};

@@ -329,12 +326,12 @@ width: 100%;

  // all of heading sizes are stepped down one from global styles, except h1
  // which is between h1 and h2
-  h1 { font-size: 1.75em; }
-  h2 { font-size: 1.25em; }
-  h3 { font-size: 1em; }
-  h4 { font-size: 0.875em; }
-  h5 { font-size: 0.75em; }
-  h6 { font-size: 0.75em; }
+  h1 { font-size: 28px; }
+  h2 { font-size: 22px; }
+  h3 { font-size: 18px; }
+  h4 { font-size: 16px; }
+  h5 { font-size: 15px; }
+  h6 { font-size: 15px; }

  .ProseMirror-yjs-cursor {
    position: relative;
--- a/shared/styles/globals.ts
+++ b/shared/styles/globals.ts
@@ -30,8 +30,7 @@ export default createGlobalStyle<Props>`
  optgroup,
  select,
  textarea {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: ${s("fontFamily")};
  }

  body {
@@ -82,12 +81,11 @@ export default createGlobalStyle<Props>`
    margin-top: 1em;
    margin-bottom: 0.5em;
  }
-  h1 { font-size: 2.25em; }
-  h2 { font-size: 1.5em; }
-  h3 { font-size: 1.25em; }
-  h4 { font-size: 1em; }
-  h5 { font-size: 0.875em; }
-  h6 { font-size: 0.75em; }
+  h1 { font-size: 36px; }
+  h2 { font-size: 26px; }
+  h3 { font-size: 22px; }
+  h4 { font-size: 18px; }
+  h5 { font-size: 16px; }

  p,
  dl,
--- a/shared/styles/theme.ts
+++ b/shared/styles/theme.ts
@@ -59,10 +59,12 @@ const buildBaseTheme = (input: Partial<Colors>) => {

  return {
    fontFamily:
-      "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
+      "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif",
    fontFamilyMono:
-      "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
-    fontWeight: 400,
+      "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 600,
    backgroundTransition: "background 100ms ease-in-out",
    accentText: colors.white,
    selected: colors.accent,