diff --git a/src/shared/styles/fonts.scss b/src/shared/styles/fonts.scss index ea3ffa1..0722231 100644 --- 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%); } \ No newline at end of file