CSS 글꼴 크기: em과 px, pt, 백분율 비교

CSS 스타일링에서 가장 혼란스러운 측면 중 하나는 애플리케이션의 텍스트 확장을 위한 글꼴 크기 속성입니다. CSS에서는 네 가지 다른 단위 측정을 사용하여 웹 브라우저에 텍스트 크기를 표시할 수 있습니다. 이 네 가지 단위 중 웹에 가장 적합한 것은 무엇입니까? 이 질문은 광범위한 논쟁을 불러일으켰습니다. 질문 자체가 답변하기가 너무 어렵기 때문에 명확한 답변을 찾는 것이 어렵습니다.

해당 단위에 문의

1. "Ems"(em): "em"은 웹 문서 미디어 표시에 사용되는 확장 가능한 단위입니다. 1em은 현재 글꼴 크기와 같습니다. 예를 들어 문서의 글꼴 크기가 12pt인 경우 1em은 12pt와 같습니다. Em은 본질적으로 확장 가능하므로 2em은 24pt, .5em은 6pt와 같습니다. EMS는 확장성과 모바일 장치에 대한 적응성으로 인해 웹 문서에 점점 더 많이 사용되고 있습니다.

2. 픽셀(px): 픽셀은 화면 미디어(즉, 컴퓨터 화면에서 읽음)에 사용되는 고정된 크기 단위입니다. 1픽셀은 컴퓨터 화면의 한 지점(화면 해상도의 가장 작은 부분)과 같습니다. 많은 웹 디자이너는 웹 문서에서 픽셀 단위를 사용하여 브라우저에서 렌더링되는 웹 사이트의 완벽한 픽셀 렌더링을 생성합니다. Pixel 장치의 한 가지 문제점은 시각 장애가 있는 독자가 모바일 장치에 맞게 확장할 수 없다는 것입니다.

3. 포인트(pt) : 포인트는 주로 인쇄매체(종이에 인쇄된 모든 매체)에 사용됩니다. 1포인트는 1/72인치와 같습니다. 포인트는 픽셀과 유사하며 고정된 크기 단위이며 크기를 조정할 수 없습니다.

　4. 백분율(%): 백분율 단위는 몇 가지 근본적인 차이점을 제외하면 "em" 단위와 더 유사합니다. 첫째, 현재 글꼴 크기는 100%입니다(예: 12pt = 100%). 백분율 단위를 사용하면 텍스트가 모바일 장치에서 완전히 확장 가능하고 액세스 가능한 상태로 유지됩니다.

그러면 차이점은 무엇인가요?

글꼴 크기 단위의 차이를 동적으로 관찰해 보면 쉽게 알 수 있습니다. 일반적으로 말하면 1em = 12pt = 16px = 100%입니다. 이러한 글꼴 크기를 사용할 때 기본 글꼴 크기(CSS 선택기 사용)를 100%에서 120%로 늘리고 어떤 일이 발생하는지 살펴보겠습니다.

보시다시피 기본 글꼴 크기가 커질수록 em과 백분율 단위는 커지지만 px와 pt는 변하지 않습니다. 텍스트의 절대 크기를 설정하는 것은 쉽지만 방문자가 모든 장치나 기계에 표시할 수 있는 확장 가능한 텍스트를 사용하는 것이 훨씬 더 쉽습니다. 이러한 이유로 웹 문서 텍스트에는 em 및 백분율 단위가 선호됩니다.

Em과 퍼센트의 비교

포인트와 픽셀 단위에 대한 우리의 정의는 em과 퍼센트 단위를 남겨두고 웹 문서에 반드시 가장 적합한 것은 아닙니다. 이론적으로 em과 백분율 단위는 동일하지만 적용 시에는 실제로 고려해야 할 미묘한 차이가 있습니다.

위의 예에서는 기본 글꼴 크기(본문의 마커)로 백분율 단위를 사용하고 있습니다. 글꼴 크기를 백분율에서 em으로 변경하면(예: body{font-size:1 em;}) 차이를 느끼지 못할 것입니다. "1em"이 본문 글꼴 크기일 때와 클라이언트가 브라우저의 "텍스트 크기" 설정(Internet Explorer와 같은 일부 브라우저에서 사용 가능)을 변경할 때 어떤 일이 발생하는지 살펴보겠습니다.

클라이언트의 브라우저 텍스트 크기가 "중간"으로 설정된 경우 ems와 백분율 사이에 차이가 없습니다. 그러나 설정을 변경하면 차이가 상당합니다. "Smallest"로 설정하면 ems가 백분율보다 훨씬 작게 표시되고, "Largest"로 설정하면 반대로 ems가 백분율보다 크게 표시됩니다. 실제 응용 프로그램에서는 em 단위가 확장되고 있다고 말할 수도 있으며, 일부 클라이언트 시스템에서는 em 텍스트 크기가 너무 많이 변경되고 가장 작은 텍스트도 명확하지 않게 됩니다.

결론

이론적으로 em 단위는 웹에서 곧 출시될 새로운 글꼴 크기 표준이지만 실제로는 백분율 단위가 사용자에게 더욱 일관되고 접근하기 쉬운 디스플레이를 제공하는 것 같습니다. 클라이언트 설정이 변경되면 백분율 텍스트가 합리적인 비율로 확장되어 디자이너가 가독성, 접근성 및 시각적 디자인을 유지할 수 있습니다.