타이포그래피를 위해 픽셀보다는 ems를 사용

From. 반응형 웹 디자인 - 벤 프레인

이전 버전의 인터넷 익스플로러에서 픽셀로 설정된 텍스트를 확대하지 못하기 때문에, 시간이 지날수록 웹 디자이너들이 타이포그래피의 크기를 지정할 때 픽셀보다는 주로 ems를 사용하고 있다. 언젠가는 브라우저들이 텍스트의 크기가 픽셀로 선언되어 있어도 스크린에서 텍스트를 확대할 수 있을 것이다. 그런데 왜 픽셀 대신 ems를 사용하는 편이 바람직할까? 여기에는 분명한 이유 두 가지가 있다. 첫 번째로 여전히 인터넷 익스플로러 6를 사용하는 사람도 텍스트를 확대할 수 있고, 두 번째로 디자이너와 개발자의 인생을 훨씬 편하게 해주기 때문이다. em의 크기는 콘텐츠의 크기와 연관되어 있다. 폰트 크기를 <body> 태그의 100%로 설정하고 모든 타이포그래피의 스타일에 ems를 사용하면, 모든 타이포그래피는 초기 선언에 의해 영향을 받는다. 모든 작업이 끝난 후에 고객이 폰드 크기를 좀 더 크게 변경하길 원하는 경우에도, 단지 본문의 폰트 크기를 변경하기만 하면 모든 타이포그래피는 비례해서 변경된다.

동일한 '타깃 ÷ 컨텍스트 = 결과' 공식을 사용해 픽셀 기반의 폰트 크기를 ems로 변환해 보자. 특별히 다른 값을 명시하지 않는 한 모든 최신 테스트탑 브라우저는 디폴트 폰트 크기로 16픽셀을 사용한다. 따라서 최초에 body 태그에 다음의 어떤 규치기을 적용해도 결과는 동일하다.

							font-size: 100%;
							font-size: 16px;
							font-size:1em;
						

예를 들어, 스타일시트의 첫 번째 픽셀 기반의 폰트 크기는 사이트의 타이틀인 AND THE WINNER ISN'T... 의 크기를 조절한다.

							#logo{
								display:block;
								padding-top: 75px;
								color: #0d0c0c;
								text-transform: uppercase;
								font-family: Arial, "Lucida Grande", Verdana, sans-serif;
								font-size: 48px;
							}

							#logo span{color:#dfdada;}
						

따라서 48 ÷ 16 = 3 이고, 스타일을 다음과 같이 변경한다.