[{"data":1,"prerenderedAt":581},["ShallowReactive",2],{"article:/how-to-pick-web-font-and-size":3,"related:/how-to-pick-web-font-and-size":580},{"id":4,"title":5,"body":6,"category":559,"created":560,"description":561,"extension":562,"image":563,"meta":564,"navigation":231,"path":575,"published":231,"rawbody":576,"seo":577,"stem":578,"updated":560,"__hash__":579},"content/how-to-pick-web-font-and-size.md","웹 폰트와 사이즈는 어떻게 결정해야할까?",{"type":7,"value":8,"toc":552},"minimark",[9,22,25,28,31,124,162,165,168,178,183,186,189,192,203,273,276,279,282,285,319,337,340,344,355,358,443,458,467,476,482,509,512,515,518,533,536,540,548],[10,11,12,13,17,18,21],"p",{},"웹 사이트의 완성도를 결정하는 가장 중요한 요소 중 하나는 바로 ",[14,15,16],"strong",{},"폰트"," 입니다. 폰트는 한국어로 ",[14,19,20],{},"서체"," 정도로 해석할 수 있겠고, 비슷한 활자의 모음이라고 생각하면 됩니다.",[10,23,24],{},"이 폰트는 같은 Family라면 (Serif, Sans-serif 등) 얼핏보면 구분하기 어려울 정도로 미세하게 다릅니다. 하지만, 이 미세한 차이가 독자의 피로도를 크게 좌우하기 때문에 신중하게 선택해야합니다.",[10,26,27],{},"그런데, 사실 이 폰트를 채택하는 기준에는 정답이 없습니다. 브랜딩이나 웹사이트 성격에 맞게 결정하기 때문입니다. 브런치나 미디엄같은 블로그 서비스라면 독자가 읽기 편한 폰트를 선택하는게 좋은 선택이겠죠.",[10,29,30],{},"개인적으로 추천하는 웹 폰트 설정은 이렇습니다. CSS 한 줄만 추가하면 됩니다.",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","html {\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica\n      Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n}\n","css","",[39,40,41,54,89,118],"code",{"__ignoreMap":37},[42,43,46,50],"span",{"class":44,"line":45},"line",1,[42,47,49],{"class":48},"sBMFI","html",[42,51,53],{"class":52},"sMK4o"," {\n",[42,55,57,61,64,68,71,74,76,79,81,84,86],{"class":44,"line":56},2,[42,58,60],{"class":59},"sqsOY","  font-family",[42,62,63],{"class":52},":",[42,65,67],{"class":66},"sTEyZ"," -apple-system",[42,69,70],{"class":52},",",[42,72,73],{"class":66}," BlinkMacSystemFont",[42,75,70],{"class":52},[42,77,78],{"class":66}," Segoe UI",[42,80,70],{"class":52},[42,82,83],{"class":66}," Roboto",[42,85,70],{"class":52},[42,87,88],{"class":66}," Helvetica\n",[42,90,92,95,97,100,102,105,107,110,112,115],{"class":44,"line":91},3,[42,93,94],{"class":66},"      Neue",[42,96,70],{"class":52},[42,98,99],{"class":66}," Arial",[42,101,70],{"class":52},[42,103,104],{"class":66}," sans-serif",[42,106,70],{"class":52},[42,108,109],{"class":66}," Apple Color Emoji",[42,111,70],{"class":52},[42,113,114],{"class":66}," Segoe UI Emoji",[42,116,117],{"class":52},";\n",[42,119,121],{"class":44,"line":120},4,[42,122,123],{"class":52},"}\n",[10,125,126,127,134,135,134,140,145,146,134,151,134,156,161],{},"이 폰트 구성을 사용하는 웹사이트는 대표적으로 외국 서비스 중엔 ",[128,129,133],"a",{"href":130,"rel":131},"https://www.github.com",[132],"nofollow","Github",", ",[128,136,139],{"href":137,"rel":138},"https://notion.so",[132],"Notion",[128,141,144],{"href":142,"rel":143},"https://www.producthunt.com",[132],"Product Hunt","가 있고, 국내 서비스 중엔 ",[128,147,150],{"href":148,"rel":149},"https://class101.net",[132],"클래스101",[128,152,155],{"href":153,"rel":154},"https://www.myrealtrip.com",[132],"마이리얼트립",[128,157,160],{"href":158,"rel":159},"https://taling.me/",[132],"탈잉"," 등이 있습니다. (완전 똑같지는 않지만, 거의 같은 구성입니다.)",[10,163,164],{},"위에 나열한 폰트들은 모두 시스템 폰트이고, 개인적으로는 어디에나 잘 어울리는 기본 중에 기본같은 녀석이라고 생각합니다. CSS의 font-family 속성은 제일 앞에 있는 서체부터 찾기 시작하고, 만약 있으면 그 서체로 텍스트를 렌더링합니다.",[10,166,167],{},"시스템 폰트의 장점은 외부 리소스를 가져올 필요 없이 사용할 수 있다는 점입니다. 사용자 컴퓨터에 이미 탑재가 되어있기 때문입니다. 폰트가 웹 리소스 로딩에 차지하는 비율이 굉장히 크기 때문에, 특별한 이유가 있지 않다면 시스템 폰트로 구성하는게 성능 최적화에 큰 도움이 됩니다.",[169,170,171],"blockquote",{},[10,172,173,174,177],{},"웹 콘텐츠에 한중일 언어가 포함되는 경우, ",[39,175,176],{},"system-ui","는 사용하지 않는게 좋습니다. 현재 Firefox와 Edge에서 fallback 폰트를 찾지 못하는 이슈가 있습니다.",[179,180,182],"h2",{"id":181},"폰트-사이즈","폰트 사이즈",[10,184,185],{},"폰트의 크기를 채택하는 건, 폰트를 고르는 것 만큼이나 중요합니다. 콘텐츠 전반적으로 폰트 크기가 크면 미관상 좋지 않습니다. 어르신들이 카카오톡을 사용하는 걸 슬쩍 보고 '와 폰트 진짜 크다!' 했던 경험이 한 번쯤은 있을겁니다. 폰트가 너무 크다보니 UI가 전부 흐트러져서 좋아보이진 않지만, 노안때문에 어쩔 수 없습니다.",[10,187,188],{},"그렇다고 너무 폰트가 작아버리면 읽기가 너무 힘듭니다. 브라우저, OS 환경에 따라 폰트가 깨져 보이기도 합니다. 이제는 유저들이 정말 다양한 환경에서 텍스트를 읽기 때문에, 우리 웹 개발자/디자이너들이 신경써서 대응할 수 밖에 없겠습니다.",[10,190,191],{},"폰트 시스템을 잘 설계하려면, 기초를 잘 잡아야 합니다. 여기서 말하는 기초란 기본 (Default) 폰트 사이즈입니다. 이것도 정답은 없습니다. 그냥 우리가 만드려는 사이트와 비슷한 성격을 가진 다른 사이트들을 참고해서 기본 사이즈를 정하는게 옳은 방향이겠죠.",[10,193,194,195,198,199,202],{},"저는 이 블로그의 기본 폰트 사이즈를 ",[39,196,197],{},"16px",", 모바일 환경에선 ",[39,200,201],{},"14px","로 설정했습니다. CSS로는 이렇게 작성합니다.",[32,204,206],{"className":34,"code":205,"language":36,"meta":37,"style":37},"html {\n  font-size: 14px;\n\n  @media (min-width: 768px) {\n    font-size: 16px;\n  }\n}\n",[39,207,208,214,227,233,249,262,268],{"__ignoreMap":37},[42,209,210,212],{"class":44,"line":45},[42,211,49],{"class":48},[42,213,53],{"class":52},[42,215,216,219,221,225],{"class":44,"line":56},[42,217,218],{"class":59},"  font-size",[42,220,63],{"class":52},[42,222,224],{"class":223},"sbssI"," 14px",[42,226,117],{"class":52},[42,228,229],{"class":44,"line":91},[42,230,232],{"emptyLinePlaceholder":231},true,"\n",[42,234,235,238,241,243,246],{"class":44,"line":120},[42,236,237],{"class":66},"  @media (",[42,239,240],{"class":59},"min-width",[42,242,63],{"class":52},[42,244,245],{"class":223}," 768px",[42,247,248],{"class":66},") {\n",[42,250,252,255,257,260],{"class":44,"line":251},5,[42,253,254],{"class":59},"    font-size",[42,256,63],{"class":52},[42,258,259],{"class":223}," 16px",[42,261,117],{"class":52},[42,263,265],{"class":44,"line":264},6,[42,266,267],{"class":52},"  }\n",[42,269,271],{"class":44,"line":270},7,[42,272,123],{"class":66},[10,274,275],{},"하지만 많은 웹사이트들이 단 한 개의 사이즈만 사용하진 않습니다. 정보의 위계질서에 따라 텍스트 일부를 작게, 혹은 크게 표시해야 할 필요가 있기 때문입니다.",[10,277,278],{},"예를 들어 우리가 글을 쓸 때 제목은 크게 쓰고, 본문은 적당한 사이즈, 그리고 각주 같은 것들은 작게 쓰는게 보기 좋고, 이런 패턴이 거의 대부분의 사람들에게 익숙합니다.",[10,280,281],{},"근데 여기서 중요한 건, 매 페이지마다 제목이나 본문의 글자 크기가 달라지면 안되겠죠. 엄밀히 말하면 안될 이유는 없지만, 굉장히 불편할겁니다. 사람들은 규칙적인 것에 안정감을 느끼기 때문입니다.",[10,283,284],{},"규칙적이면서 효율적으로 사이즈를 관리하려면 이 사이즈들을 숫자로만 나타내는 게 아니라, 나름의 유저 친화적인 작명이 필요합니다. 예를 들면 이렇게 구성할 수 있습니다.",[286,287,288,295,301,307,313],"ul",{},[289,290,291,294],"li",{},[39,292,293],{},"font-xs",": 12px",[289,296,297,300],{},[39,298,299],{},"font-sm",": 14px",[289,302,303,306],{},[39,304,305],{},"font-base",": 16px",[289,308,309,312],{},[39,310,311],{},"font-lg",": 18px",[289,314,315,318],{},[39,316,317],{},"font-xl",": 20px",[10,320,321,322,324,325,327,328,330,331,333,334,336],{},"대제목은 ",[39,323,317],{},", 소제목은 ",[39,326,311],{},", 본문은 ",[39,329,305],{},", 각주나 조금 덜 중요한 것들은 ",[39,332,299],{},"나 ",[39,335,293],{},"로 사용하면 개발하는 사람 입장에서는 엄청 편하겠죠.",[10,338,339],{},"눈치 채셨겠지만, 잘 짜여진 폰트 디자인 시스템은 크기의 증감이 Base로 부터 규칙적입니다. 이게 모든 상황에서 정답은 아닐 수 있지만, 대체로 이런 규칙을 갖추는 게 안정적이라고 합니다.",[179,341,343],{"id":342},"rem-vs-px","rem vs px",[10,345,346,347,350,351,354],{},"CSS에서 폰트 사이즈를 결정할 때 주로 ",[39,348,349],{},"rem","이나 ",[39,352,353],{},"px","이라는 단위를 사용하게 됩니다. rem은 HTML 최상위 태그에 적용된 폰트 사이즈에 의존해서 크기가 결정되고, px은 어떠한 경우에도 설정한 값으로만 보여집니다.",[10,356,357],{},"예를 들어 우리가 이렇게 CSS를 적용했습니다.",[32,359,361],{"className":34,"code":360,"language":36,"meta":37,"style":37},"html {\n  font-size: 16px; // 만약 설정하지 않는다면, 브라우저 기본 사이즈가 설정됩니다. 일반적으로 16px입니다.\n}\n\n.p1 {\n  font-size: 1.5rem;\n}\n.p2 {\n  font-size: 24px;\n}\n",[39,362,363,369,383,387,391,401,412,416,426,438],{"__ignoreMap":37},[42,364,365,367],{"class":44,"line":45},[42,366,49],{"class":48},[42,368,53],{"class":52},[42,370,371,373,375,377,380],{"class":44,"line":56},[42,372,218],{"class":59},[42,374,63],{"class":52},[42,376,259],{"class":223},[42,378,379],{"class":52},";",[42,381,382],{"class":66}," // 만약 설정하지 않는다면, 브라우저 기본 사이즈가 설정됩니다. 일반적으로 16px입니다.\n",[42,384,385],{"class":44,"line":91},[42,386,123],{"class":52},[42,388,389],{"class":44,"line":120},[42,390,232],{"emptyLinePlaceholder":231},[42,392,393,396,399],{"class":44,"line":251},[42,394,395],{"class":52},".",[42,397,398],{"class":48},"p1",[42,400,53],{"class":52},[42,402,403,405,407,410],{"class":44,"line":264},[42,404,218],{"class":59},[42,406,63],{"class":52},[42,408,409],{"class":223}," 1.5rem",[42,411,117],{"class":52},[42,413,414],{"class":44,"line":270},[42,415,123],{"class":52},[42,417,419,421,424],{"class":44,"line":418},8,[42,420,395],{"class":52},[42,422,423],{"class":48},"p2",[42,425,53],{"class":52},[42,427,429,431,433,436],{"class":44,"line":428},9,[42,430,218],{"class":59},[42,432,63],{"class":52},[42,434,435],{"class":223}," 24px",[42,437,117],{"class":52},[42,439,441],{"class":44,"line":440},10,[42,442,123],{"class":52},[10,444,445,446,449,450,453,454,457],{},"결과적으로 ",[39,447,448],{},".p1","과 ",[39,451,452],{},".p2"," 모두 ",[39,455,456],{},"24px","로 렌더링됩니다. rem은 앞서 말한 것 처럼 Root 태그의 사이즈인 16px과 자신에게 설정된 1.5를 곱해 24px라는 값이 나오게 된 것입니다.",[10,459,460,461,463,464,466],{},"저는 ",[39,462,349],{},"을 사용하는걸 권장드립니다. 이유는 ",[39,465,349],{},"은 사용자 환경에 따라 유동적으로 바뀌기 때문입니다. 우리가 폰트 사이즈를 유동적으로 해야하는 이유는, 사용자의 환경을 예측할 수 없기 때문입니다.",[10,468,469,470,472,473,475],{},"아까 말했던 카카오톡을 사용하는 어른들의 사례를 다시 떠올려봅시다. 만약 우리가 ",[39,471,353],{},"로 모든 콘텐츠의 사이즈를 고정해버리면 원래 폰트를 크게 보는 사람들을 고려하지 않는 셈이 되어버립니다. 하지만 최상위 태그에 기본 값을 지정하지 않은 상태에서 ",[39,474,349],{},"을 이용하면 사용자의 환경에 맞게 렌더링할 수 있게 됩니다. 하지만 역시 정답은 없습니다. 글자가 커지면서 UI가 흐트러지는 게 싫다면 rem을 쓰지 않는게 옳은 방향이겠죠.",[10,477,478,479,481],{},"만약 ",[39,480,349],{},"을 사용하는 경우 아까 설정한 폰트 디자인 시스템은 이렇게 바뀝니다.",[286,483,484,489,494,499,504],{},[289,485,486,488],{},[39,487,293],{},": 0.75rem",[289,490,491,493],{},[39,492,299],{},": 0.875rem",[289,495,496,498],{},[39,497,305],{},": 1rem",[289,500,501,503],{},[39,502,311],{},": 1.125rem",[289,505,506,508],{},[39,507,317],{},": 1.25rem",[10,510,511],{},"일반적으로 브라우저의 기본 폰트 사이즈는 16px이므로, 결과값은 아까랑 같습니다.",[179,513,514],{"id":514},"결론",[10,516,517],{},"폰트 모양과 사이즈를 결정하는데 있어서 고려해야할 요소들을 정리해보았습니다. 2줄 요약하자면 이렇습니다.",[286,519,520,527],{},[289,521,522,523,526],{},"폰트는 ",[14,524,525],{},"시스템 폰트","를 사용하자. 웹 리소스 로딩을 많이 줄일 수 있다.",[289,528,529,530,532],{},"폰트 사이즈는 px대신 ",[39,531,349],{},"을 사용하자. 사용자 브라우저 사이즈에 맞게 유동적으로 대응할 수 있다.",[10,534,535],{},"사실이 두 가지 말고도 자간, 줄간격과 행간까지 고려해야하는데, 그건 다음 포스팅에서 알아보도록 하겠습니다.",[537,538,539],"h3",{"id":539},"참고",[286,541,542],{},[289,543,544],{},[128,545,546],{"href":546,"rel":547},"https://github.com/necolas/normalize.css/issues/665",[132],[549,550,551],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":37,"searchDepth":91,"depth":91,"links":553},[554,555,556],{"id":181,"depth":56,"text":182},{"id":342,"depth":56,"text":343},{"id":514,"depth":56,"text":514,"children":557},[558],{"id":539,"depth":91,"text":539},"design","2020-12-21","웹 사이트의 완성도를 결정하는 가장 중요한 요소 중 하나는 바로 폰트 입니다. 폰트는 한국어로 서체 정도로 해석할 수 있겠고, 비슷한 활자의 모음이라고 생각하면 됩니다.","md","https://user-images.githubusercontent.com/20244536/102753419-964e0c80-43ae-11eb-837a-fd902643f37a.png",{"excerpt":565},{"type":7,"value":566},[567,573],[10,568,12,569,17,571,21],{},[14,570,16],{},[14,572,20],{},[10,574,24],{},"/how-to-pick-web-font-and-size","---\ncategory: design\ntitle: 웹 폰트와 사이즈는 어떻게 결정해야할까?\nimage: https://user-images.githubusercontent.com/20244536/102753419-964e0c80-43ae-11eb-837a-fd902643f37a.png\nupdated: 2020-12-21\ncreated: 2020-12-21\npublished: true\n---\n\n웹 사이트의 완성도를 결정하는 가장 중요한 요소 중 하나는 바로 **폰트** 입니다. 폰트는 한국어로 **서체** 정도로 해석할 수 있겠고, 비슷한 활자의 모음이라고 생각하면 됩니다.\n\n이 폰트는 같은 Family라면 (Serif, Sans-serif 등) 얼핏보면 구분하기 어려울 정도로 미세하게 다릅니다. 하지만, 이 미세한 차이가 독자의 피로도를 크게 좌우하기 때문에 신중하게 선택해야합니다.\n\n\u003C!--more-->\n\n그런데, 사실 이 폰트를 채택하는 기준에는 정답이 없습니다. 브랜딩이나 웹사이트 성격에 맞게 결정하기 때문입니다. 브런치나 미디엄같은 블로그 서비스라면 독자가 읽기 편한 폰트를 선택하는게 좋은 선택이겠죠.\n\n개인적으로 추천하는 웹 폰트 설정은 이렇습니다. CSS 한 줄만 추가하면 됩니다.\n\n```css\nhtml {\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica\n      Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n}\n```\n\n이 폰트 구성을 사용하는 웹사이트는 대표적으로 외국 서비스 중엔 [Github](https://www.github.com), [Notion](https://notion.so), [Product Hunt](https://www.producthunt.com)가 있고, 국내 서비스 중엔 [클래스101](https://class101.net), [마이리얼트립](https://www.myrealtrip.com), [탈잉](https://taling.me/) 등이 있습니다. (완전 똑같지는 않지만, 거의 같은 구성입니다.)\n\n위에 나열한 폰트들은 모두 시스템 폰트이고, 개인적으로는 어디에나 잘 어울리는 기본 중에 기본같은 녀석이라고 생각합니다. CSS의 font-family 속성은 제일 앞에 있는 서체부터 찾기 시작하고, 만약 있으면 그 서체로 텍스트를 렌더링합니다.\n\n시스템 폰트의 장점은 외부 리소스를 가져올 필요 없이 사용할 수 있다는 점입니다. 사용자 컴퓨터에 이미 탑재가 되어있기 때문입니다. 폰트가 웹 리소스 로딩에 차지하는 비율이 굉장히 크기 때문에, 특별한 이유가 있지 않다면 시스템 폰트로 구성하는게 성능 최적화에 큰 도움이 됩니다.\n\n> 웹 콘텐츠에 한중일 언어가 포함되는 경우, `system-ui`는 사용하지 않는게 좋습니다. 현재 Firefox와 Edge에서 fallback 폰트를 찾지 못하는 이슈가 있습니다.\n\n## 폰트 사이즈\n\n폰트의 크기를 채택하는 건, 폰트를 고르는 것 만큼이나 중요합니다. 콘텐츠 전반적으로 폰트 크기가 크면 미관상 좋지 않습니다. 어르신들이 카카오톡을 사용하는 걸 슬쩍 보고 '와 폰트 진짜 크다!' 했던 경험이 한 번쯤은 있을겁니다. 폰트가 너무 크다보니 UI가 전부 흐트러져서 좋아보이진 않지만, 노안때문에 어쩔 수 없습니다.\n\n그렇다고 너무 폰트가 작아버리면 읽기가 너무 힘듭니다. 브라우저, OS 환경에 따라 폰트가 깨져 보이기도 합니다. 이제는 유저들이 정말 다양한 환경에서 텍스트를 읽기 때문에, 우리 웹 개발자/디자이너들이 신경써서 대응할 수 밖에 없겠습니다.\n\n폰트 시스템을 잘 설계하려면, 기초를 잘 잡아야 합니다. 여기서 말하는 기초란 기본 (Default) 폰트 사이즈입니다. 이것도 정답은 없습니다. 그냥 우리가 만드려는 사이트와 비슷한 성격을 가진 다른 사이트들을 참고해서 기본 사이즈를 정하는게 옳은 방향이겠죠.\n\n저는 이 블로그의 기본 폰트 사이즈를 `16px`, 모바일 환경에선 `14px`로 설정했습니다. CSS로는 이렇게 작성합니다.\n\n```css\nhtml {\n  font-size: 14px;\n\n  @media (min-width: 768px) {\n    font-size: 16px;\n  }\n}\n```\n\n하지만 많은 웹사이트들이 단 한 개의 사이즈만 사용하진 않습니다. 정보의 위계질서에 따라 텍스트 일부를 작게, 혹은 크게 표시해야 할 필요가 있기 때문입니다.\n\n예를 들어 우리가 글을 쓸 때 제목은 크게 쓰고, 본문은 적당한 사이즈, 그리고 각주 같은 것들은 작게 쓰는게 보기 좋고, 이런 패턴이 거의 대부분의 사람들에게 익숙합니다.\n\n근데 여기서 중요한 건, 매 페이지마다 제목이나 본문의 글자 크기가 달라지면 안되겠죠. 엄밀히 말하면 안될 이유는 없지만, 굉장히 불편할겁니다. 사람들은 규칙적인 것에 안정감을 느끼기 때문입니다.\n\n규칙적이면서 효율적으로 사이즈를 관리하려면 이 사이즈들을 숫자로만 나타내는 게 아니라, 나름의 유저 친화적인 작명이 필요합니다. 예를 들면 이렇게 구성할 수 있습니다.\n\n- `font-xs`: 12px\n- `font-sm`: 14px\n- `font-base`: 16px\n- `font-lg`: 18px\n- `font-xl`: 20px\n\n대제목은 `font-xl`, 소제목은 `font-lg`, 본문은 `font-base`, 각주나 조금 덜 중요한 것들은 `font-sm`나 `font-xs`로 사용하면 개발하는 사람 입장에서는 엄청 편하겠죠.\n\n눈치 채셨겠지만, 잘 짜여진 폰트 디자인 시스템은 크기의 증감이 Base로 부터 규칙적입니다. 이게 모든 상황에서 정답은 아닐 수 있지만, 대체로 이런 규칙을 갖추는 게 안정적이라고 합니다.\n\n## rem vs px\n\nCSS에서 폰트 사이즈를 결정할 때 주로 `rem`이나 `px`이라는 단위를 사용하게 됩니다. rem은 HTML 최상위 태그에 적용된 폰트 사이즈에 의존해서 크기가 결정되고, px은 어떠한 경우에도 설정한 값으로만 보여집니다.\n\n예를 들어 우리가 이렇게 CSS를 적용했습니다.\n\n```css\nhtml {\n  font-size: 16px; // 만약 설정하지 않는다면, 브라우저 기본 사이즈가 설정됩니다. 일반적으로 16px입니다.\n}\n\n.p1 {\n  font-size: 1.5rem;\n}\n.p2 {\n  font-size: 24px;\n}\n```\n\n결과적으로 `.p1`과 `.p2` 모두 `24px`로 렌더링됩니다. rem은 앞서 말한 것 처럼 Root 태그의 사이즈인 16px과 자신에게 설정된 1.5를 곱해 24px라는 값이 나오게 된 것입니다.\n\n저는 `rem`을 사용하는걸 권장드립니다. 이유는 `rem`은 사용자 환경에 따라 유동적으로 바뀌기 때문입니다. 우리가 폰트 사이즈를 유동적으로 해야하는 이유는, 사용자의 환경을 예측할 수 없기 때문입니다.\n\n아까 말했던 카카오톡을 사용하는 어른들의 사례를 다시 떠올려봅시다. 만약 우리가 `px`로 모든 콘텐츠의 사이즈를 고정해버리면 원래 폰트를 크게 보는 사람들을 고려하지 않는 셈이 되어버립니다. 하지만 최상위 태그에 기본 값을 지정하지 않은 상태에서 `rem`을 이용하면 사용자의 환경에 맞게 렌더링할 수 있게 됩니다. 하지만 역시 정답은 없습니다. 글자가 커지면서 UI가 흐트러지는 게 싫다면 rem을 쓰지 않는게 옳은 방향이겠죠.\n\n만약 `rem`을 사용하는 경우 아까 설정한 폰트 디자인 시스템은 이렇게 바뀝니다.\n\n- `font-xs`: 0.75rem\n- `font-sm`: 0.875rem\n- `font-base`: 1rem\n- `font-lg`: 1.125rem\n- `font-xl`: 1.25rem\n\n일반적으로 브라우저의 기본 폰트 사이즈는 16px이므로, 결과값은 아까랑 같습니다.\n\n## 결론\n\n폰트 모양과 사이즈를 결정하는데 있어서 고려해야할 요소들을 정리해보았습니다. 2줄 요약하자면 이렇습니다.\n\n- 폰트는 **시스템 폰트**를 사용하자. 웹 리소스 로딩을 많이 줄일 수 있다.\n- 폰트 사이즈는 px대신 `rem`을 사용하자. 사용자 브라우저 사이즈에 맞게 유동적으로 대응할 수 있다.\n\n사실이 두 가지 말고도 자간, 줄간격과 행간까지 고려해야하는데, 그건 다음 포스팅에서 알아보도록 하겠습니다.\n\n### 참고\n\n- https://github.com/necolas/normalize.css/issues/665\n",{"title":5,"description":561},"how-to-pick-web-font-and-size","zcq4AC-Aa7ouHOp7g1HsBLHd-Ruq8Kio016rgwVvS3c",[],1776591817978]