글꼴

사용자는 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보다 가독성이 더 좋습니다. 그것은 인본주의 sans serif의 특성을 가지고 있습니다 : 대문자의 다양한 너비 (예를 들어 너비가 더 비슷하고 상당히 넓은 헬베티카와 비교하여 좁은 E와 S) 소문자의 스트레스와 문자 형식; 그리고 그 진정한 기울기 (오히려 "경사"또는 기울어진 로마, 많은 산업 찾고 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 서체에는 세리프가 없습니다.

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

대조

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

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

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

어던던스

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

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

이러한 어시던스는 다음과 같은 의미로 결합됩니다.

• 편집. 텍스트 선택 포인터, 캐리트(입력 포커스) 및 일반적으로 흰색 배경에 있는 텍스트가 상자에 표시됩니다.
• 읽기 전용으로 선택할 수 있습니다. 선택 포인터와 caret(입력 포커스)가 있는 텍스트입니다.
• 읽기 전용으로 선택할 수 없습니다. 화살표 포인터가 있는 텍스트입니다.
• 비활성화. 화살표 포인터가 있는 연한 회색 텍스트로, 회색 배경에 있는 경우도 있습니다.

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

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

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

한 가지만 수행하면

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

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

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

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

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

사용 패턴

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

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

지침

글꼴 및 색

• Windows Vista 및 Windows 7의 기본값은 다음과 같은 글꼴과 색입니다.

무늬	테마 기호	글꼴, 색
제목 표시줄 텍스트 글꼴예	CaptionFont	9pt. 검정(#000000) Segoe UI
기본 명령 텍스트 글꼴예제	MainInstruction	12pt. 파란색(#003399) Segoe UI
보조 명령 텍스트 글꼴예제	명령	9pt. 검정(#000000) Segoe UI
일반 텍스트 글꼴예	BodyText	9pt. 검정(#000000) Segoe UI
강조 표시된 텍스트 글꼴예	BodyText	9pt. black (#000000) Segoe UI, bold 또는 italic
편집 가능한 텍스트 글꼴예제	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에 따라 글꼴을 선택하고 창 레이아웃을 최적화합니다.

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

특성

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