Skip to content

πŸ› fix : 폰트 였λ₯˜ ν•΄κ²° 및 ZEN-SERIF 적용 #21

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
KongMezu merged 6 commits into from
Oct 16, 2025
Merged

πŸ› fix : 폰트 였λ₯˜ ν•΄κ²° 및 ZEN-SERIF 적용 #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
300924c
fix : 폰트 였λ₯˜ ν•΄κ²° 및 ZEN-SERIF 적용
KongMezu Oct 15, 2025
408a90a
fix : μœ ν‹Έ μœ„μΉ˜ λ³€κ²½
KongMezu Oct 15, 2025
b47888a
fix : 폰트 였λ₯˜ ν•΄κ²° 및 ZEN-SERIF 적용
KongMezu Oct 15, 2025
c21303f
fix : 폰트 였λ₯˜ ν•΄κ²° 및 ZEN-SERIF μ΅œμ’… 적용
KongMezu Oct 15, 2025
a2350b9
fix : μ˜€νƒ€ μˆ˜μ •
KongMezu Oct 15, 2025
c170c0b
back: 기쑴파일
KongMezu Oct 15, 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
Binary file added public/fonts/ZEN-SERIF-TTF-Regular.woff2
View file
Open in desktop
Binary file not shown.
47 changes: 42 additions & 5 deletions src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@font-face {
font-family: 'ZEN Serif';
src: url('/fonts/ZEN-SERIF-TTF-Regular.woff2') format('woff2');
font-style: normal;
font-display: swap;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
font-size: 62.5%;
}

:root {
/* λ©”μΈμ»¬λŸ¬(MAIN) β†’ mint */
--mint-50: #D9FAFB;
Expand Down Expand Up @@ -54,7 +58,13 @@ html {

/* 폰트 */
--font-sans: 'Pretendard', system-ui, sans-serif;
--font-serif: 'JEN Serif', serif;
--font-serif: 'ZEN Serif', serif;
}


html,body {
font-size: 62.5%;
font-family: var(--font-sans);
}

/* 닀크 λͺ¨λ“œ */
Expand All @@ -65,3 +75,30 @@ html {
}
}

/* @layer utilities */
@layer utilities {
/* Pretendard */
.text-display-lg { font-size:5.7rem; font-weight:300; line-height:6.4rem; letter-spacing:-0.025rem; font-family: var(--font-sans); }
.text-display-md { font-size:5.2rem; font-weight:300; line-height:4.5rem; font-family: var(--font-sans); }
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Oct 15, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Fix line-height smaller than font-size.

The .text-display-md utility has a line-height (4.5rem) that is smaller than its font-size (5.2rem). This will cause text to overlap on multiple lines.

-  .text-display-md { font-size:5.2rem; font-weight:300; line-height:4.5rem; font-family: var(--font-sans); }
+  .text-display-md { font-size:5.2rem; font-weight:300; line-height:5.6rem; font-family: var(--font-sans); }
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.text-display-md { font-size:5.2rem; font-weight:300; line-height:4.5rem; font-family: var(--font-sans); }
.text-display-md { font-size:5.2rem; font-weight:300; line-height:5.6rem; font-family: var(--font-sans); }
πŸ€– Prompt for AI Agents 
In src/styles/globals.css around line 84, the .text-display-md rule sets
font-size: 5.2rem but line-height: 4.5rem (smaller than font-size) which can
cause overlapping; update the line-height to be equal to or greater than the
font-size (e.g., 5.2rem or a unitless value like 1.05–1.2) or use a responsive
unitless multiplier to ensure adequate spacing across breakpoints.

.text-display-sm { font-size:3.6rem; font-weight:300; line-height:4.4rem; font-family: var(--font-sans); }

.text-headline-lg { font-size:3.2rem; font-weight:200; line-height:4rem; font-family: var(--font-sans); }
.text-headline-md { font-size:2.8rem; font-weight:200; line-height:3.2rem; font-family: var(--font-sans); }
.text-headline-sm { font-size:2.4rem; font-weight:200; line-height:3.2rem; font-family: var(--font-sans); }

.text-title-lg { font-size:2.2rem; font-weight:400; line-height:1.75rem; font-family: var(--font-sans); }
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Oct 15, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Fix line-height smaller than font-size.

The .text-title-lg utility has a line-height (1.75rem) significantly smaller than its font-size (2.2rem), causing severe text overlap on multiple lines.

-  .text-title-lg { font-size:2.2rem; font-weight:400; line-height:1.75rem; font-family: var(--font-sans); }
+  .text-title-lg { font-size:2.2rem; font-weight:400; line-height:2.8rem; font-family: var(--font-sans); }
πŸ€– Prompt for AI Agents 
In src/styles/globals.css around line 91, the .text-title-lg rule sets
font-size: 2.2rem but line-height: 1.75rem which is smaller than the font size
and causes overlapping; update the rule so the line-height is at least equal to
or greater than the font-size (use a unitless value like 1.1–1.3 or a rem value
>=2.2rem appropriate for your design, e.g., change line-height to a value such
as 2.5rem or 1.15) to prevent text overlap across multiple lines.

.text-title-md { font-size:1.6rem; font-weight:400; line-height:2.4rem; letter-spacing:0.015rem; font-family: var(--font-sans); }
.text-title-sm { font-size:1.4rem; font-weight:400; line-height:2rem; letter-spacing:0.01rem; font-family: var(--font-sans); }

.text-label-lg { font-size:1.4rem; font-weight:300; line-height:2rem; font-family: var(--font-sans); }
.text-label-md { font-size:1.2rem; font-weight:300; line-height:1.6rem; font-family: var(--font-sans); }
.text-label-sm { font-size:1.1rem; font-weight:300; line-height:1.6rem; font-family: var(--font-sans); }

/* JEN Serif */
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Oct 15, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟑 Minor

Update comment to match current font name.

The comment still says "JEN Serif" but the font has been renamed to "ZEN Serif" throughout the codebase. Please update for consistency.

Apply this diff:

-  /* JEN Serif */
+  /* ZEN Serif */
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/* JEN Serif */
/* ZEN Serif */
πŸ€– Prompt for AI Agents 
In src/styles/globals.css around line 97, update the comment text which
currently reads "JEN Serif" to "ZEN Serif" so it matches the renamed font used
elsewhere in the codebase; simply replace the comment string only, preserving
whitespace and formatting.

.text-display-serif { font-size:3.6rem; font-weight:200; line-height:4.6rem; letter-spacing:0.6rem; font-family: var(--font-serif); }
.text-headline-lg-serif { font-size:3.2rem; font-weight:200; line-height:4rem; letter-spacing:0.2rem; font-family: var(--font-serif); }
.text-headline-md-serif { font-size:2.4rem; font-weight:200; line-height:3.2rem; letter-spacing:0.2rem; font-family: var(--font-serif); }
.text-headline-sm-serif { font-size:2rem; font-weight:200; line-height:2.4rem; letter-spacing:1.2rem; font-family: var(--font-serif); }
.text-label-serif { font-size:1.4rem; font-weight:200; line-height:2rem; letter-spacing:0.4rem; font-family: var(--font-serif); }
}

158 changes: 3 additions & 155 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,162 +100,10 @@ module.exports = {
},
/* font*/
fontFamily: {
sans: ['Pretendard', 'system-ui', 'sans-serif'],
serif: ['JEN Serif', 'serif'],
sans: ['"Pretendard"', 'system-ui', 'sans-serif'],
serif: ['"ZEN Serif"', 'serif'],
},
},
},
plugins: [
function ({ addUtilities }) {
const newUtilities = {
/* Pretendard */
/* DISPLAY */
'.text-display-lg': {
fontSize: '5.7rem', //57px
fontWeight: 300,
lineHeight: '6.4rem', //64px
letterSpacing: '-0.025rem', //-0.25px',
fontFamily: 'Pretendard, system-ui, sans-serif',
},
'.text-display-md': {
fontSize: '5.2rem', //52px
fontWeight: 300,
lineHeight: '4.5rem', //45px
fontFamily: 'Pretendard, system-ui, sans-serif',
},
'.text-display-sm': {
fontSize: '3.6rem', //36px
fontWeight: 300,
lineHeight: '4.4rem', //44px
fontFamily: 'Pretendard, system-ui, sans-serif',
},
/* HEADLINE */
'.text-headline-lg': {
fontSize: '3.2rem', //32px
fontWeight: 200,
lineHeight: '4rem', //40px
fontFamily: 'Pretendard, system-ui, sans-serif',
},
'.text-headline-md': {
fontSize: '2.8rem', //28px
fontWeight: 200,
lineHeight: '3.2rem', //32px
fontFamily: 'Pretendard, system-ui, sans-serif',
},
'.text-headline-sm': {
fontSize: '2.4rem', //24px
fontWeight: 200,
lineHeight: '3.2rem', //32px
fontFamily: 'Pretendard, system-ui, sans-serif',
},

/* TITLE */
'.text-title-lg': {
fontSize: '2.2rem', //22px
fontWeight: 400,
lineHeight: '1.75rem', //28px
fontFamily: 'Pretendard, system-ui, sans-serif',
},
'.text-title-md': {
fontSize: '1.6rem', //16px
fontWeight: 400,
lineHeight: '2.4rem', //24px
letterSpacing: '0.015rem', //0.15px
fontFamily: 'Pretendard, system-ui, sans-serif',
},
'.text-title-sm': {
fontSize: '1.4rem', //14px
fontWeight: 400,
lineHeight: '2rem', //20px
letterSpacing: '0.01rem', //0.1px
fontFamily: 'Pretendard, system-ui, sans-serif',
},
/* LABEL */
'.text-label-lg': {
fontSize: '1.4rem', //14px
fontWeight: 300,
lineHeight: '2rem', //20px
letterSpacing: '0.01rem', //0.1px
fontFamily: 'Pretendard, system-ui, sans-serif',
},
'.text-label-md': {
fontSize: '1.2em', //12px
fontWeight: 300,
lineHeight: '1.6rem', //16px
letterSpacing: '0.05rem', //0.5px
fontFamily: 'Pretendard, system-ui, sans-serif',
},
'.text-label-sm': {
fontSize: '1.1rem', //11px
fontWeight: 300,
lineHeight: '1.6rem', //16px
letterSpacing: '0.05rem', //0.5px
fontFamily: 'Pretendard, system-ui, sans-serif',
},
/* BODY */
'.text-body-lg': {
fontSize: '1.4rem', //14px,
fontWeight: 400,
lineHeight: '2.4rem', //24px
letterSpacing: '0.05rem', //0.5px
fontFamily: 'Pretendard, system-ui, sans-serif',
},
'.text-body-md': {
fontSize: '1.2rem', //12px
fontWeight: 300,
lineHeight: '2rem', //20px
letterSpacing: '0.025rem', //0.25px
fontFamily: 'Pretendard, system-ui, sans-serif',
},
'.text-body-sm': {
fontSize: '1rem', //10px
fontWeight: 200,
lineHeight: '1.6rem', //16px
letterSpacing: '0.04rem', // 0.4px
fontFamily: 'Pretendard, system-ui, sans-serif',
},

/* JEN Serif */
/* DISPLAY */
'.text-display-serif': {
fontSize: '3.6rem', //36px
fontWeight: 200,
lineHeight: '4.6rem', //46px
letterSpacing: '0.6rem', //6px
fontFamily: 'JEN Serif, serif',
},
/* HEADLINE */
'.text-headline-lg-serif': {
fontSize: '3.2rem', //32px
fontWeight: 200,
lineHeight: '4rem', //40px
letterSpacing: '0.2rem', //2px
fontFamily: 'JEN Serif, serif',
},
'.text-headline-md-serif': {
fontSize: '2.4rem', //24px
fontWeight: 200,
lineHeight: '3.2rem', //32px
letterSpacing: '0.2rem', //2px
fontFamily: 'JEN Serif, serif',
},
'.text-headline-sm-serif': {
fontSize: '2rem', //20px
fontWeight: 200,
lineHeight: '2.4rem', //24px
letterSpacing: '1.2rem', //12px
fontFamily: 'JEN Serif, serif',
},
/* LABEL */
'.text-label-serif': {
fontSize: '1.4rem', //14px
fontWeight: 200,
lineHeight: '2rem', //20px
letterSpacing: '0.4rem', //4px
fontFamily: 'JEN Serif, serif',
},
};
addUtilities(newUtilities);
},
],
plugins: [],
};
Loading