🛠️ fonts 동작 오류 개선 (#29)

- font weight 및 letter-spacing 수정 - 폰트 사이즈 반응형 처리 - 가독성 향상을 위해 media query 한 줄 처리
CollaBu · May 4, 2024 · 7d93c31 · 7d93c31
1 parent a5a1c14
commit 7d93c31
Showing 1 changed file with 41 additions and 16 deletions.
diff --git a/src/shared/styles/fonts.scss b/src/shared/styles/fonts.scss
@@ -2,7 +2,7 @@
   font-family: 'Pretendard', sans-serif;
   font-weight: $weight;
   font-size: $size * 1rem;
-  letter-spacing: -3%;
+  letter-spacing: -0.03rem;
   line-height: $line-height;
 
   @font-face {
@@ -13,20 +13,45 @@
     font-weight: $weight;
     font-style: normal;
   }
+
+  @media (min-height: 1px) and (max-height: 480px) { font-size: $size * 0.95rem; } // iPhone 3, 4S
+  @media (min-height: 481px) and (max-height: 568px) { font-size: $size * 1rem; } // iPhone 5, SE 1
+  @media (min-height: 569px) and (max-height: 667px) { font-size: $size * 1.17rem; } // iPhone 6, 6s, 7, 8, SE 2/3
+  @media (min-height: 668px) and (max-height: 736px) { font-size: $size * 1.22rem; } // iPhone 6+, 6s+, 7+, 8+ 
+  @media (min-height: 737px) and (max-height: 812px) { font-size: $size * 1.25rem; } // iPhone X, XS, 11, 12 mini, 13 mini
+  @media (min-height: 813px) and (max-height: 844px) { font-size: $size * 1.27rem; } // iPhone 12, 12 Pro, 13, 13 Pro, 14, 15
+  @media (min-height: 845px) and (max-height: 852px) { font-size: $size * 1.27rem; } // iPhone 14 Pro, 15 Pro
+  @media (min-height: 853px) and (max-height: 896px) { font-size: $size * 1.32rem; } // iPhone XR, XS Max, 11, 11 Pro Max
+  @media (min-height: 897px) and (max-height: 926px) { font-size: $size * 1.32rem; } // iPhone 12 Pro Max, 13 Pro Max, 14 Plus
+  @media (min-height: 927px) and (max-height: 932px) { font-size: $size * 1.35rem; } // iPhone 14 Pro Max
 }
 
-.h1bold { @include font-style(bold, 1.5, 130%); } // 24px
-.h1semi { @include font-style(semibold, 1.5, 130%); } // 24px
-.h2semi { @include font-style(semibold, 1.25, 130%); } // 20px
-.h3semi { @include font-style(semibold, 1, 140%); } // 16px
-.h4semi { @include font-style(semibold, 0.875, 130%); } // 14px
-.h4md { @include font-style(medium, 0.875, 130%); } // 14px
-
-.b1md { @include font-style(medium, 0.75, 130%) } // 12px
-.b1semi { @include font-style(semibold, 0.75, 130%); } // 12px
-.b1reg { @include font-style(regular, 0.75, 140%); } // 12px
-.b2md { @include font-style(medium, 0.6875, 130%); } // 11px
-.b2semi { @include font-style(semibold, 0.6875, 130%); } // 11px
-.b2reg { @include font-style(regular, 0.6875, 130%); } // 11px
-.b3md { @include font-style(medium, 0.5625, 130%); } // 9px
-.b4md { @include font-style(medium, 0.5, 130%); } // 8px
+/* 24px */
+.h1bold { @include font-style(700, 1.5, 130%); }
+.h1semi { @include font-style(600, 1.5, 130%); }
+
+/* 20px */
+.h2semi { @include font-style(600, 1.25, 130%); }
+
+/* 16px */
+.h3semi { @include font-style(600, 1, 140%); }
+
+/* 14px */
+.h4semi { @include font-style(600, 0.875, 130%); }
+.h4md { @include font-style(500, 0.875, 130%); }
+
+/* 12px */
+.b1semi { @include font-style(600, 0.75, 130%); }
+.b1md { @include font-style(500, 0.75, 130%) }
+.b1reg { @include font-style(400, 0.75, 140%); }
+
+/* 11px */
+.b2md { @include font-style(500, 0.6875, 130%); }
+.b2semi { @include font-style(600, 0.6875, 130%); }
+.b2reg { @include font-style(400, 0.6875, 130%); }
+
+/* 9px */
+.b3md { @include font-style(500, 0.5625, 130%); }
+
+/* 8px */
+.b4md { @include font-style(500, 0.5, 130%); }