[Neue] Font weights (#5442)

* Align all font weights * Only load necessary fonts * Also comment out from hook
bluesky-social · Sep 20, 2024 · 7e2456b · 7e2456b
1 parent 4161e23
commit 7e2456b
Show file tree

Hide file tree

Showing 58 changed files with 362 additions and 367 deletions.
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
@@ -15,16 +15,22 @@
 
   <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf">
   <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Italic.95778eb0c75dc956257e.otf">
+  <!--
   <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Medium.296aa2d65964269836b3.otf">
   <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf">
+  -->
   <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBold.2277990330981b8409bb.otf">
   <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf">
+  <!--
   <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Bold.8d330503e1d034ad68de.otf">
   <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf">
+  -->
   <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf">
   <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf">
+  <!--
   <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf">
   <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf">
+  -->
 
   <style>
     @font-face {
@@ -41,6 +47,7 @@
       font-style: italic;
       font-display: swap;
     }
+    /*
     @font-face {
       font-family: "Inter-Medium";
       src: local("Inter-Medium"), url(/static/media/Inter-Medium.296aa2d65964269836b3.otf) format("font/otf");
@@ -55,6 +62,7 @@
       font-style: italic;
       font-display: swap;
     }
+    */
     @font-face {
       font-family: "Inter-SemiBold";
       src: local("Inter-SemiBold"), url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf) format("font/otf");
@@ -69,6 +77,7 @@
       font-style: italic;
       font-display: swap;
     }
+    /*
     @font-face {
       font-family: "Inter-Bold";
       src: local("Inter-Bold"), url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf) format("font/otf");
@@ -83,6 +92,7 @@
       font-style: italic;
       font-display: swap;
     }
+    */
     @font-face {
       font-family: "Inter-ExtraBold";
       src: local("Inter-ExtraBold"), url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf) format("font/otf");
@@ -97,6 +107,7 @@
       font-style: italic;
       font-display: swap;
     }
+    /*
     @font-face {
       font-family: "Inter-Black";
       src: local("Inter-Black"), url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf) format("font/otf");
@@ -111,6 +122,7 @@
       font-style: italic;
       font-display: swap;
     }
+    */
 
     /**
      * Extend the react-native-web reset:

diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
@@ -276,16 +276,13 @@ export const atoms = {
     letterSpacing: tokens.TRACKING,
   },
   font_normal: {
-    fontWeight: tokens.fontWeight.normal,
-  },
-  font_semibold: {
-    fontWeight: tokens.fontWeight.semibold,
+    fontWeight: tokens.fontWeight.regular,
   },
   font_bold: {
-    fontWeight: tokens.fontWeight.bold,
+    fontWeight: tokens.fontWeight.semibold,
   },
   font_heavy: {
-    fontWeight: tokens.fontWeight.heavy,
+    fontWeight: tokens.fontWeight.extrabold,
   },
   italic: {
     fontStyle: 'italic',

diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts
@@ -54,16 +54,16 @@ export function DO_NOT_USE() {
     // 'Inter-LightItalic': require('../../assets/fonts/inter/Inter-LightItalic.otf'),
     'Inter-Regular': require('../../assets/fonts/inter/Inter-Regular.otf'),
     'Inter-Italic': require('../../assets/fonts/inter/Inter-Italic.otf'),
-    'Inter-Medium': require('../../assets/fonts/inter/Inter-Medium.otf'),
-    'Inter-MediumItalic': require('../../assets/fonts/inter/Inter-MediumItalic.otf'),
+    // 'Inter-Medium': require('../../assets/fonts/inter/Inter-Medium.otf'),
+    // 'Inter-MediumItalic': require('../../assets/fonts/inter/Inter-MediumItalic.otf'),
     'Inter-SemiBold': require('../../assets/fonts/inter/Inter-SemiBold.otf'),
     'Inter-SemiBoldItalic': require('../../assets/fonts/inter/Inter-SemiBoldItalic.otf'),
-    'Inter-Bold': require('../../assets/fonts/inter/Inter-Bold.otf'),
-    'Inter-BoldItalic': require('../../assets/fonts/inter/Inter-BoldItalic.otf'),
+    // 'Inter-Bold': require('../../assets/fonts/inter/Inter-Bold.otf'),
+    // 'Inter-BoldItalic': require('../../assets/fonts/inter/Inter-BoldItalic.otf'),
     'Inter-ExtraBold': require('../../assets/fonts/inter/Inter-ExtraBold.otf'),
     'Inter-ExtraBoldItalic': require('../../assets/fonts/inter/Inter-ExtraBoldItalic.otf'),
-    'Inter-Black': require('../../assets/fonts/inter/Inter-Black.otf'),
-    'Inter-BlackItalic': require('../../assets/fonts/inter/Inter-BlackItalic.otf'),
+    // 'Inter-Black': require('../../assets/fonts/inter/Inter-Black.otf'),
+    // 'Inter-BlackItalic': require('../../assets/fonts/inter/Inter-BlackItalic.otf'),
   })
 }
 

diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts
@@ -47,11 +47,16 @@ export const borderRadius = {
   full: 999,
 } as const
 
+/**
+ * These correspond to Inter font files we actually load.
+ */
 export const fontWeight = {
-  normal: '400',
-  semibold: '500',
-  bold: '600',
-  heavy: '700',
+  regular: '400',
+  // medium: '500',
+  semibold: '600',
+  // bold: '700',
+  extrabold: '800',
+  // black: '900',
 } as const
 
 export const gradients = {

diff --git a/src/components/LabelingServiceCard/index.tsx b/src/components/LabelingServiceCard/index.tsx
@@ -86,7 +86,7 @@ export function LikeCount({count}: {count: number}) {
         a.mt_sm,
         a.text_sm,
         t.atoms.text_contrast_medium,
-        {fontWeight: '500'},
+        {fontWeight: '600'},
       ]}>
       <Plural value={count} one="Liked by # user" other="Liked by # users" />
     </Text>

diff --git a/src/components/MediaPreview.tsx b/src/components/MediaPreview.tsx
@@ -170,6 +170,6 @@ const styles = StyleSheet.create({
   alt: {
     color: 'white',
     fontSize: 7,
-    fontWeight: 'bold',
+    fontWeight: '600',
   },
 })
diff --git a/src/components/Pills.tsx b/src/components/Pills.tsx
@@ -132,7 +132,7 @@ export function Label({
             <Text
               style={[
                 text,
-                a.font_semibold,
+                a.font_bold,
                 a.leading_tight,
                 t.atoms.text_contrast_medium,
                 {paddingRight: 3},

diff --git a/src/components/ProgressGuide/List.tsx b/src/components/ProgressGuide/List.tsx
@@ -26,7 +26,7 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
           <Text
             style={[
               t.atoms.text_contrast_medium,
-              a.font_semibold,
+              a.font_bold,
               a.text_sm,
               {textTransform: 'uppercase'},
             ]}>

diff --git a/src/components/ProgressGuide/Task.tsx b/src/components/ProgressGuide/Task.tsx
@@ -35,9 +35,7 @@ export function ProgressGuideTask({
       )}
 
       <View style={[a.flex_col, a.gap_2xs, {marginTop: -2}]}>
-        <Text style={[a.text_sm, a.font_semibold, a.leading_tight]}>
-          {title}
-        </Text>
+        <Text style={[a.text_sm, a.font_bold, a.leading_tight]}>{title}</Text>
         {subtitle && (
           <Text
             style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_tight]}>

diff --git a/src/components/ProgressGuide/Toast.tsx b/src/components/ProgressGuide/Toast.tsx
@@ -154,7 +154,7 @@ export const ProgressGuideToast = React.forwardRef<
               ref={animatedCheckRef}
             />
             <View>
-              <Text style={[a.text_md, a.font_semibold]}>{title}</Text>
+              <Text style={[a.text_md, a.font_bold]}>{title}</Text>
               {subtitle && (
                 <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
                   {subtitle}

diff --git a/src/components/ReportDialog/SelectLabelerView.tsx b/src/components/ReportDialog/SelectLabelerView.tsx
@@ -77,8 +77,7 @@ function LabelerButton({
             handle: labeler.creator.handle,
           })}
         />
-        <Text
-          style={[t.atoms.text_contrast_medium, a.text_sm, a.font_semibold]}>
+        <Text style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
           @{labeler.creator.handle}
         </Text>
       </LabelingServiceCard.Content>

diff --git a/src/components/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx
@@ -491,9 +491,7 @@ function Selectable({
             },
             style,
           ]}>
-          <Text style={[a.text_sm, isSelected && a.font_semibold]}>
-            {label}
-          </Text>
+          <Text style={[a.text_sm, isSelected && a.font_bold]}>{label}</Text>
           {isSelected ? (
             <Check size="sm" fill={t.palette.primary_500} />
           ) : (

diff --git a/src/components/dialogs/nuxs/NeueTypography.tsx b/src/components/dialogs/nuxs/NeueTypography.tsx
@@ -48,7 +48,7 @@ export function NeueTypography() {
       <Dialog.ScrollableInner label={_(msg`Introducing new font settings`)}>
         <View style={[a.gap_xl]}>
           <View style={[a.gap_md]}>
-            <Text style={[a.text_3xl, {fontWeight: '900'}]}>
+            <Text style={[a.text_3xl, a.font_heavy]}>
               <Trans>New font settings ✨</Trans>
             </Text>
             <Text style={[a.text_lg, a.leading_snug, {maxWidth: 400}]}>

diff --git a/src/components/dialogs/nuxs/TenMillion/index.tsx b/src/components/dialogs/nuxs/TenMillion/index.tsx
@@ -19,10 +19,10 @@ import {isIOS, isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useAgent, useSession} from '#/state/session'
-import {useComposerControls} from 'state/shell'
+import {useComposerControls} from '#/state/shell'
 import {formatCount} from '#/view/com/util/numeric/format'
+import * as Toast from '#/view/com/util/Toast'
 import {Logomark} from '#/view/icons/Logomark'
-import * as Toast from 'view/com/util/Toast'
 import {
   atoms as a,
   ThemeProvider,
@@ -441,10 +441,10 @@ export function TenMillionInner({
                         allowFontScaling={false}
                         style={[
                           a.absolute,
+                          a.font_heavy,
                           {
                             color: t.palette.primary_500,
                             fontSize: 32,
-                            fontWeight: '900',
                             width: 32,
                             top: isNative ? -10 : 0,
                             left: 0,
@@ -462,11 +462,11 @@ export function TenMillionInner({
                         style={[
                           a.relative,
                           a.text_center,
+                          a.font_heavy,
                           {
                             fontStyle: 'italic',
                             fontSize: getFontSize(userNumber),
                             lineHeight: getFontSize(userNumber),
-                            fontWeight: '900',
                             letterSpacing: -2,
                           },
                         ]}>
@@ -536,7 +536,7 @@ export function TenMillionInner({
                             style={[
                               a.flex_1,
                               a.text_sm,
-                              a.font_semibold,
+                              a.font_bold,
                               a.leading_snug,
                               lightTheme.atoms.text_contrast_medium,
                             ]}>
@@ -551,7 +551,7 @@ export function TenMillionInner({
                               style={[
                                 a.flex_1,
                                 a.text_sm,
-                                a.font_semibold,
+                                a.font_bold,
                                 a.leading_snug,
                                 a.text_right,
                                 lightTheme.atoms.text_contrast_low,
@@ -643,14 +643,7 @@ export function TenMillionInner({
           <View style={[gtMobile ? a.p_2xl : a.p_xl]}>
             <Text
               allowFontScaling={false}
-              style={[
-                a.text_5xl,
-                a.leading_tight,
-                a.pb_lg,
-                {
-                  fontWeight: '900',
-                },
-              ]}>
+              style={[a.text_5xl, a.leading_tight, a.pb_lg, a.font_heavy]}>
               <Trans>Thanks for being one of our first 10 million users.</Trans>
             </Text>
 

diff --git a/src/components/moderation/ContentHider.tsx b/src/components/moderation/ContentHider.tsx
@@ -94,7 +94,7 @@ export function ContentHider({
                 a.text_left,
                 a.font_bold,
                 a.leading_snug,
-                gtMobile && [a.font_semibold],
+                gtMobile && [a.font_bold],
                 t.atoms.text_contrast_medium,
                 web({
                   marginBottom: 1,
@@ -107,7 +107,7 @@ export function ContentHider({
                 style={[
                   a.font_bold,
                   a.leading_snug,
-                  gtMobile && [a.font_semibold],
+                  gtMobile && [a.font_bold],
                   t.atoms.text_contrast_high,
                   web({
                     marginBottom: 1,

diff --git a/src/components/moderation/LabelPreference.tsx b/src/components/moderation/LabelPreference.tsx
@@ -236,8 +236,7 @@ export function LabelerLabelPreference({
           <View style={[a.flex_row, a.gap_xs, a.align_center, a.mt_xs]}>
             <CircleInfo size="sm" fill={t.atoms.text_contrast_high.color} />
 
-            <Text
-              style={[t.atoms.text_contrast_medium, a.font_semibold, a.italic]}>
+            <Text style={[t.atoms.text_contrast_medium, a.font_bold, a.italic]}>
               {adultDisabled ? (
                 <Trans>Adult content is disabled.</Trans>
               ) : isGlobalLabel ? (

diff --git a/src/components/moderation/ScreenHider.tsx b/src/components/moderation/ScreenHider.tsx
@@ -10,9 +10,9 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {NavigationProp} from 'lib/routes/types'
+import {NavigationProp} from '#/lib/routes/types'
 import {CenteredView} from '#/view/com/util/Views'
 import {atoms as a, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -86,13 +86,7 @@ export function ScreenHider({
         </View>
       </View>
       <Text
-        style={[
-          a.text_4xl,
-          a.font_semibold,
-          a.text_center,
-          a.mb_md,
-          t.atoms.text,
-        ]}>
+        style={[a.text_4xl, a.font_bold, a.text_center, a.mb_md, t.atoms.text]}>
         {isNoPwi ? (
           <Trans>Sign-in Required</Trans>
         ) : (
@@ -118,7 +112,7 @@ export function ScreenHider({
             <Text
               style={[
                 a.text_lg,
-                a.font_semibold,
+                a.font_bold,
                 a.leading_snug,
                 t.atoms.text,
                 a.ml_xs,

diff --git a/src/lib/styles.ts b/src/lib/styles.ts
@@ -1,6 +1,6 @@
 import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
 
-import {isWeb} from 'platform/detection'
+import {isWeb} from '#/platform/detection'
 import {Theme, TypographyVariant} from './ThemeContext'
 
 // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
@@ -79,14 +79,13 @@ export const s = StyleSheet.create({
 
   // font weights
   fw600: {fontWeight: '600'},
-  bold: {fontWeight: '700'},
-  fw500: {fontWeight: '500'},
-  semiBold: {fontWeight: '500'},
+  bold: {fontWeight: '600'},
+  fw500: {fontWeight: '600'},
+  semiBold: {fontWeight: '600'},
   fw400: {fontWeight: '400'},
   normal: {fontWeight: '400'},
   fw300: {fontWeight: '400'},
   light: {fontWeight: '400'},
-  fw200: {fontWeight: '200'},
 
   // text decoration
   underline: {textDecorationLine: 'underline'},