2025. 2. 3. 15:33ㆍ홈페이지 제작 팁과 정보
텍스트는 사용자 인터페이스 디자인의 최대 90%를 차지하며, 텍스트를 더 잘 '디자인'할수록 긍정적인 사용자 경험을 만들 가능성이 높아집니다.
서체
서체는 공통된 특성을 공유하는 문자 집합의 디자인 또는 스타일입니다. '글꼴'이라는 용어는 종종 '서체'와 혼용되어 사용되지만 둘 사이에는 차이가 있습니다. 글꼴은 서체 내의 특정 인스턴스를 의미하며, 종종 굵기(예: 굵게 또는 일반) 또는 스타일(예: 이탤릭체)과 같은 요소로 구분됩니다.
서체는 몇 가지 카테고리로 분류할 수 있습니다.
세리프(Serif)
세리프는 글자의 획의 시작이나 끝에 나타나는 작은 모양입니다. 세리프 서체는 제목에는 잘 어울리지만 본문 텍스트에는 사용하지 않는 것이 좋습니다. 특히 글꼴 크기가 작은 경우 세리프는 글꼴이 덜 뚜렷해지고 화면에서 명확하게 렌더링되지 않아 가독성에 영향을 줄 수 있습니다.
산세리프(Sans serif)
세리프가 없는 서체를 산세리프 서체라고 하는데, 이는 “없이”라는 뜻의 프랑스어 “sans”에서 유래했습니다. 산세리프 서체는 본문 텍스트에 적합합니다. 디지털 인터페이스에서 산세리프 글꼴은 특히 고해상도 화면에서 선명하고 깨끗한 외관을 제공할 수 있습니다.
모노스페이스(Monospace)
모노스페이스 서체는 모든 문자를 동일한 너비로 표시합니다. 단일 공백 서체는 프로그래밍 언어에서 프로그래밍 코드와 자연어 텍스트를 구분하기 위해 일반적으로 사용됩니다.
손글씨 서체
손글씨 서체는 자연스러운 손글씨 느낌의 색다른 서체입니다. 손글씨 서체는 디자인에서 장식적인 요소로 사용되는 경우가 많습니다. 그러나 때로는 UI 디자이너가 시각적으로 더 매력적으로 보이도록 하기 위해 제목(H1-H6)에 손글씨 서체를 사용하기도 합니다.
글꼴 크기(Font size)
글꼴 크기는 서체에서 문자의 높이를 측정하는 단위로, 일반적으로 포인트(pt) 또는 픽셀(px) 단위로 측정됩니다. 선택한 글꼴 크기는 디자인 내 텍스트의 가독성, 시각적 계층 구조 및 전반적인 미학을 결정하는 데 중요한 역할을 합니다. 웹 디자인에서는 본문 텍스트에 16픽셀을 사용하는 것이 좋습니다. 이는 대부분의 사용자에게 가독성 있고 편안한 크기를 제공하기 때문에 좋은 출발점으로 간주됩니다.
글꼴 배율(Type scale)
글꼴 배율은 본문 텍스트와 헤더에 대해 조화롭고 비례적으로 관련된 글꼴 크기 집합을 정의하는 시스템입니다. 이 시스템은 UI 디자인에서 시각적으로 매력적이고 일관된 시각적 계층 구조를 만드는 데 도움이 됩니다.
유형 배율을 만드는 일반적인 접근 방식은 기본 글꼴 크기로 시작한 다음 기본 크기의 배수 또는 분수인 일련의 크기를 정의하는 것입니다. 예를 들어 간단한 유형 배율은 다음과 같습니다.
- 기본 크기: 16픽셀
- 배율: 배율(1,25)(16픽셀 x 1,25 = 20픽셀)
- 텍스트 크기: 13픽셀(캡션), 16픽셀(본문), 20픽셀(헤더 3), 25픽셀(헤더 2), 31픽셀(헤더 1).
글꼴 무게(Font weight)
폰트웨이트는 글꼴 획의 상대적인 두께를 나타냅니다. 서체에는 다양한 가중치가 있을 수 있습니다. 서체의 일반적인 가중치 개수는 4~6개입니다.
본문 텍스트에는 일반 글꼴 굵기를 사용하는 것이 좋습니다. 일반 글꼴 굵기는 균형 잡힌 적당한 두께의 문자를 제공하여 특히 본문 텍스트의 긴 구절에서 텍스트 가독성을 높입니다.
굵은 텍스트는 신중하게 적용하면 사용자 경험을 향상시킬 수 있습니다. 다음은 UI 디자인에서 굵은 텍스트를 사용하는 것이 적절한 몇 가지 예시입니다.
- 제목 및 제목(Headings and titles)
제목과 제목에 굵은 텍스트를 사용하면 눈에 잘 띄고 계층 구조를 명확하게 나타낼 수 있습니다.
- 콜투액션 버튼 레이블(Call-to-action button labels)
버튼이나 링크의 텍스트에 굵은 스타일을 적용하여 버튼의 중요성을 강조하고 사용자 상호 작용을 유도할 수 있습니다.
- 본문 텍스트에서 개별 단어를 강조 표시합니다.
굵은 텍스트를 사용하여 지침 텍스트의 중요한 요점, 메시지의 주요 세부 사항 또는 글머리 기호 등 중요한 정보를 강조할 수 있습니다.
- 활성 요소 강조 표시
굵은 텍스트를 사용하여 목록이나 메뉴에서 선택되거나 강조 표시된 항목을 표시하여 사용자가 어떤 옵션을 선택했는지 명확하게 알 수 있습니다.
문자 간격(Letter spacing)
트래킹이라고도 하는 글자 간격은 텍스트에서 글자 사이의 간격을 말합니다.
글자 간격은 글꼴 크기에 비례하여 선택해야 합니다.
- 헤드라인과 같이 글자 크기가 클수록 가독성을 높이기 위해 글자 간격을 더 좁게 사용합니다. 개별 글자 사이의 간격을 줄이면 독자의 시선이 더 짧은 거리를 이동하므로 가독성이 향상됩니다.
- 본문 텍스트, 특히 세로 열의 텍스트와 같이 글자 크기가 작은 경우에는 글자 간격을 느슨하게 하면 각 글자 모양 간의 대비가 커지므로 가독성이 향상될 수 있습니다.
줄 높이(Line height)
줄 높이(선행이라고도 함)는 텍스트 블록에서 기준선 사이의 공백을 제어합니다. 줄 높이가 너무 크거나 너무 작으면 텍스트 가독성에 부정적인 영향을 줄 수 있습니다.
텍스트의 줄 높이는 글꼴 크기에 비례하여 선택하는 것이 좋습니다. 대부분의 텍스트에서 최적의 줄 간격은 포인트 크기의 120%에서 145% 사이입니다.
텍스트 정렬(Text alignment)
텍스트 정렬은 단락, 텍스트 상자 또는 열과 같이 정의된 공간 내에 텍스트를 가로로 배치하는 것입니다.
왼쪽 및 오른쪽 맞춤 텍스트
왼쪽 맞춤에서는 텍스트가 왼쪽 여백을 따라 배치되어 왼쪽 가장자리가 일직선이 되고 오른쪽은 고르지 않은 상태로 유지됩니다. 왼쪽 맞춤 텍스트는 영어와 같이 왼쪽에서 오른쪽으로 쓰는 언어에서 가장 일반적인 설정입니다. 우리는 왼쪽에서 오른쪽으로 읽기 때문에(F자형 읽기 패턴) 왼쪽 정렬 텍스트가 가독성을 높이는 데 도움이 됩니다.
오른쪽 맞춤 텍스트는 아랍어 및 히브리어와 같이 오른쪽에서 왼쪽으로 쓰는 언어의 가장 일반적인 설정입니다. 왼쪽에서 오른쪽으로 쓰는 언어에서는 오른쪽 맞춤이 일반적이지 않지만 특정 디자인 목적(예: 텍스트의 특정 부분에 대한 문맥 정보 제공)을 위해 사용할 수 있습니다.
가운데 맞춤
가운데 맞춤 텍스트는 레이아웃 내에서 짧은 타이포그래피 요소(예: 따옴표)를 구분하는 데 가장 적합하며 긴 카피에는 사용하지 않는 것이 좋습니다.
출처:
https://medium.com/ux-planet/typography-essentials-1a2cb20b4bfc
'홈페이지 제작 팁과 정보' 카테고리의 다른 글
| 정보 구조(IA, Information Architecture) 설계 과정 (0) | 2025.01.24 |
|---|---|
| UX의 완성도를 높이는 툴팁 디자인의 힘 (0) | 2025.01.23 |
| 디자인 색상 구성의 필수 상식 (0) | 2025.01.20 |
| 인간 행동에 관한 10가지 심리학적 사실 (1) | 2025.01.17 |
| UI 디자인에서 중첩된 요소의 모서리 반경 (0) | 2025.01.15 |