타이포그래피

    ​Indigo.Design 시스템 에는 타이포그래피를 구성하고 테마 서체를 설정할 수 있는 18가지 텍스트(문자) 스타일이 있습니다. 우리는 Titillium Web을 기본값으로 사용하고 있지만 모든 디자이너에게 자신의 애플리케이션을 스타일 있게 만들 수 있는 유연성을 제공하고 싶습니다. Indigo.Design 머티리얼 유형 시스템에 정의된 타이포그래피 방식을 따르며 Ignite UI for Angular 구현을 준수합니다.

    • ~ 안에 Figma, 모든 텍스트 스타일은 ↳ Typography 이는의 일부입니다. Indigo.Design 시스템 🧱 Foundation 부분. 그들은 다음과 같이 사용할 수 있습니다 Text Styles 모든 텍스트 요소에 적용할 수 있습니다.
    • ​Sketch 에서는 🎨 Typography 라는 별도 페이지에서 찾을 수 있으며 모든 텍스트 요소에 적용할 수 있는 Text Styles로 사용할 수 있습니다.
    • ​Adobe XD 에서는 라이브러리 파일의 왼쪽 열에 있는 동일한 이름의 아트보드에 배치되며 구성 요소와 패턴 전체에 사용되는 Character Styles로 존재합니다.

    Typography Styles

    프로젝트에서 타이포그래피 시스템을 사용하려면 라이브러리에 정의된 텍스트(문자) 스타일 중 하나를 기본 텍스트 요소에 적용하기만 하면 됩니다. Sketch 크기, 색상, 정렬이 다양한 다양한 문자 사전 설정을 제공합니다. Figma 크기, 두께, 줄 높이 및 비율(문자 간격)을 정의하고 정렬을 조정하고 색상 스타일을 적용할 수 있는 반면, Adobe XD에서는 텍스트 스타일이 미리 정의된 크기로만 제공되며 정렬을 조정하고 색상 스타일을 적용할 수 있습니다. 색상 스타일.

    • 제목에 대한 H1부터 H6 까지의 6개 헤드라인.
    • 2 Subtitle 크기.
    • 2 인터페이스의 단락 내용에 대한 Body 크기입니다.
    • 본문에서 하이퍼링크를 쉽게 사용할 수 있도록 Body 크기와 Detail 1 크기에 해당하는 3개의 Hyperlink 크기를 제공합니다.
    • 2 그리드 구성 요소에서만 사용되는 Detail 크기입니다.
    • 무료 콘텐츠에 사용할 수 있는 Caption 및 Overline 스타일입니다.
    • Button 구성 요소에만 사용되는 BUTTON 스타일입니다.

    또한 이러한 스타일은 애플리케이션의 관련 레이어에 대해 생성될 텍스트 요소 및 타이포그래피 클래스의 유형을 결정합니다. 다음 요소는 일반 텍스트 레이어에 적용된 타이포그래피 텍스트 스타일을 기반으로 생성됩니다.

    • 헤드라인 타이포그래피 스타일을 위한 헤드라인 <h1> ~ <h6>​
    • 타이포그래피 클래스가 있는 단락 <p>:
      • 두 가지 자막 타이포그래피 스타일의 경우 igx-typography__subtitle-1 / igx-typography__subtitle-2.
      • 두 가지 본문 타이포그래피 스타일의 경우 igx-typography__body-1 / igx-typography__body-2​
      • ig-typography__body-1 hyperlink / ig-typography__body-2 hyperlink 타이포그래피 스타일 중 두 가지에 대한 하이퍼링크입니다.
      • 캡션 타이포그래피 스타일에 대한 igx-typography__caption.
      • igx-typography__overline 윗줄 타이포그래피 스타일입니다.

    이러한 스타일은 Sketch 플러그인을 통해 추가로 수정되어 애플리케이션 수준의 테마 지정을 통해 해당 요소의 모양을 변경할 수 있습니다.

    기사, 블로그 게시물 등의 복잡한 레이아웃을 만들 때 이를 사용하십시오. Indigo.Design 시스템의 텍스트 스타일은 디자인의 모든 텍스트에 대해 일관된 테마와 스타일을 정의하는 데 도움이 됩니다.

    Warning

    Sketch 에는 유효성 검사 및 특수 사례를 위해 구성 요소 내에서 사용되는 Internal 텍스트 스타일 모음도 있습니다. 이러한 스타일은 아트보드에 직접 삽입할 수 없지만 사용되는 구성 요소의 인쇄상의 일관성을 보장하기 위해 존재합니다.

    Component Specific Typography

    ​Avatar, Button, Grid, Slider 및 Tooltip과 같은 구성 요소는 구성 요소별 타이포그래피를 사용하여 각 구성 요소에서 사용하는 스타일의 세부 사항을 수용합니다. 예를 들어 이니셜이 있는 아바타와 Button은 모두 대문자 스타일을 사용합니다. 아래에서는 글꼴 색상을 보다 다양하게 사용할 수 있도록 Sketch에서 아바타에 대해 정의된 텍스트 스타일을 찾을 수 있습니다.

    Typography Color Variants

    • ​Sketch에서 텍스트 스타일에는 텍스트 색상이 포함되어 있으므로 각각은 grays.900에 해당하는 active, grays.700에 해당하는 inactive, grays.500에 해당하는 disabled, white 및 secondary 같은 여러 사전 설정된 색상으로 제공됩니다. 또한 success, warn 및 error 색상이 필요한 문자열에 대한 특수 색상이 있는 스케일과 Indigo.Design 구성 요소에서 사용되는 몇 가지 추가 뉘앙스가 있습니다.
    • ​Figma 및 Adobe XD 에서는 텍스트 스타일에 텍스트 색상이 포함되지 않으며 디자인 요구 사항에 따라 조정할 수 있습니다. 그러나 모든 Indigo.Design 시스템 라이브러리 구성 요소에 적용된 텍스트 스타일은 위에서 언급한 색상 변형에 맞춰 정렬됩니다.

    Changing the Typeface

    In Figma

    스타일이 팀 라이브러리에 게시된 경우 라이브러리 파일에서 스타일을 편집해야 합니다. 변경하려면 라이브러리 파일에 대한 편집 권한이 필요합니다. Titillium Web의 서체를 다른 서체로 변경하려면 Indigo.Design 시스템 라이브러리 파일에 액세스해야 합니다. 기본적으로 Figma의 스타일은 선택하지 않은 경우 속성 패널에 표시됩니다. 또는 ↳ Typography 페이지로 이동하여 모든 타이포그래피 스타일을 보다 포괄적으로 확인하고 거기에서 변경할 수 있습니다. 텍스트 스타일은 캔버스 오른쪽에 있는 속성 패널에 계속 표시됩니다.

    스타일 편집 아이콘을 클릭하면 팝오버가 열립니다. 속성 섹션에는 다른 글꼴 모음을 선택할 수 있는 드롭다운이 표시됩니다. 모든 타이포그래피에 대해 이 변경 사항을 수정하려면 모든 스타일에 대해 개별적으로 동일한 단계를 수행해야 합니다.

    그 후에는 이러한 변경 사항을 라이브러리 업데이트로 게시해야 합니다. 구독한 파일에서 이러한 변경 사항을 보려면 변경 사항을 검토하고 수락해야 합니다.

    In Sketch

    Titillium Web 서체를 Sketch의 다른 서체로 변경하려면 Indigo.Design 라이브러리 파일을 열고 View-> Components 선택합니다. 그런 다음 Sketch 메뉴에는 4개의 버튼 그룹이 있습니다. 두 번째 버튼은 문자 아이콘이고 Show Text Styles 표시를 나타냅니다.

    이를 선택하면 Indigo.Design 시스템이 정의하는 모든 텍스트 스타일을 찾아볼 수 있습니다. 왼쪽 패널에서 All Text Styles 선택되어 있는지 확인하고 그 중 하나를 클릭하고 command + A 눌러 Sketch의 중간 영역에 나타나는 모든 스타일을 선택합니다.

    이제 오른쪽 패널에는 모든 Text Styles에 대해 다른 서체를 선택할 수 있는 드롭다운이 있습니다. 모든 설정이 완료되면 변경 사항이 모든 Text Styles 업데이트할 뿐만 아니라 모든 구성 요소 및 패턴에 자동으로 전파됩니다.

    그만큼 Text Styles Sketch 에서는 색상 변수를 사용하여 텍스트의 색상 속성을 정의합니다. 따라서, primary 설명된 단계에 따라 색상을 지정합니다. 색상 주제, 모든 기본 Text Styles 자동으로 업데이트됩니다.

    In Adobe XD

    Adobe XD에서 Titillium Web의 서체를 다른 서체로 변경하려면 Indigo.Design 라이브러리 파일을 열고 Libraries 패널을 선택합니다. 그런 다음 Character Styles로 스크롤하여 그 중 하나를 마우스 오른쪽 버튼으로 클릭하고 나타나는 상황별 메뉴에서 Edit 선택합니다. 팝오버 상단에는 다른 글꼴 모음을 선택할 수 있는 드롭다운이 있습니다. 모든 타이포그래피에 대해 이 변경 사항을 수정하려면 모든 스타일에 대해 개별적으로 동일한 단계를 수행해야 합니다.

    Creating Custom Typographies

    다양한 사용자 인터페이스를 디자인하려면 인쇄상의 다양한 스타일이 충분해야 합니다. 그러나 특별한 사용 사례를 위해 추가 스타일을 만들어야 하는 경우도 있습니다. 모든 프로젝트에 대해 전역적으로 정의하려면 Indigo.Design 라이브러리에서 수행하세요. 현재 프로젝트 범위 내에서만 의미 있는 작업이라면 대신 프로젝트 파일에서 수행하세요.

    In Figma

    텍스트 도구(T)를 사용하여 새 문자 레이어를 만들고 필요한 모든 조정을 수행한 다음 텍스트 속성에서 스타일 아이콘을 클릭합니다. 텍스트 속성은 오른쪽 사이드바의 유형 설정 패널에서 찾을 수 있습니다.

    레이어에 대한 모든 조정이 완료되면 스타일 아이콘을 클릭한 다음 스타일 만들기 아이콘(+)을 선택합니다. 그러면 새 텍스트 스타일에 이름과 설명을 지정할 수 있는 팝오버가 열립니다. 필요한 경우 스타일에 추가 변경 사항을 적용할 수도 있습니다.

    그런 다음 스타일 만들기 버튼을 클릭하세요. 그러면 오른쪽 사이드바의 텍스트 스타일에 새 텍스트 스타일이 나열됩니다. 마지막으로, 텍스트 스타일 위치를 조정하고 필요한 경우 특정 섹션에 맞춰 정렬하거나 새 섹션을 만들 수 있습니다.

    In Sketch

    새 Text 레이어를 삽입하여 시작하고 Appearance 패널을 통해 라이브러리에서 제공되는 기존 텍스트 스타일과 가장 가까운 Text Style 여기에 할당합니다.

    다음으로 텍스트 색상을 다른 색상 변수로 변경하는 등의 조정을 수행합니다.

    마지막으로 만들기 버튼을 클릭하고 새 스타일에 적절한 이름을 지정하면 모든 설정이 완료됩니다.

    In Adobe XD

    새 Text 레이어를 삽입하여 시작하고 오른쪽 패널의 Text 아래에서 해당 속성을 조정합니다. 예를 들어, 다른 글꼴, 크기, 정렬을 선택하고 모두 소문자 스타일을 설정하세요.

    그런 다음 Libraries 패널에서 Character Styles 오른쪽에 있는 + 아이콘을 클릭하여 스타일을 만들고 적절한 이름을 지정합니다.

    Additional Resources

    관련 주제:

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.