[웹디자인] 폰트는 어떻게 하면 좋을까?

 

• " 목차 "

01. 윈도우와 맥의 기본 운영체제 폰트

• 윈도우 : 돋움, 맑은 고딕
• 맥 : Apple SD Neo 고딕

02. 폰트 크키

• 본문 : 14 ~ 17px
• 최소 폰트 : 10px 이상

Chrominum 계열 브라우저(크롬, 엣지, 오페라 등)는 기본적으로 가독성을 위해 10px 이하 폰트를 강제로 키워서 보여준다. Firefox 는 개발자 설정 그래도 렌더링 하는 경향이 강하지만 Safari 같은 경우 데스크탑에서는 대부분 설정한 폰트대로 보이지만 모바일에서는 작은 글씨를 확대하는 경우가 존재한다.
웹 접근성(가독성) 측면에서도 대부분의 가이드라인에서는 12px 이상을 권장한다.

만약, 강제로 작은 글씨로 만들고 싶다면 transform: scale() 을 사용하거나, -webkit-text-size-adjust: none;과 같은 속성을 사용할 수 있다.  -webkit-text-size-adjust 같은 경우 주로 모바일에서 텍스트 자동 확대 방지용이라, 데스크탑에서는 효과가 크지 않을 수 있다.

모바일 기기와 데스크탑의 폰트 크기는 거의 달라지지 않는데, 폰트의 크기는 사용자가 글자를 보는 거리에 따라 결정이 되는데 모바일과 데스크탑은 기기의 물리적인 크기가 달라지는 것이지 디바이스를 사용하는 사용자와의 거리가 달라지는 것이 아니기 때문에 폰트는 크기는 동일하게 사용한다.

 

03. 자간

• 포토샵 자간 1px = letter spacing : 0.001em

즉, 포토샵에서 자간 -20px을 줬다면 개발에서는 숫자값에 나누기 1000을 하여 letter spacing : -0.02em 을 준다.

 

04. 행간

행간은 글자 위, 아래 여백을 포함한 글자가 차지하는 영역이다.
위의 예시처럼 20px의 행간을 주었을 경우, 폰트에 사용되는 크기 11px을 제외하고 9px 정도가 글자의 위 아래에 나눠 여백을 차지한다.
다음 줄의 글자도 20px의 행간이 동일하게 적용되어 있다면, 첫번째 줄 문자의 하단 여백 5px과 두번째 줄 상단 여백 4px을 포함하여 실제 보이는 공백은 9px 이 되는 것이다.  

 

05. 개발에서 행간 적용하기

• line-height : 행간(px) / 폰트크기(px)

line-height는 개발시 사용하는 행간의 속성 명이다.
개발할 때 행간과 폰트를 모두 고정된 값(px)로 적용하게 된다면, 사용자가 사이트의 글자 크기를 키워서 볼때, 폰트의 크기와 행간이 같아지는 시점부터 글자가 겹쳐져 버리게 된다.
그래서 개발시 행간의 크기는 기존에 주고싶었던 행간 값에 폰트 크기를 나눈 값을 넣는 것이 좋다.
예시로, 16px 폰트 크기에 28px 행간이라면 line-height는 1.75로 코드를 작성하면 된다.

 

06. 장평

장평은 글자의 가로 세로 비율을 말한다.
쉽게 말하면, 글자의 가로 폭을 줄이거나 늘려서, 길쭉하게 만들거나 납작하게 만드는 것이다.
장평은 보통 백분율(%)로 표시하는데, 기본 100% 이며 이보다 적을시 좁아지고 많을시 넓어진다.
개발에서는 장평을 조절하는 속성이 없으나, scale() 속성을 사용하여 비슷한 효과를 간접적으로 줄 수 있다.

 

07. 배경과 글자의 명도 대비

• 글자(흰색) : 배경(흰색) = 1 : 1
• 글자(검정색) : 배경(흰색) = 21 : 1
• 4.5 : 1 이상이여야 좋음.

기본적으로 글자와 배경이 같은 흰색일 경우 명도 대비를 1 : 1 이라고 하고 검정과 흰색일 경우 21 : 1 비율이라고 한다. 주요 컨텐츠의 명도 대비는 4.5 : 1 이상, 보조 컨텐츠의 명도 대비는 3 :  1 이상 되어야 웹 접근성이 맞추는 최소한의 기준이라고 한다.

* 명도 대비 확인 사이트 : https://webaim.org/resources/contrastchecker/

 

08. 색맹인 사용자가 보는 화면 확인하기

포토샵에서 view - proof setup 메뉴에 가서 다음을 클릭하면 확인할 수 있다.
color blindess - protanopia type 은 적색맹, color blindess - deuteranopia-type 은 녹색맹이다.

 

 

https://yerica.tistory.com/185

[웹디자인] 브라우저, 해상도, dp/pt/px, mdpi/xhdpi/..., 이미지 크기