Fonts

아티클
06/13/2023

참고

이 디자인 가이드는 Windows 7용으로 만들어졌으며 최신 버전의 Windows용으로 업데이트되지 않았습니다. 지침의 대부분은 여전히 원칙으로 적용되지만 프레젠테이션 및 예제에는 현재 디자인 지침이 반영되지 않습니다.

사용자는 Microsoft Windows의 다른 요소보다 텍스트와 상호 작용합니다. Segoe UI("SEE-go"로 발음)는 Windows 시스템 글꼴입니다. 표준 글꼴 크기가 9포인트로 증가했습니다.

segoe ui 글꼴의 알파벳 그림

Segoe UI 글꼴입니다.

Segoe UI와 Segoe는 동일한 글꼴이 아닙니다. Segoe UI는 사용자 인터페이스 텍스트 문자열을 위한 Windows 글꼴입니다. Segoe는 Microsoft와 파트너가 인쇄 및 광고용 자료를 제작하는 데 사용하는 브랜딩 글꼴입니다.

Segoe UI는 친근하고 개방적이며 친숙한 서체이며 그 결과 Tahoma, Microsoft Sans Serif 및 Arial보다 가독성이 향상됩니다. 그것은 인본주의 산세리프의 특성을 가지고 : 그것의 수도의 다양한 너비 (좁은 E와 S, instance 대한, 너비가 더 유사하고 상당히 넓은 헬베티카에 비해); 소문자의 스트레스와 문자 형식; 그리고 진정한 기울임꼴 (오히려 "경사"또는 경사 로마보다, 많은 산업 모양의 sans serifs처럼). 서체는 화면과 인쇄에 동일한 시각적 효과를 주기 위한 것입니다. 그것은 강한 성격이나 산만 기발함이없는 인본주의 산세리프로 설계되었습니다.

Segoe UI는 기본적으로 Windows에서 켜져 있는 ClearType에 최적화되어 있습니다. ClearType을 사용하도록 설정한 Segoe UI는 우아하고 읽기 쉬운 글꼴입니다. ClearType을 사용하도록 설정하지 않으면 Segoe UI는 약간만 허용됩니다. 이 요소는 Segoe UI를 사용해야 하는 시기를 결정합니다.

Segoe UI에는 라틴어, 그리스어, 키릴 자모 및 아랍어 문자가 포함됩니다. 다른 문자 집합 및 용도에 대해 만들어진 ClearType에 최적화된 새 글꼴도 있습니다. 여기에는 일본어용 Meiryo, 한국어의 경우 말군 고딕, 중국어용 Microsoft JhengHei(번체), 중국어용 Microsoft YaHei(간체), 히브리어용 Gisha 및 태국어용 Leelawadee, 문서 사용을 위해 설계된 ClearType 컬렉션 글꼴이 포함됩니다.

Meiryo에는 Verdana를 기반으로 하는 라틴 문자가 포함되어 있습니다. Malgun Gothic, Microsoft JhengHei 및 Microsoft YaHei는 사용자 지정된 Segoe UI를 사용합니다. 이러한 글꼴의 기울임꼴 버전은 사용하지 않는 것이 좋습니다. 말군 고딕, Microsoft JhengHei 및 Microsoft YaHei는 일반 스타일과 굵은 스타일로만 제공되므로 기울임꼴 문자는 직립 스타일을 기울임꼴로 합성합니다. Meiryo에는 진정한 기울임꼴 및 굵은 기울임꼴이 포함되어 있지만 이러한 스타일은 기울임꼴 스타일이 적용될 때 일본 문자가 똑바로 유지되는 라틴 문자에만 적용됩니다.

Meiryo UI라고 하는 Meiryo의 변형은 리본 명령 사용자 인터페이스에서 선호 됩니다 .

이러한 문자 집합을 사용하여 로캘을 지원하기 위해 Segoe UI는 지역화 프로세스 중에 각 로캘에 따라 올바른 글꼴로 바뀝니다.

Windows 기반 프로그램으로 배포할 Segoe UI 및 기타 Microsoft 글꼴에 라이선스를 부여하려면 Monotype에 문의하세요.

참고:스타일 및 톤 및 사용자 인터페이스 텍스트 와 관련된 지침은 별도의 문서에 제공됩니다.

설계 개념

글꼴, 서체, 점 크기 및 특성

기존 입력 체계에서 글꼴은 서체, 점 크기 및 특성의 조합을 설명합니다. 서체는 글꼴의 모양입니다. Segoe UI, Tahoma, Verdana 및 Arial은 모두 서체입니다. 점 크기는 오름차순의 위쪽에서 내림차순의 아래쪽까지 측정된 글꼴의 크기를 의미하며 내부 간격(선행이라고 함)을 뺀 값입니다. 포인트는 약 1/72 인치입니다. 마지막으로 글꼴에는 굵게 또는 기울임꼴의 특성이 있을 수 있습니다.

비공식적으로 사람들은 이 문서에서와 같이 서체 대신 글꼴을 사용하는 경우가 많지만 기술적으로 Segoe UI는 글꼴이 아닌 서체입니다. 특성의 각 조합은 고유한 글꼴입니다(예: 9포인트 Segoe UI 일반, 10포인트 Segoe UI 굵게 등).

Serif 및 sans serif

서체는 serif 또는 sans serif입니다. Serif는 글꼴로 문자 스트로크를 완료하는 작은 회전을 나타냅니다. sans serif 서체에는 serif가 없습니다.

읽기 권한자는 일반적으로 문서 내에서 본문 텍스트로 사용되는 세리프 글꼴을 선호합니다. 세리프는 문서에 형식과 우아함의 느낌을 제공합니다. UI 텍스트의 경우 클린 모양이 필요하고 컴퓨터 모니터의 해상도가 낮을수록 sans serif 서체가 더 적합합니다.

이 예와

텍스트의 광도와 배경 사이에 큰 차이가 있는 경우 텍스트를 가장 쉽게 읽을 수 있습니다. 흰색 배경의 검은색 텍스트는 매우 밝은 배경에서 가장 높은 대비 어두운 텍스트를 제공하여 고대비를 제공할 수도 있습니다. 이 조합은 기본 UI 화면에 가장 적합합니다.

어두운 배경의 밝은 텍스트는 좋은 대비를 제공하지만 밝은 배경의 어두운 텍스트만큼 좋지는 않습니다. 이 조합은 기본 UI 표면을 기준으로 강조를 해제하려는 Explorer 작업창과 같은 보조 UI 화면에 적합합니다.

사용자가 텍스트를 읽도록 하려면 밝은 배경에서 어두운 텍스트를 사용합니다.

어도댄스

텍스트는 다음 어원을 사용하여 사용 방법을 나타낼 수 있습니다.

포인터. I-bar("text select") 포인터는 텍스트를 선택할 수 있음을 나타내고 왼쪽 화살표("일반 선택") 포인터는 텍스트가 아니라는 것을 나타냅니다.
캐럿. 텍스트에 입력 포커스가 있는 경우 캐리트는 선택 가능하거나 편집 가능한 텍스트의 삽입/선택 지점을 나타내는 깜박이는 세로 막대입니다.
상자. 편집 가능함을 나타내는 텍스트 주위의 상자입니다. 프레젠테이션의 가중치를 줄이기 위해 편집 가능한 텍스트를 선택한 경우에만 상자가 동적으로 표시될 수 있습니다.
전경색. 연한 회색은 텍스트가 사용하지 않도록 설정되어 있음을 나타냅니다. 회색이 아닌 색, 특히 파란색과 자주색은 텍스트가 링크임을 나타냅니다.
배경색. 연한 회색 배경은 텍스트가 읽기 전용이지만 실제로는 읽기 전용 텍스트에 색 배경이 있을 수 있음을 나타냅니다.

이러한 어원은 다음과 같은 의미로 결합됩니다.

편집 가능. 텍스트 선택 포인터, 캐리트(입력 포커스) 및 일반적으로 흰색 배경이 있는 상자에 표시되는 텍스트입니다.
읽기 전용이며 선택할 수 있습니다. 선택 포인터와 caret가 있는 텍스트(입력 포커스의 경우).
읽기 전용이며 선택할 수 없습니다. 화살표 포인터가 있는 텍스트입니다.
사용 안 함. 화살표 포인터가 있는 연한 회색 텍스트이며, 때로는 회색 배경에 있습니다.

읽기 전용 텍스트는 일반적으로 회색 배경이지만 회색 배경은 필요하지 않습니다. 실제로 회색 배경은 특히 큰 텍스트 블록의 경우 바람직하지 않을 수 있습니다. 이는 텍스트가 비활성화되어 읽기를 권장하지 않음을 시사하기 때문입니다.

접근성 및 시스템 글꼴, 크기 및 색

장애가 있거나 장애가 있는 사용자가 텍스트에 액세스할 수 있도록 하기 위한 지침은 시스템 글꼴, 크기 및 색을 항상 사용하여 사용자의 설정을 존중하는 간단한 규칙으로 요약할 수 있습니다.

한 가지만 수행하면...

항상 시스템 글꼴, 크기 및 색을 사용하여 사용자의 설정을 준수합니다.

개발자: 코드에서 GetThemeFont API 함수를 사용하여 시스템 글꼴 속성(크기 포함)을 확인할 수 있습니다. GetThemeSysColor API 함수를 사용하여 시스템 색을 확인할 수 있습니다.

사용자의 시스템 테마 설정에 대한 가정을 할 수 없으므로 다음을 수행해야 합니다.

항상 시스템 테마 색에서 글꼴 색과 배경을 기반으로 합니다. 고정 RGB(빨강, 녹색, 파랑) 값을 기반으로 고유한 색을 만들지 마세요.
항상 시스템 텍스트 색을 해당 배경색과 일치합니다. 예를 들어 텍스트 색에 대한 COLOR_STATICTEXT 선택하는 경우 배경색에 대한 COLOR_STATIC 선택해야 합니다.
항상 시스템 글꼴의 비례 크기 변형에 따라 새 글꼴을 만듭니다. 시스템 글꼴 메트릭을 고려할 때 굵게, 기울임꼴, 더 크고 작은 변형을 만들 수 있습니다.

프로그램에서 사용자의 설정을 준수하는지 확인하는 간단한 방법은 다른 글꼴 크기와 고대비 색 구성표를 사용하여 테스트하는 것입니다. 모든 텍스트의 크기를 조정하고 선택한 색 구성표에 올바르게 표시해야 합니다.

사용 패턴

텍스트에는 다음과 같은 몇 가지 사용 패턴이 있습니다.

사용	Description
제목 표시줄 텍스트 창을 식별하는 제목 표시줄의 텍스트입니다.
주 지침 페이지, 창 또는 대화 상자에서 수행할 작업을 설명하는 텍스트입니다.
보조 지침 페이지, 창 또는 대화 상자에서 수행할 작업을 설명하는 추가 텍스트입니다.
일반 텍스트 사용자 인터페이스에 표시되는 일반(읽기 전용) 텍스트입니다.
강조 표시된 텍스트 굵은 텍스트는 텍스트를 더 쉽게 구문 분석하고 사용자가 읽어야 하는 텍스트에 주의를 끌기 위해 사용됩니다. 기울임꼴 텍스트는 문자 그대로(따옴표 대신) 텍스트를 참조하고 특정 단어를 강조하는 데 사용됩니다.
편집 가능한 텍스트 사용자가 편집할 수 있는 텍스트가 상자에 표시됩니다. 프레젠테이션의 가중치를 줄이기 위해 편집 가능한 텍스트를 선택한 경우에만 상자가 표시될 수 있습니다.
사용할 수 없는 텍스트 사용 안 함 컨트롤에 대한 레이블과 같이 현재 컨텍스트에 적용되지 않는 텍스트입니다. 비활성화된 텍스트는 사용자가(일반적으로) 텍스트를 읽는 것을 방해해서는 안 됨을 나타냅니다.
연결 다른 페이지, 창 또는 도움말 항목으로 이동하거나 명령을 시작하는 데 사용되는 텍스트입니다.
그룹 헤더 목록 보기에서 항목을 그룹화하는 데 사용되는 텍스트입니다.
파일 이름 파일 이름 텍스트(콘텐츠 보기에만 해당).
문서 텍스트 문서에 사용되는 텍스트입니다(ui 텍스트와 반대).
문서 제목 문서 내에서 제목으로 사용되는 텍스트입니다.

지침

글꼴 및 색

Windows Vista 및 Windows 7의 기본값은 다음과 같습니다.

패턴	테마 기호	글꼴, 색
	CaptionFont	9pt. black(#000000) Segoe UI
	MainInstruction	12pt. 파란색(#003399) Segoe UI
	명령	9pt. black(#000000) Segoe UI
	Bodytext	9pt. black(#000000) Segoe UI
	Bodytext	9pt. 검정(#000000) Segoe UI, 굵게 또는 기울임꼴
	Bodytext	상자의 9pt. 검은색(#000000) Segoe UI
	사용 안 함	9pt. 진한 회색(#323232) Segoe UI
	HyperLinkText	9pt. 파란색(#0066CC) Segoe UI
	핫	9pt. 연한 파란색(#3399FF) Segoe UI
		11pt. 파란색(#003399) Segoe UI
		11pt. black(#000000) Segoe UI
	(없음)	9pt. 블랙 (#000000) 칼리브리
	(없음)	17pt. 블랙 (#000000) 칼리브리

글꼴을 선택하고 UI 기술 및 Windows의 대상 버전에 따라 창 레이아웃을 최적화합니다.

UI 기술	대상 Windows 버전	사용하고 최적화할 글꼴
Windows Presentation Foundation	모두	WPF 테마 파트를 사용합니다.
Win32 또는 WinForms	Windows Vista 이상	적절한 Segoe UI 글꼴을 사용합니다.
	확장 가능한 구성 요소 또는 Windows Vista 이전	Windows XP 및 Windows 2000을 대상으로 하려면 Tahoma에 매핑되는 8포인트 MS Shell Dlg 2 의사 글꼴을 사용합니다. 이전 버전의 Windows를 대상으로 하려면 Windows 2000 및 Windows XP의 Tahoma와 Windows 95, Windows 98, Windows Millennium Edition 및 Windows NT 4.0의 MS Sans Serif에 매핑되는 8포인트 MS Shell Dlg 의사 글꼴을 사용합니다.

개발자:
- 고정 레이아웃(예: Windows 대화 상자 템플릿 및 WinForms)을 사용하는 요소의 경우 이전 표의 적절한 글꼴을 하드 코드합니다.
- 동적 레이아웃(예: Windows Presentation Foundation)을 사용하는 요소의 경우 테마 글꼴을 사용합니다. DrawThemeText와 같은 테마 API를 사용하여 테마 기호를 기반으로 텍스트를 그립니다. 테마 서비스가 실행되고 있지 않은 경우 시스템 메트릭을 기반으로 하는 대안이 있어야 합니다.
Segoe UI의 경우 9포인트 글꼴 크기 이상을 사용합니다. Segoe UI 글꼴은 이러한 크기에 최적화되어 있으므로 더 작은 크기를 사용하지 않도록 합니다.
항상 시스템 텍스트 색을 해당 배경색과 일치합니다. 예를 들어 텍스트 색에 대한 COLOR_STATICTEXT 선택하는 경우 배경색에 대한 COLOR_STATIC 선택해야 합니다.
시스템 글꼴의 비례 크기 변형에 따라 항상 새 글꼴을 만듭니다. 시스템 글꼴 메트릭을 고려할 때 굵게, 기울임꼴, 더 크고 작은 변형을 만들 수 있습니다.
회색 배경 대신 밝은 배경에 읽기 전용 텍스트(예: 사용 조건)의 큰 블록을 표시합니다. 회색 배경은 텍스트가 비활성화되어 읽기를 권장하지 않음을 시사합니다.
텍스트를 쉽게 읽을 수 있도록 최대 줄 길이는 65자입니다. 문자에는 문자, 문장 부호 및 공백이 포함됩니다.

특성

대부분의 UI 텍스트는 특성 없이 일반이어야 합니다. 특성은 다음과 같이 사용할 수 있습니다.
- 굵게 컨트롤 레이블에서 을 사용하여 텍스트를 더 쉽게 구문 분석할 수 있습니다. 사용자가 읽어야 하는 텍스트에 주의를 기울이려면 드물게 사용합니다. 너무 굵게 사용하면 영향을 줄입니다.
- 기울임꼴. 따옴표 대신 텍스트를 문자 그대로 참조하려면 를 사용합니다. 특정 단어를 강조하려면 드물게 사용합니다. 텍스트 상자 의 프롬프트 및 편집 가능한 드롭다운 목록에 사용합니다.
- 굵은 기울임꼴입니다. 사용하지 마세요.
- 밑줄. 링크를 제외하고 를 사용하지 마세요. 강조를 위해 기울임꼴을 대신 사용합니다.
모든 글꼴이 굵고 기울임꼴을 지원하는 것은 아니므로 텍스트를 이해하는 데 절대 중요하지 않아야 합니다.