[CSS] 텍스트와 웹 폰트 스타일링 최적화

이번 포스팅에서는 [CSS 텍스트] 파트의 세부 주제인 타이포그래피 노하우에 대하여 상세히 알아보겠습니다.

1. 웹 폰트 로딩 깜빡임(FOIT/FOUT) 제어 노하우

커스텀 폰트가 로드되기 전까지 텍스트가 안 보이거나(FOIT), 기본 폰트에서 갑자기 바뀌는(FOUT) 현상은 UX를 크게 저하시킵니다. font-display 속성을 통해 이를 우아하게 해결할 수 있습니다.

@font-face {
  font-family: 'Pretendard';
  src: url('Pretendard-Regular.woff2') format('woff2');
  
  /* 폰트가 로드되기 전까지 시스템 기본 폰트를 먼저 보여줌 (사용자 대기 시간 최소화) */
  font-display: swap; 
}

2. 실무에서 100번 쓰이는 멀티라인 말줄임표(Ellipsis)

한 줄 말줄임은 쉽지만, 블로그나 카드 UI에서 2~3줄까지만 보여주고 뒤에 '...'을 붙이는 멀티라인 말줄임은 Webkit 전용 속성을 활용해야 합니다.

.post-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 여기서 보여줄 줄(Line) 수를 결정합니다 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* 반응형에 대비해 적절한 높이나 line-height 지정 권장 */
  line-height: 1.5;
}

---

지금까지 웹 폰트 로딩 최적화와 멀티라인 말줄임표 등 실무 타이포그래피 노하우를 살펴보았습니다. 이어지는 다음 포스팅에서 레이아웃 기초를 다루어보겠습니다.