스케치 서체 라이브러리
Sketch Typography Libarary
React, iOS, Android 디자인에 사용할 기본 서체 디자인 시스템입니다. 스케치로 제작하며 Text Style 기능을 사용합니다. 라이브러리로 추가해도 Text Style은 동기화되지 않기 때문에 플러그인을 이용해 불러와야합니다. 추후 스케치 내에 기능이 추가되리라 생각합니다. 더 나은 플러그인이 있으면 적용 후 업데이트하겠습니다. 한글 돋움,바탕체로 사용하기 위해 다양한 서체군을 가진 Noto CJK KR 을 사용했습니다.
규칙
Font-family: Noto CJK KR (Sans, Serif)
Alignment: Auto, Left/Center/Right
Line-height: Display=글자크기 x1.3 H1~H6=글자크기 x1.4 P, misc=글자크기 x1.6
Color: Black, Grey, White, Primary
Naming: 종류/정렬/색 (H1/Left/Black)
종류
웹에서 쓰이는 태그에 기반해 나누었습니다.
Display1~3
메인과 같이 강렬하게 표현되야할 필요를 위한 크기가 큰 스타일
Bold 72px 56px 40px
Headline 1~6
제목뿐만 아니라 다양한 위치에서 사용되기 때문에 크기 종류가 많은 스타일
Bold, Regular 32px 28px 24px 20px 18px 16px
Paragraph
본문에 쓰이는 스타일
Regular 16px
Caption
작은 영역에 쓰이는 스타일
Regualr 14px
Button
배경 색에 영향이 없이 분명하게 읽히는 스타일
Medium 16px
misc
인용(quotation), 강조(Emphasize), 링크(Link) 등의 기타 스타일
사용법
1. Sketch - Preferences - Library - Add Library... 에 DesignCompass-Typography을 추가합니다.
2. Automate Sketch 플러그인 설치 (다양한 기능을 모은 스케치 플러그인입니다.)
3. 사용할 문서에서 Plugins - Automate - Library - Import Styles from Library를 실행합니다.
4. DesignCompass-Typography을 선택합니다.
5. 서체를 넣고 스타일을 적용합니다.
파일 다운로드
Version
v0.0.2: P2를 삭제하고 P의 크기가 16px로 변경되었습니다. 이하 작은 서체들의 크기도 2px씩 커졌습니다.
v0.0.3: 플러그인 교체 Shared Text Style > Automate
v0.0.4: 텍스트 심볼 추가
v0.0.5: 텍스트 스타일, 레이어, 심볼 이름 및 일치하지 않는 부분 수정
v0.1: Small(12pt) 추가, 심볼, 텍스트 스타일 업데이트
