typography.ts
1 const weightScale = { 2 'Extra Light': 200, 3 Light: 300, 4 Regular: 400, 5 Medium: 500, 6 'Semi Bold': 600, 7 }; 8 9 //Body-1 10 export const body1 = { 11 fontFamily: 'Inter', 12 fontWeight: weightScale['Regular'], 13 fontSize: '14px', 14 lineHeight: '19.6px', 15 letterSpacing: '0.02em', 16 textDecoration: 'none', 17 textCase: 'undercase', 18 }; 19 20 //Body-2 21 export const body2 = { 22 ...body1, 23 fontSize: '12.44px', 24 lineHeight: '17.42px', 25 letterSpacing: '0.02em', 26 textDecoration: 'none', 27 textCase: 'undercase', 28 }; 29 30 //Button 31 export const button = { 32 fontFamily: body1.fontFamily, 33 fontWeight: weightScale['Medium'], 34 fontSize: '14px', 35 lineHeight: '19.6px', 36 letterSpacing: '0.02em', 37 textDecoration: 'none', 38 textCase: 'uppercase', 39 textTransform: 'none', 40 }; 41 42 //Caption 43 export const caption = { 44 fontFamily: body1.fontFamily, 45 fontWeight: 'Regular', 46 fontSize: '12.44px', 47 lineHeight: '17.42px', 48 letterSpacing: '0.02em', 49 textDecoration: 'none', 50 textCase: 'undercase', 51 }; 52 53 //Overline 54 export const overline = { 55 fontFamily: body1.fontFamily, 56 fontWeight: weightScale['Regular'], 57 fontSize: '12.44px', 58 lineHeight: '17.42px', 59 letterSpacing: '0.02em', 60 textDecoration: 'none', 61 textTransform: 'none', 62 }; 63 64 //Subtitle-2 65 export const subtitle2 = { 66 fontFamily: body1.fontFamily, 67 fontWeight: weightScale['Medium'], 68 fontSize: '14px', 69 lineHeight: '19.6px', 70 letterSpacing: '0.02em', 71 textDecoration: 'none', 72 }; 73 74 //Subtitle-1 75 export const subtitle1 = { 76 fontFamily: body1.fontFamily, 77 fontWeight: weightScale['Medium'], 78 fontSize: '15.75px', 79 lineHeight: '22.1px', 80 letterSpacing: '0.02em', 81 textDecoration: 'none', 82 }; 83 84 //Headline-6 85 export const h6 = { 86 fontFamily: body1.fontFamily, 87 fontWeight: weightScale['Medium'], 88 fontSize: '15.75px', 89 lineHeight: '22.1px', 90 letterSpacing: '0.02em', 91 textDecoration: 'none', 92 }; 93 94 //Headline-5 95 export const h5 = { 96 fontFamily: body1.fontFamily, 97 fontWeight: weightScale['Regular'], 98 fontSize: '17.72px', 99 lineHeight: '24.8px', 100 letterSpacing: '0.02em', 101 textDecoration: 'none', 102 textCase: 'undercase', 103 }; 104 105 //Headline-4 106 export const h4 = { 107 fontFamily: body1.fontFamily, 108 fontWeight: weightScale['Medium'], 109 fontSize: '19px', 110 lineHeight: '26.6px', 111 letterSpacing: '0.02em', 112 textDecoration: 'none', 113 }; 114 115 //Headline-3 116 export const h3 = { 117 fontFamily: body1.fontFamily, 118 fontWeight: weightScale['Semi Bold'], 119 fontSize: '22.42px', 120 lineHeight: '31.39px', 121 letterSpacing: '0.02em', 122 textDecoration: 'none', 123 }; 124 125 //Headline-2 126 export const h2 = { 127 fontFamily: body1.fontFamily, 128 fontWeight: weightScale['Semi Bold'], 129 fontSize: '25.23px', 130 lineHeight: '35.32px', 131 textDecoration: 'none', 132 }; 133 134 //Headline-1 135 export const h1 = { 136 fontFamily: body1.fontFamily, 137 fontWeight: weightScale['Semi Bold'], 138 fontSize: '27px', 139 lineHeight: '37.8px', 140 letterSpacing: '0.02em', 141 textDecoration: 'none', 142 };