Skip to content

Commit a07fb7b

Browse files
author
Joohaem Lee
committed
Enhance Font setting
1 parent acf358b commit a07fb7b

File tree

7 files changed

+68
-46
lines changed

7 files changed

+68
-46
lines changed

‎src/app/layout.tsx‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import type { Metadata } from "next";
22
import localFont from "next/font/local";
3+
import {Source_Serif_4} from "next/font/google";
4+
import clsx from "clsx";
35

6+
import GoogleAnalytics from "@/components/GoogleAnalytics";
47
import { GOOGLE_ANALYTICS, GOOGLE_VERIFICATION_CODE } from "@/consts/env";
58

69
import "./globals.css";
710
import { BASE_URL } from "./const";
811
import { bodyContainer } from "./layout.css";
9-
import GoogleAnalytics from "@/components/GoogleAnalytics";
1012

1113
export const metadata: Metadata = {
1214
title: "SNUPI Blog",
@@ -52,13 +54,29 @@ const pretendardFont = localFont({
5254
display: "swap",
5355
});
5456

57+
const sourceSerif4Font = Source_Serif_4({
58+
weight: ['200', '300', '400'],
59+
subsets: ['latin', 'latin-ext'],
60+
display: 'swap',
61+
variable: '--font-source-serif-4',
62+
});
63+
64+
5565
export default function RootLayout({
5666
children,
5767
}: {
5868
children: React.ReactNode;
5969
}) {
6070
return (
61-
<html lang="en" className={`${pretendardFont.className}`}>
71+
<html
72+
lang="en"
73+
className={
74+
clsx(
75+
pretendardFont.className,
76+
sourceSerif4Font.variable
77+
)
78+
}
79+
>
6280
{
6381
GOOGLE_ANALYTICS
6482
? (

‎src/components/Heading/index.css.ts‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
import { style } from "@vanilla-extract/css";
22

33
export const largeDisplayHeading = style({
4-
fontSize: "48px",
5-
lineHeight: "130%",
6-
letterSpacing: "0.1em",
4+
fontSize: "52px",
5+
lineHeight: "150%",
6+
letterSpacing: "0.15em",
77
});
8-
export const largeHeadlineHeading = style({
9-
fontSize: "33px",
10-
lineHeight: "130%",
11-
});
12-
export const largeTitleHeading = style({
13-
fontSize: "23px",
14-
lineHeight: "130%",
15-
letterSpacing: "-0.001em",
8+
export const mediumDisplayHeading = style({
9+
fontSize: "40px",
10+
lineHeight: "150%",
1611
});
1712
export const mediumTitleHeading = style({
18-
fontSize: "18px",
19-
lineHeight: "130%",
13+
fontSize: "20px",
14+
lineHeight: "150%",
2015
});
2116
export const smallTitleHeading = style({
17+
fontSize: "18px",
18+
lineHeight: "150%",
19+
});
20+
export const extraSmallTitleHeading = style({
2221
fontSize: "16px",
23-
lineHeight: "130%",
22+
lineHeight: "150%",
2423
});
2524

2625
export const extraLightWeight = style({
@@ -34,4 +33,8 @@ export const mediumWeight = style({
3433
})
3534
export const semiBoldWeight = style({
3635
fontWeight: '600'
36+
})
37+
38+
export const serifFont = style({
39+
fontFamily: 'var(--font-source-serif-4)'
3740
})

‎src/components/Heading/index.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,30 @@ import clsx from "clsx";
44
import {
55
extraLightWeight,
66
largeDisplayHeading,
7-
largeHeadlineHeading,
8-
largeTitleHeading,
7+
extraSmallTitleHeading,
98
lightWeight,
9+
mediumDisplayHeading,
1010
mediumTitleHeading,
1111
mediumWeight,
1212
semiBoldWeight,
13+
serifFont,
1314
smallTitleHeading,
1415
} from "./index.css";
1516

1617

1718
interface HeadingProps extends Omit<HeadingTagProps, 'className'> {
18-
size?: "display-l" | "headline-l" | "title-l" | "title-m" | "title-s";
19+
size?: "display-l" | "display-m" | "title-m" | "title-s" | "title-xs";
1920
weight?: 'extraLight' | 'light' | 'medium' | 'semiBold';
21+
serif?: boolean;
2022
className?: string;
2123
};
2224

2325
const sizeCss = {
2426
"display-l": largeDisplayHeading,
25-
"headline-l": largeHeadlineHeading,
26-
"title-l": largeTitleHeading,
27+
"display-m": mediumDisplayHeading,
2728
"title-m": mediumTitleHeading,
28-
"title-s": smallTitleHeading
29+
"title-s": smallTitleHeading,
30+
"title-xs": extraSmallTitleHeading,
2931
} as const
3032
const weightCss = {
3133
"extraLight": extraLightWeight,
@@ -37,6 +39,7 @@ const weightCss = {
3739
export default function Heading({
3840
size = "title-m",
3941
weight = 'medium',
42+
serif = false,
4043
className,
4144
...props
4245
}: HeadingProps) {
@@ -46,6 +49,7 @@ export default function Heading({
4649
clsx(
4750
sizeCss[size],
4851
weightCss[weight],
52+
serif && serifFont,
4953
className
5054
)
5155
}

‎src/components/Label/index.css.ts‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import { style } from "@vanilla-extract/css";
22

3-
export const extraLargeLabel = style({
4-
fontSize: "23px",
5-
lineHeight: "130%",
3+
export const largeTabLabel = style({
4+
fontSize: "16px",
5+
lineHeight: "150%",
6+
letterSpacing: "0.05em"
67
});
78
export const largeLabel = style({
8-
fontSize: "18px",
9-
lineHeight: "130%",
9+
fontSize: "16px",
10+
lineHeight: "150%",
1011
});
1112
export const mediumLabel = style({
1213
fontSize: "14px",
13-
lineHeight: "130%",
14+
lineHeight: "150%",
1415
});
15-
export const smallLabel = style({
16-
fontSize: "11px",
17-
lineHeight: "130%",
18-
});
16+
17+
export const serifFont = style({
18+
fontSize: "var(--font-source-serif-4)"
19+
})

‎src/components/Label/index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,28 @@ import { PropsWithChildren } from "react";
22
import clsx from "clsx";
33

44
import {
5-
extraLargeLabel,
65
largeLabel,
6+
largeTabLabel,
77
mediumLabel,
8-
smallLabel,
8+
serifFont,
99
} from "./index.css";
1010

1111

1212
interface LabelProps {
13-
size?: "xl" | "l" | "m" | "s";
13+
size?: "tab-l" | "l" | "m";
14+
serif?: boolean;
1415
className?: string;
1516
};
1617

1718
const sizeCss = {
18-
"xl": extraLargeLabel,
19+
"tab-l": largeTabLabel,
1920
"l": largeLabel,
2021
"m": mediumLabel,
21-
"s": smallLabel
2222
} as const
2323

2424
export default function Label({
2525
size = "m",
26+
serif = false,
2627
className,
2728
children,
2829
}: PropsWithChildren<LabelProps>) {
@@ -31,6 +32,7 @@ export default function Label({
3132
className={
3233
clsx(
3334
sizeCss[size],
35+
serif && serifFont,
3436
className
3537
)
3638
}

‎src/components/Text/index.css.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import { style } from "@vanilla-extract/css";
22

3-
export const largeText = style({
4-
fontSize: "18px",
5-
lineHeight: "150%",
6-
});
73
export const mediumText = style({
84
fontSize: "16px",
9-
lineHeight: "150%",
5+
lineHeight: "200%",
106
});
117
export const smallText = style({
128
fontSize: "14px",
13-
lineHeight: "150%",
9+
lineHeight: "200%",
1410
});
1511

1612
export const lightWeight = style({

‎src/components/Text/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { PropsWithChildren } from "react";
22
import clsx from "clsx";
33

44
import {
5-
largeText,
65
regularWeight,
76
mediumText,
87
mediumWeight,
@@ -12,13 +11,12 @@ import {
1211

1312

1413
export interface TextProps {
15-
size?: "l" | "m" | "s";
14+
size?: "m" | "s";
1615
weight?: 'light' | 'regular' | 'medium';
1716
className?: string;
1817
};
1918

2019
const sizeCss = {
21-
"l": largeText,
2220
"m": mediumText,
2321
"s": smallText
2422
} as const

0 commit comments

Comments
 (0)