수백 개의 디스플레이가 있는 시대에 웹 디자이너는 다양한 클라이언트의 탐색 경험을 고려해야 하는 경우가 많습니다.
텍스트 크기는 사용자 경험에서 중요한 부분입니다. 다양한 해상도, 다양한 모니터 크기, 다양한 DPI, 심지어 다양한 브라우저 설정도 최종 표시되는 텍스트 크기에 영향을 미칩니다. 이제 많은 브라우저에서 페이지를 쉽게 확대/축소할 수 있지만, 페이지를 확대/축소하는 방법을 모르는 사용자가 많을 뿐만 아니라 방문할 때마다 다시 확대/축소하는 것은 항상 귀찮은 일입니다. 사용자의 해상도에 따라 보다 세심한 기본 글꼴 크기를 제공하는 것이 가장 좋습니다. 그렇다면 이 글꼴 크기에 적합한 크기는 무엇입니까?
12px? 14px? 아니면 px 단위를 전혀 사용하면 안 되나요?
문제의 근본 원인은 화면에 표시되는 모든 글꼴 크기 단위(px, pt, em)가 상대적 단위이며, 그것만으로는 텍스트의 실제 크기를 결정할 수 없다는 것입니다. 게다가 텍스트 크기에 대한 사람들의 근본적인 인식은 눈의 관점에 따라 달라집니다. 눈의 관점은 텍스트의 물리적 크기뿐만 아니라 인간의 눈과의 거리에도 영향을 받습니다.
물리적 크기
먼저, 우리가 달성하려는 실제 텍스트 크기를 예를 들어 17인치 1280 * 1024 모니터에서 16px로 설정했다고 가정하면, 계산된 높이는 대략 4.32mm로 대부분의 모니터에서 웹 텍스트를 이에 가깝게 만들 계획입니다. 크기, 그러면 다른 해상도에서 어떤 글꼴 크기를 표시해야 합니까?
1단계: 사용자의 기본 해상도와 해당 화면 크기를 계산합니다.
실제 크기와 해상도를 변환하려면 먼저 해상도와 해당 화면 크기를 계산하세요. 사용자 해상도의 분포는 웹사이트의 통계 로그에서 얻을 수 있습니다. 각 해상도 설정은 서로 다른 크기의 여러 화면에 해당할 수 있고 화면 크기는 웹 페이지를 통해 얻을 수 없기 때문에 현재 모니터 시장에 대한 통계 분석을 수행해야 합니다. 특정 해상도에 대해 가능한 화면 크기 범위를 계산하고, 가장 작은 크기부터 가장 큰 크기까지, 상대적으로 주류 크기입니다(또는 범위의 중간을 주류 크기로 사용). 아래 사진과 같이---
컴퓨터 모니터 시장 (제품 종류가 많아 놓칠 수 밖에 없습니다. 해당 데이터는 참고용입니다.)
2단계: 각 해상도에 대한 주류 화면 크기의 물리적 너비 계산
오늘날의 모니터 화면 비율에는 4:3 표준 화면, 16:10 와이드스크린뿐만 아니라 더 불규칙한 비율도 포함되어 있습니다. 다양한 화면 비율의 모니터를 비교하기 위해 통계에 수평 해상도가 사용됩니다. 주류 크기와 종횡비(픽셀의 길이와 너비가 동일하다고 가정)를 사용하여 화면 너비(인치)를 계산한 다음 미터법(밀리미터)으로 변환하면 1:1로 일치시켜 볼 수 있습니다. 화면 크기 추세. 각 해상도의 사용자 분포를 합산하면 아래 그림과 같은 결과가 나옵니다. (그림의 각 지점은 해상도에 해당하며, 가로축은 화면 가로 방향의 픽셀 수, 세로축은 화면의 픽셀 수) 화면의 물리적 너비, 풍선 크기는 이 해상도의 사용을 나타냅니다. 파란색 풍선은 표준 화면을 나타내고 보라색은 와이드 화면을 나타냅니다. 가장 큰 풍선 3개는 1024*768, 1280*1024 및 1280*800.
3단계: 다양한 모니터에서 글꼴 크기 계산
화면의 물리적 너비를 픽셀 너비로 나누어 각 픽셀의 너비를 구합니다. 그런 다음 이 숫자를 텍스트의 지정된 물리적 크기로 나누어 다양한 해상도에서 필요한 글꼴 크기를 얻습니다. 예를 들어, 4.32mm 정사각형 텍스트를 표시하려면 각 해상도에 다음과 같은 글꼴 크기가 필요합니다(노트북과 데스크탑의 경우 별도로 계산됨).
다양한 해상도에 필요한 글꼴 크기
노트북과 데스크탑의 크기가 매우 다르다는 것을 알 수 있으며 편의상 각 해상도의 주류 크기 또는 평균 크기를 사용하여 각 해상도에서 지정된 글꼴 크기에 필요한 글꼴 크기를 계산합니다. (다음 그림에서는 기본적으로 노트북에서만 사용되는 해상도를 제거합니다.) 4.32mm, 3.77mm 및 3.25mm를 예로 들어 보겠습니다(17인치 1280*1024 해상도에서 16, 14 및 12 크기 글꼴).
고정된 물리적 크기를 유지하기 위해 각 메인스트림 디스플레이에서 필요한 글꼴 크기와 해상도 간의 관계
일부 중국어 글꼴은 클리어타입을 켜지 않은 경우 짝수가 아닌 숫자에서는 잘 표시되지 않으므로 일반적으로 12, 14, 16, 18, 22px 등의 짝수를 사용하는 것이 좋습니다. 즉, 특정 해상도에 대해 가장 가까운 짝수를 선택합니다. 예를 들어 14px는 1100 미만의 화면 수평 해상도에 사용되고, 16px은 1100~1500에 사용되고, 18px는 1500 이상의 화면에 사용되는 식입니다.
인간의 눈까지의 거리
노트북의 글꼴 크기는 데스크탑 컴퓨터에 비해 훨씬 작지만 실제로는 그다지 불편하지 않습니다. 이는 일반적으로 데스크탑 컴퓨터를 사용할 때보다 노트북을 사용할 때 인간의 눈과 화면 사이의 거리가 더 가깝기 때문입니다. 넷북이 점점 더 작아지면(극단적인 예는 휴대폰), 사람들은 넷북을 더 가까이 잡고 사용할 수 있으므로 시야각이 더 커질 수 있습니다. 반대로, 디스플레이가 점점 더 커지면(24인치 이상) 전체적인 시야각 등을 고려하여 사람들이 화면에서 더 멀어지게 되어 시야각이 줄어들 수도 있습니다.
정량적으로 말하면, 인간의 눈과 텍스트 사이의 거리 d(30~60cm)에 비해 텍스트 크기 h(4~5mm)는 매우 작기 때문에 대략적으로 보는 각도 θ는 h에 비례하고 반비례한다고 생각할 수 있습니다. d에 비례합니다(θ≒tgθ=h/d). 즉, 동일한 크기의 텍스트는 2피트 떨어져 있을 때 크기의 절반만 표시됩니다.
즉, 모니터는 대략적인 크기만 전달할 수 있으며 각 사용자는 특정 작업 중에 화면과의 거리를 무의식적으로 조정하여 실제 효과를 조정하게 됩니다. 점점 더 많은 노트북 사용자(이전 기사: 노트북 시장 점유율 참조)에 직면하여 프런트엔드 디자이너는 노트북과 데스크탑의 평균 크기를 기준으로만 페이지 효과를 제공할 수 있으며 이는 사용자가 스스로 조정하는 것에 달려 있습니다.
JS를 사용하여 다양한 해상도에서 글꼴 크기를 자동으로 조정
예를 들어 웹페이지 본문이 위치한 div의 id는 content입니다.
참고: 각 브라우저에서 텍스트 크기를 조정할 수 있도록 글꼴 크기 단위는 px 대신 em을 사용합니다. 일반적으로 브라우저의 기본값은 1em=16px이고 0.875em1em1.125em은 1416입니다. 18px.
글꼴 크기 조정 사용 시 주의할 점: div 내의 제목과 같은 글꼴 크기 단위에 대해 고정된 글꼴 크기 대신 백분율을 사용하는 것이 텍스트와 동기적으로 조정될 수 있도록 하는 것이 가장 좋습니다.
첨부: 본 기사의 차트에 인용된 주요 데이터
이 사이트에 처음 게시되었습니다: http://www.mhzx1.com