Drop font-size by 1px globally, adjust tracking globally

src/alf/atoms.ts

@@ -3,6 +3,8 @@ import {Platform, StyleSheet, ViewStyle} from 'react-native'
 import * as tokens from '#/alf/tokens'
 import {native, web} from '#/alf/util/platform'
 
+export const DEFAULT_TRACKING = Platform.OS === 'android' ? 0.1 : 0
+
 export const atoms = {
   debug: {
     borderColor: 'red',
@@ -225,43 +227,43 @@ export const atoms = {
   },
   text_2xs: {
     fontSize: tokens.fontSize._2xs,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
   },
   text_xs: {
     fontSize: tokens.fontSize.xs,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
   },
   text_sm: {
     fontSize: tokens.fontSize.sm,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
   },
   text_md: {
     fontSize: tokens.fontSize.md,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
   },
   text_lg: {
     fontSize: tokens.fontSize.lg,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
   },
   text_xl: {
     fontSize: tokens.fontSize.xl,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
   },
   text_2xl: {
     fontSize: tokens.fontSize._2xl,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
   },
   text_3xl: {
     fontSize: tokens.fontSize._3xl,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
   },
   text_4xl: {
     fontSize: tokens.fontSize._4xl,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
   },
   text_5xl: {
     fontSize: tokens.fontSize._5xl,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
   },
   leading_tight: {
     lineHeight: 1.15,
@@ -273,10 +275,7 @@ export const atoms = {
     lineHeight: 1.5,
   },
   tracking_normal: {
-    letterSpacing: 0,
+    letterSpacing: DEFAULT_TRACKING,
-  },
-  tracking_wide: {
-    letterSpacing: 0.25,
   },
   font_normal: {
     fontWeight: tokens.fontWeight.normal,

src/alf/index.tsx

@@ -5,7 +5,7 @@ import {createThemes, defaultTheme} from '#/alf/themes'
 import {Theme, ThemeName} from '#/alf/types'
 import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
 
-export {atoms} from '#/alf/atoms'
+export {atoms, DEFAULT_TRACKING} from '#/alf/atoms'
 export * as tokens from '#/alf/tokens'
 export * from '#/alf/types'
 export * from '#/alf/util/flatten'

src/alf/tokens.ts

@@ -17,16 +17,16 @@ export const space = {
 } as const
 
 export const fontSize = {
-  _2xs: 10,
+  _2xs: 9,
-  xs: 12,
+  xs: 11,
-  sm: 14,
+  sm: 13,
-  md: 16,
+  md: 15,
-  lg: 18,
+  lg: 17,
-  xl: 20,
+  xl: 19,
-  _2xl: 22,
+  _2xl: 21,
-  _3xl: 26,
+  _3xl: 25,
-  _4xl: 32,
+  _4xl: 31,
-  _5xl: 40,
+  _5xl: 39,
 } as const
 
 export const lineHeight = {

src/components/AppLanguageDropdown.web.tsx

@@ -6,7 +6,7 @@ import {sanitizeAppLanguageSetting} from '#/locale/helpers'
 import {APP_LANGUAGES} from '#/locale/languages'
 import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
 import {resetPostsFeedQueries} from '#/state/queries/post-feed'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, DEFAULT_TRACKING, useTheme} from '#/alf'
 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
 import {Text} from '#/components/Typography'
 
@@ -63,7 +63,7 @@ export function AppLanguageDropdown() {
         onChange={onChangeAppLanguage}
         style={{
           fontSize: a.text_sm.fontSize,
-          letterSpacing: a.text_sm.letterSpacing,
+          letterSpacing: DEFAULT_TRACKING,
           cursor: 'pointer',
           position: 'absolute',
           inset: 0,

src/lib/themes.ts

@@ -1,5 +1,6 @@
 import {Platform} from 'react-native'
 
+import {DEFAULT_TRACKING} from '#/alf/atoms'
 import {darkPalette, dimPalette, lightPalette} from '#/alf/themes'
 import {colors} from './styles'
 import type {Theme} from './ThemeContext'
@@ -88,163 +89,163 @@ export const defaultTheme: Theme = {
   typography: {
     '2xl-thin': {
       fontSize: 18,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '300',
     },
     '2xl': {
       fontSize: 18,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '400',
     },
     '2xl-medium': {
       fontSize: 18,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '500',
     },
     '2xl-bold': {
       fontSize: 18,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '700',
     },
     '2xl-heavy': {
       fontSize: 18,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '800',
     },
     'xl-thin': {
       fontSize: 17,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '300',
     },
     xl: {
       fontSize: 17,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '400',
     },
     'xl-medium': {
       fontSize: 17,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '500',
     },
     'xl-bold': {
       fontSize: 17,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '700',
     },
     'xl-heavy': {
       fontSize: 17,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '800',
     },
     'lg-thin': {
       fontSize: 16,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '300',
     },
     lg: {
       fontSize: 16,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '400',
     },
     'lg-medium': {
       fontSize: 16,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '500',
     },
     'lg-bold': {
       fontSize: 16,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '700',
     },
     'lg-heavy': {
       fontSize: 16,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '800',
     },
     'md-thin': {
       fontSize: 15,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '300',
     },
     md: {
       fontSize: 15,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '400',
     },
     'md-medium': {
       fontSize: 15,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '500',
     },
     'md-bold': {
       fontSize: 15,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '700',
     },
     'md-heavy': {
       fontSize: 15,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '800',
     },
     'sm-thin': {
       fontSize: 14,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '300',
     },
     sm: {
       fontSize: 14,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '400',
     },
     'sm-medium': {
       fontSize: 14,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '500',
     },
     'sm-bold': {
       fontSize: 14,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '700',
     },
     'sm-heavy': {
       fontSize: 14,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '800',
     },
     'xs-thin': {
       fontSize: 13,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '300',
     },
     xs: {
       fontSize: 13,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '400',
     },
     'xs-medium': {
       fontSize: 13,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '500',
     },
     'xs-bold': {
       fontSize: 13,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '700',
     },
     'xs-heavy': {
       fontSize: 13,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '800',
     },
 
     'title-2xl': {
       fontSize: 34,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '500',
     },
     'title-xl': {
       fontSize: 28,
-      letterSpacing: 0.25,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '500',
     },
     'title-lg': {
@@ -254,32 +255,32 @@ export const defaultTheme: Theme = {
     title: {
       fontWeight: '500',
       fontSize: 20,
-      letterSpacing: 0.15,
+      letterSpacing: DEFAULT_TRACKING,
     },
     'title-sm': {
       fontWeight: 'bold',
       fontSize: 17,
-      letterSpacing: 0.15,
+      letterSpacing: DEFAULT_TRACKING,
     },
     'post-text': {
       fontSize: 16,
-      letterSpacing: 0.2,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '400',
     },
     'post-text-lg': {
       fontSize: 20,
-      letterSpacing: 0.2,
+      letterSpacing: DEFAULT_TRACKING,
       fontWeight: '400',
     },
     'button-lg': {
       fontWeight: '500',
       fontSize: 18,
-      letterSpacing: 0.5,
+      letterSpacing: DEFAULT_TRACKING,
     },
     button: {
       fontWeight: '500',
       fontSize: 14,
-      letterSpacing: 0.5,
+      letterSpacing: DEFAULT_TRACKING,
     },
     mono: {
       fontSize: 14,

src/view/com/auth/util/TextInput.tsx

@@ -1,9 +1,11 @@
 import React, {ComponentProps} from 'react'
 import {StyleSheet, TextInput as RNTextInput, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
-import {usePalette} from 'lib/hooks/usePalette'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {useTheme} from 'lib/ThemeContext'
+
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useTheme} from '#/lib/ThemeContext'
+import {DEFAULT_TRACKING} from '#/alf'
 
 interface Props extends Omit<ComponentProps<typeof RNTextInput>, 'onChange'> {
   testID?: string
@@ -48,7 +50,7 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     paddingHorizontal: 10,
     fontSize: 17,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
     fontWeight: '400',
     borderRadius: 10,
   },

src/view/com/composer/text-input/TextInput.tsx

@@ -32,6 +32,7 @@ import {
   suggestLinkCardUri,
 } from 'view/com/composer/text-input/text-input-util'
 import {Text} from 'view/com/util/text/Text'
+import {DEFAULT_TRACKING} from '#/alf'
 import {Autocomplete} from './mobile/Autocomplete'
 
 export interface TextInputRef {
@@ -244,7 +245,7 @@ const styles = StyleSheet.create({
   },
   textInputFormatting: {
     fontSize: 18,
-    letterSpacing: 0.2,
+    letterSpacing: DEFAULT_TRACKING,
     fontWeight: '400',
     // This is broken on ios right now, so don't set it there.
     lineHeight: isIOS ? undefined : 23.4, // 1.3*16

src/view/com/modals/AddAppPasswords.tsx

@@ -20,7 +20,7 @@ import {
 import {Button} from '#/view/com/util/forms/Button'
 import {Text} from '#/view/com/util/text/Text'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a} from '#/alf'
+import {atoms as a, DEFAULT_TRACKING} from '#/alf'
 import * as Toggle from '#/components/forms/Toggle'
 
 export const snapPoints = ['90%']
@@ -269,7 +269,7 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     paddingHorizontal: 8,
     fontSize: 17,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
     fontWeight: '400',
     borderRadius: 10,
   },

src/view/com/modals/ChangeHandle.tsx

@@ -22,6 +22,7 @@ import {cleanError} from 'lib/strings/errors'
 import {createFullHandle, makeValidHandle} from 'lib/strings/handles'
 import {s} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
+import {DEFAULT_TRACKING} from '#/alf'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {Button} from '../util/forms/Button'
 import {SelectableBtn} from '../util/forms/SelectableBtn'
@@ -573,7 +574,7 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     paddingHorizontal: 8,
     fontSize: 17,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
     fontWeight: '400',
     borderRadius: 10,
   },

src/view/com/util/forms/DateInput.web.tsx

@@ -1,8 +1,10 @@
-import React, {useState, useCallback} from 'react'
+import React, {useCallback, useState} from 'react'
 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
 // @ts-ignore types not available -prf
 import {unstable_createElement} from 'react-native-web'
-import {usePalette} from 'lib/hooks/usePalette'
+
+import {usePalette} from '#/lib/hooks/usePalette'
+import {DEFAULT_TRACKING} from '#/alf'
 
 interface Props {
   testID?: string
@@ -67,7 +69,7 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     paddingHorizontal: 10,
     fontSize: 17,
-    letterSpacing: 0.25,
+    letterSpacing: DEFAULT_TRACKING,
     fontWeight: '400',
     borderRadius: 10,
     borderWidth: 0,

src/view/screens/LanguageSettings.tsx

@@ -22,6 +22,7 @@ import {s} from 'lib/styles'
 import {Button} from 'view/com/util/forms/Button'
 import {ViewHeader} from 'view/com/util/ViewHeader'
 import {CenteredView} from 'view/com/util/Views'
+import {DEFAULT_TRACKING} from '#/alf'
 import {Text} from '../com/util/text/Text'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
@@ -117,7 +118,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   backgroundColor: pal.viewLight.backgroundColor,
                   color: pal.text.color,
                   fontSize: 14,
-                  letterSpacing: 0.5,
+                  letterSpacing: DEFAULT_TRACKING,
                   fontWeight: '500',
                   paddingHorizontal: 14,
                   paddingVertical: 8,
@@ -127,7 +128,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   backgroundColor: pal.viewLight.backgroundColor,
                   color: pal.text.color,
                   fontSize: 14,
-                  letterSpacing: 0.5,
+                  letterSpacing: DEFAULT_TRACKING,
                   fontWeight: '500',
                   paddingHorizontal: 14,
                   paddingVertical: 8,
@@ -146,7 +147,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   color: pal.text.color,
                   fontSize: 14,
                   fontFamily: 'inherit',
-                  letterSpacing: 0.5,
+                  letterSpacing: DEFAULT_TRACKING,
                   fontWeight: '500',
                   paddingHorizontal: 14,
                   paddingVertical: 8,
@@ -210,7 +211,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   backgroundColor: pal.viewLight.backgroundColor,
                   color: pal.text.color,
                   fontSize: 14,
-                  letterSpacing: 0.5,
+                  letterSpacing: DEFAULT_TRACKING,
                   fontWeight: '500',
                   paddingHorizontal: 14,
                   paddingVertical: 8,
@@ -220,7 +221,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   backgroundColor: pal.viewLight.backgroundColor,
                   color: pal.text.color,
                   fontSize: 14,
-                  letterSpacing: 0.5,
+                  letterSpacing: DEFAULT_TRACKING,
                   fontWeight: '500',
                   paddingHorizontal: 14,
                   paddingVertical: 8,
@@ -238,7 +239,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   color: pal.text.color,
                   fontSize: 14,
                   fontFamily: 'inherit',
-                  letterSpacing: 0.5,
+                  letterSpacing: DEFAULT_TRACKING,
                   fontWeight: '500',
                   paddingHorizontal: 14,
                   paddingVertical: 8,

src/view/shell/desktop/Feeds.tsx

@@ -4,13 +4,14 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
 
+import {usePalette} from '#/lib/hooks/usePalette'
+import {getCurrentRoute} from '#/lib/routes/helpers'
+import {NavigationProp} from '#/lib/routes/types'
 import {emitSoftReset} from '#/state/events'
 import {usePinnedFeedsInfos} from '#/state/queries/feed'
 import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
-import {usePalette} from 'lib/hooks/usePalette'
+import {TextLink} from '#/view/com/util/Link'
-import {getCurrentRoute} from 'lib/routes/helpers'
+import {DEFAULT_TRACKING} from '#/alf'
-import {NavigationProp} from 'lib/routes/types'
-import {TextLink} from 'view/com/util/Link'
 
 export function DesktopFeeds() {
   const pal = usePalette('default')
@@ -81,7 +82,10 @@ function FeedItem({
         onPress={onPress}
         style={[
           current ? pal.text : pal.textLight,
-          {letterSpacing: 0.15, fontWeight: current ? '500' : 'normal'},
+          {
+            letterSpacing: DEFAULT_TRACKING,
+            fontWeight: current ? '500' : 'normal',
+          },
         ]}
       />
     </View>