[FE] 📚 CSS에서의 Font-size

728x90

😎 오늘의 위클리 페이퍼는
CSS Font-size에 대한 토픽입니다.

👉 사용자가 브라우저 font-size를 변경하였을 때,
이에 대응해서 웹 화면의 요소가 크거나 작아지도록 하려면 어떻게 스타일링 하는 것이 좋을까?

어떤 단위를 사용할까?

사용자가 브라우저의 font-size를 변경하면, 웹 페이지의 요소들이 적절히 크기를 조절하여

사용자 경험을 향상 시킬수 있습니다.

1. 상대적인 크기 단위를 사용

👉 웹 페이지에 절대 단위(px)를 사용할 경우 사용자의 브라우저 font-size 변경을 반영할 수 없습니다.

따라서 이를 반영하기 위해서는 상대적인 단위(%, rem, em)를 사용해야 합니다.

"em"은 부모 요소의 font-size를 기준으로 크기를 결정합니다.
"rem"은 최상위 요소(보통 '<html>' 요소)의 font-size를 기준으로 크기를 결정합니다.

body {
  font-size: 16px; /* 기본값 설정 */
}

p {
  font-size: 1em; /* 부모 요소(여기서는 body)의 font-size와 같은 크기 */
}

em은 하나의 요소에 폰트 크기를 지정하고, 자식 요소에서 em을 적용하면

두 요소의 폰트 크기가 다르게 적용됩니다.

따라서 요소가 깊이 중첩될 수 있을 때는 단위로 em을 사용하면 CSS를 보는 것만으로 개발자가 어떤 크기인지 예측하기 어렵습니다. 🤦‍♂️

rem은 항상 루트 폰트 사이즈를 참조합니다. 일반적인 브라우저 기본 폰트 크기가 16px이고

이를 이용하면 사용자가 브라우저 폰트 크기 설정을 변경하지 않는 일반적인 경우,

1rem은 16px 크기라 보고 스타일 하면됩니다.

하지만, Figma는 px기준으로 넘어오기 때문에, px -> rem 환산이 번거롭습니다.

이런 경우, 위와 같이 많이 사용하는 크기 단위를 CSS 변수 설정하는 방법으로 해결할 수 있습니다.

html {
  --font-size-300: 0.75rem; /* 12px */
  --font-size-400: 1rem;    /* 16px, base */
  --font-size-600: 1.5rem;  /* 24px */
  --font-size-800: 2rem;    /* 32px */
  --font-size-900: 2.25rem; /* 36px */
  /* ... */
}

또는, 0.1rem = 1px이 되도록 설정해서 해결할 수 있습니다.

html {
    font-size: 62.5%; /* 16px * 62.5% = 10px = 1rem */
}

body {
    font-size: 1.6rem; /* 브라우저에서 설정한 폰트 크기가 기본값이 되도록 설정 */
}

이 경우, Figma에서 넘어오는 1px = 0.1rem으로 환산해서 작업할 수 있습니다.

6.25%가 아닌 62.5% 사용하는 이유는 웹 브라우저의 종류나 사용자 설정에 따라

rem 계산에 영향을 미치기 때문입니다.

2. 미디어 쿼리 활용

👉 사용자가 font-size를 변경할 때마다, 이에 따라 요소들의 크기를 조정하기 위해 미디어 쿼리를 활용합니다.

/* 작은 화면 크기일 때 */
@media (max-width: 600px) {
  p {
    font-size: 0.8em; /* 작은 화면일 때 텍스트 크기 감소 */
  }
}

/* 큰 화면 크기일 때 */
@media (min-width: 1200px) {
  p {
    font-size: 1.2em; /* 큰 화면일 때 텍스트 크기 증가 */
  }
}

3. Flexible Layouts

👉 요소의 크기를 유동적으로 조절하여 사용자의 font-size 변경에 자연스럽게 대응하라 수 있도록 합니다.

Flexbox 또는 CSS Grid를 사용하여 요소의 배치와 크기 조절을 유연하게 처리할 수 있습니다.

4. 단위 조정

👉 사용자의 설정에 따라 font-size 단위를 변경할 수 있습니다.

body {
  font-size: 16px; /* 기본값 */
}

@media (max-width: 600px) {
  body {
    font-size: 14px; /* 작은 화면일 때 font-size 감소 */
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 18px; /* 큰 화면일 때 font-size 증가 */
  }
}

이와 같은 방법들을 조합하여 사용자가 브라우저의 font-size를 변경했을 때, 웹페이지의

요소들이 적절하게 크기를 조절하여 읽기 편한 경험을 제공할 수 있습니다.