font-family, size, weight, style로 글자 모양과 위계를 만듭니다.
font-family에는 사용할 글꼴과 마지막 일반 계열을 함께 적습니다. rem은 사용자 기본 글자 크기를 존중하며 font-weight는 지원되는 굵기 안에서 선택합니다.
이번 예제의 출발점은 font: 700 1.25rem/1.5 system-ui, sans-serif;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 제목과 본문의 font-family를 서로 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
본문 글자를 지나치게 작게 하거나 읽기 어려운 장식 글꼴을 긴 문장에 사용하지 마세요.
직접 바꿔보세요제목과 본문의 font-family를 서로 바꿔보세요.