font-family, size, weight, style로 글자 모양과 위계를 만듭니다.
font-family에는 사용할 글꼴과 마지막 일반 계열을 함께 적습니다. rem은 사용자 기본 글자 크기를 존중하며 font-weight는 지원되는 굵기 안에서 선택합니다.
h1은 Georgia를 먼저 찾지만 Georgia에는 한글 글자가 없어서, 제목의 한글은 글자 단위로 다음 후보인 serif 계열 글꼴에서 가져옵니다. 문단은 운영체제의 기본 UI 글꼴을 뜻하는 system-ui로 그려지고, font-size 1.125rem은 루트 글자 크기가 기본값 16px일 때 18px가 됩니다. h1의 font-weight: 700은 bold 키워드와 같은 굵기입니다.
글꼴에 필요한 굵기나 기울임 글자가 없으면 브라우저가 기존 글자를 두껍게 칠하거나 비스듬히 눕혀 흉내 낼 수 있습니다. 웹폰트를 쓸 때는 실제로 내려받는 굵기만 font-weight에 쓰고, font-synthesis: none으로 이런 합성 자체를 막을 수도 있습니다.
본문 글자를 지나치게 작게 하거나 읽기 어려운 장식 글꼴을 긴 문장에 사용하지 마세요.
직접 바꿔보세요제목과 본문의 font-family를 서로 바꿔보세요.