H1-H6 태그의 가장 일반적인 글꼴 크기는 무엇입니까?

107

저는 항상 일반적인 모범 사례 기준으로 어디서부터 시작해야할지 확신하지 못했습니다. 예, 귀하의 디자인에 따라 다릅니다.하지만 가장 일반적인 것은 무엇입니까?

내가 현재 시작하는 것은 다음과 같습니다.

h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}

예, 현재 직장에서는 EM을 사용하지 않습니다.

감사

html css frontend

— rsturim
소스

답이 없기 때문에 적절한 질문이라고 생각하지

— 마십시오

트리 몽키, 정말? 의견을 구하는 것은 좋지 않습니까?

— rsturim

내가 가장 좋아하는 것은 Google에서 무언가를 검색 할 때 가장 큰 결과는 StackOverflow 게시물이며 질문이 종료되었거나 보류 중입니다. 시간의 시험을 견디기 위해 지식의 오래된 캡슐화와 같은 것은 없습니다.

— Kyle Kelley

아니요, @rsturim, 의견을 구하는 것은 좋지 않습니다

— Liam

나는 이와 같은 질문을 검색했기 때문에이 특정 스택에 대한 주제를 벗어난 동안 유용하다는 것을 알았습니다. 이 질문을 닫으면 더 이상 대화, 토론 또는 답변을 추가 할 수 없으므로이 질문의 가치가 전체 커뮤니티에 낮아집니다. 다른 주제에서 벗어난 질문이보다 적절한 스택으로 마이그레이션되는 것을 보았습니다. 이 질문에 대해 이렇게 할 수 있습니까? Cheers ~

— Pete

답변:

213

브라우저의 기본 스타일 시트에 따라 다릅니다. 여기 에서 CSS2.1 사용자 에이전트 스타일 시트 기본값의 (비공식) 표를 볼 수 있습니다 .

위에 나열된 페이지에 따라 기본 크기는 다음과 같습니다.

    IE7     IE8     FF2         FF3         Opera   Safari 3.1
H1  24pt    2em     32px        32px        32px    32px       
H2  18pt    1.5em   24px        24px        24px    24px
H3  13.55pt 1.17em  18.7333px   18.7167px   18px    19px
H4  n/a     n/a     n/a         n/a         n/a     n/a
H5  10pt    0.83em  13.2667px   13.2833px   13px    13px
H6  7.55pt  0.67em  10.7333px   10.7167px   10px    11px

또한 살펴볼 가치가있는 것은 HTML 4 의 기본 스타일 시트입니다 . W3C는 이러한 스타일을 기본값으로 사용하도록 권장합니다. 요약 발췌 :

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

이 정보가 도움이되기를 바랍니다.

— 도넛
소스

H6에 대한 HTML 4 권장 사항은 무시되었으며 0.67em을 획득했습니다. 요즘 WebKit과 FF em는 IE8 과 같은 크기를 사용 합니다. w3.org/TR/html-markup/h6.html 은 또한 "일반적인"디스플레이가 0.67em이라고 말합니다.

— Beni Cherniavsky-Paskin 2013

이 또는 임의의 사람이 "이 크기의 제목이있을 것"이라고 말한 이유는 무엇입니까?

— rzb

HTML5 기본값을 포함하도록 답변을 업데이트하는 것이 좋습니다.

— 전능하신 낙타 Moha

여기 HTML5에서 w3.org/TR/html5/rendering.html#sections-and-headings

— Sirens

@ BeniCherniavsky-Paskin 링크가 끊어졌습니다. 새 링크를 게시 할 수 있습니까?

— kuldeep

제목은 일반적으로 굵게 표시됩니다. 이 크기 대응 데모를 위해 해제되었습니다. MSIE와 Opera는 이러한 크기를 동일하게 해석하지만 Gecko 브라우저와 Chrome은 제목 6을 10 픽셀 / 글꼴 크기 1 대신 11 픽셀로, 제목 3을 18 픽셀 / 글꼴 크기 4 대신 19 픽셀로 해석합니다. 직접 비교해도 차이를 말하고 사용 불가능). Gecko는 또한 텍스트를 10 픽셀 이상으로 제한하는 것 같습니다.

— 수짓 아가 왈
소스