Skip to content

chore: update font weight from bold to semi-bold for Geist font alignment #847

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
georgewrmarshall merged 4 commits into from
Oct 24, 2025
Merged

chore: update font weight from bold to semi-bold for Geist font alignment #847

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3db7f64
chore: updating bold to semi bold for geist fonts
georgewrmarshall Oct 22, 2025
a416b52
chore: adding fonts and updating docs
georgewrmarshall Oct 22, 2025
01a59b9
chore: more docs and updating mmsans and mmpoly
georgewrmarshall Oct 22, 2025
2dc1e8f
Merge branch 'main' into typography-updates
georgewrmarshall Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/storybook-react-native/.storybook/FontLoader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ const FontLoader = ({ children }) => {
'Geist Regular Italic': require('../fonts/Geist/Geist Regular Italic.otf'),
'Geist Medium': require('../fonts/Geist/Geist Medium.otf'),
'Geist Medium Italic': require('../fonts/Geist/Geist Medium Italic.otf'),
'Geist Bold': require('../fonts/Geist/Geist Bold.otf'),
'Geist Bold Italic': require('../fonts/Geist/Geist Bold Italic.otf'),
'Geist SemiBold': require('../fonts/Geist/Geist SemiBold.otf'),
'Geist SemiBold Italic': require('../fonts/Geist/Geist SemiBold Italic.otf'),
Comment on lines -15 to +16
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Oct 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updating FontLoader in for storybook-react native to point to semi bold

'MM Poly Regular': require('../fonts/MMPoly/MM Poly Regular.otf'),
'MM Sans Regular': require('../fonts/MMSans/MM Sans Regular.otf'),
'MM Sans Medium': require('../fonts/MMSans/MM Sans Medium.otf'),
Expand Down
Binary file added apps/storybook-react-native/fonts/Geist/Geist SemiBold.otf
View file
Open in desktop
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Oct 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding font files that name matches the meta-data because react native is silly and needs it

Image

Binary file not shown.
Binary file added apps/storybook-react-native/fonts/Geist/Geist SemiBoldItalic.otf
View file
Open in desktop
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Oct 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

Image

Binary file not shown.
Binary file added apps/storybook-react/fonts/Geist/Geist SemiBold Italic.woff2
View file
Open in desktop
Binary file not shown.
Binary file added apps/storybook-react/fonts/Geist/Geist SemiBold.woff2
View file
Open in desktop
Binary file not shown.
8 changes: 4 additions & 4 deletions apps/storybook-react/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 700;
src: url('fonts/Geist/Geist Bold.woff2') format('woff2');
font-weight: 600;
src: url('fonts/Geist/Geist SemiBold.woff2') format('woff2');
}

@font-face {
font-family: 'Geist';
font-style: italic;
font-weight: 700;
src: url('fonts/Geist/Geist Bold Italic.woff2') format('woff2');
font-weight: 600;
src: url('fonts/Geist/Geist SemiBold Italic.woff2') format('woff2');
Comment on lines -37 to +45
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Oct 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updating @font-face to point to SemiBold and adjusting weight from 700 => 600

}

/* MM Sans */
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system-react-native/src/components/Text/Text.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export const FontWeightStory: Story = {
<View>
<Text fontWeight={FontWeight.Regular}>Regular (400)</Text>
<Text fontWeight={FontWeight.Medium}>Medium (500)</Text>
<Text fontWeight={FontWeight.Bold}>Bold (700)</Text>
<Text fontWeight={FontWeight.Bold}>Bold (600)</Text>
</View>
),
name: 'Font Weight',
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system-react/src/components/Text/Text.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const meta: Meta<typeof Text> = {
options: Object.keys(FontWeight),
mapping: FontWeight,
description:
'Optional prop to control the font weight of the text. Normal: 400, Medium: 500, Bold: 700',
'Optional prop to control the font weight of the text. Normal: 400, Medium: 500, Bold: 600',
},
fontFamily: {
control: 'select',
Expand Down Expand Up @@ -221,7 +221,7 @@ export const FontWeightStory: Story = {
<div className="space-y-4">
<Text fontWeight={FontWeight.Regular}>Regular (400)</Text>
<Text fontWeight={FontWeight.Medium}>Medium (500)</Text>
<Text fontWeight={FontWeight.Bold}>Bold (700)</Text>
<Text fontWeight={FontWeight.Bold}>Bold (600)</Text>
</div>
),
name: 'Font Weight',
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system-twrnc-preset/src/typography.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export type FontStyle = 'normal' | 'italic';
* 'display-md': {
* fontFamily: 'Geist Bold',
* fontSize: '32',
* fontWeight: '700',
* fontWeight: '600',
* letterSpacing: '0',
* lineHeight: '40px',
* },
Expand Down
2 changes: 1 addition & 1 deletion packages/design-tokens/src/css/typography.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
/* font weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--font-weight-bold: 600;
/* letter spacing */
--letter-spacing-0: 0;
--letter-spacing-1: 2.5%;
Expand Down
2 changes: 1 addition & 1 deletion packages/design-tokens/src/figma/tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,7 +404,7 @@
"type": "fontWeights"
},
"bold": {
"value": "700",
"value": "600",
"type": "fontWeights"
}
},
Expand Down
2 changes: 1 addition & 1 deletion packages/design-tokens/src/js/typography/fontWeights.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@ import type { FontWeights } from './types';
export const fontWeights: FontWeights = {
regular: '400',
medium: '500',
bold: '700',
bold: '600',
};
22 changes: 11 additions & 11 deletions packages/design-tokens/src/js/typography/typography.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function createNewFigmaTokenObject(str: string, obj: any) {
describe('Typography', () => {
describe('Typography Small Screen', () => {
it('js tokens for sDisplayMD matches figma tokens sDisplayMD', () => {
expect(typography.sDisplayMD.fontWeight).toBe('700');
expect(typography.sDisplayMD.fontWeight).toBe('600');

expect(typography.sDisplayMD.fontSize).toStrictEqual(
Number(
Expand Down Expand Up @@ -86,7 +86,7 @@ describe('Typography', () => {
});

it('js tokens for sHeadingLG matches figma tokens sHeadingLG', () => {
expect(typography.sHeadingLG.fontWeight).toBe('700');
expect(typography.sHeadingLG.fontWeight).toBe('600');

expect(typography.sHeadingLG.fontSize).toStrictEqual(
Number(
Expand Down Expand Up @@ -117,7 +117,7 @@ describe('Typography', () => {
});

it('js tokens for sHeadingMD matches figma tokens sHeadingMD', () => {
expect(typography.sHeadingMD.fontWeight).toBe('700');
expect(typography.sHeadingMD.fontWeight).toBe('600');

expect(typography.sHeadingMD.fontSize).toStrictEqual(
Number(
Expand Down Expand Up @@ -148,7 +148,7 @@ describe('Typography', () => {
});

it('js tokens for sHeadingSM matches figma tokens sHeadingSM', () => {
expect(typography.sHeadingSM.fontWeight).toBe('700');
expect(typography.sHeadingSM.fontWeight).toBe('600');

expect(typography.sHeadingSM.fontSize).toStrictEqual(
Number(
Expand Down Expand Up @@ -210,7 +210,7 @@ describe('Typography', () => {
});

it('js tokens for sBodyMDBold matches figma tokens sBodyMDBold', () => {
expect(typography.sBodyMDBold.fontWeight).toBe('700');
expect(typography.sBodyMDBold.fontWeight).toBe('600');

expect(typography.sBodyMDBold.fontSize).toStrictEqual(
Number(
Expand Down Expand Up @@ -303,7 +303,7 @@ describe('Typography', () => {
});

it('js tokens for sBodySMBold matches figma tokens sBodySMBold', () => {
expect(typography.sBodySMBold.fontWeight).toBe('700');
expect(typography.sBodySMBold.fontWeight).toBe('600');

expect(typography.sBodySMBold.fontSize).toStrictEqual(
Number(
Expand Down Expand Up @@ -491,7 +491,7 @@ describe('Typography', () => {
});

it('js tokens for lHeadingLG matches figma tokens lHeadingLG', () => {
expect(typography.lHeadingLG.fontWeight).toBe('700');
expect(typography.lHeadingLG.fontWeight).toBe('600');

expect(typography.lHeadingLG.fontSize).toStrictEqual(
Number(
Expand Down Expand Up @@ -522,7 +522,7 @@ describe('Typography', () => {
});

it('js tokens for lHeadingMD matches figma tokens lHeadingMD', () => {
expect(typography.lHeadingMD.fontWeight).toBe('700');
expect(typography.lHeadingMD.fontWeight).toBe('600');

expect(typography.lHeadingMD.fontSize).toStrictEqual(
Number(
Expand Down Expand Up @@ -553,7 +553,7 @@ describe('Typography', () => {
});

it('js tokens for lHeadingSM matches figma tokens lHeadingSM', () => {
expect(typography.lHeadingSM.fontWeight).toBe('700');
expect(typography.lHeadingSM.fontWeight).toBe('600');

expect(typography.lHeadingSM.fontSize).toStrictEqual(
Number(
Expand Down Expand Up @@ -615,7 +615,7 @@ describe('Typography', () => {
});

it('js tokens for lBodyMDBold matches figma tokens lBodyMDBold', () => {
expect(typography.lBodyMDBold.fontWeight).toBe('700');
expect(typography.lBodyMDBold.fontWeight).toBe('600');

expect(typography.lBodyMDBold.fontSize).toStrictEqual(
Number(
Expand Down Expand Up @@ -708,7 +708,7 @@ describe('Typography', () => {
});

it('js tokens for lBodySMBold matches figma tokens lBodySMBold', () => {
expect(typography.lBodySMBold.fontWeight).toBe('700');
expect(typography.lBodySMBold.fontWeight).toBe('600');

expect(typography.lBodySMBold.fontSize).toStrictEqual(
Number(
Expand Down
2 changes: 1 addition & 1 deletion packages/design-tokens/stories/Typography.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -984,7 +984,7 @@ For screens sizes `768px <` or larger, use the large screen typography scale

## Font Weight

There are three available font weights: regular (`400`), medium (`500`), and bold (`700`).
There are three available font weights: regular (`400`), medium (`500`), and bold (`600`).

<Canvas of={TypographyStories.FontWeight} />

Expand Down
2 changes: 1 addition & 1 deletion packages/design-tokens/stories/Typography.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,7 +531,7 @@ export const FontWeight: StoryFn<typeof Text> = () => {
<>
<Text style={styles.regular}>Regular 400</Text>
<Text style={styles.medium}>Medium 500</Text>
<Text style={styles.bold}>Bold 700</Text>
<Text style={styles.bold}>Bold 600</Text>
</>
);
};
Expand Down
Loading