TL;DR

  • CSS Type Studio는 CSS Fonts Module Level 4 속성을 시각적으로 편집하는 도구임.
  • 디자인을 저장하거나 새로 만들고, 저장된 디자인을 불러오거나 삭제하는 기능임.
  • 표시 옵션에는 샘플 텍스트와 색상 모드 선택이 포함됨.
  • 글꼴 패밀리·크기·스타일·두께와 다양한 글꼴 변형 속성을 설정할 수 있음.
  • 텍스트 정렬·간격·줄바꿈·렌더링과 요소 여백 및 목록 스타일을 조정하는 구성임.

계정 및 디자인 관리

  • 계정 관리, 로그아웃, 계정 삭제, 로그인 기능임.
  • 새 사용자는 로그인해 글꼴 디자인을 저장하고 공유할 수 있음.
  • 현재 디자인 저장, 새 디자인 생성, 저장된 디자인 불러오기 및 삭제 기능임.
  • 삭제 완료 메시지와 저장·로그인 대화상자 닫기 컨트롤이 포함됨.

컨트롤 및 표시 옵션

  • 속성 초기화 기능임.
  • 샘플 텍스트 옵션: Basic, Kitchen Sink, Winnie the Pooh, Moby Dick, UN Charter - Chapter 1, Python Code, Pumpkin Pie Recipe임.
  • 색상 모드 옵션: Light, Dim, Dark, Cool, Warm임.

전역 속성

  • 글꼴 크기 단위: rem, px임.
  • 최대 너비 설정임.

요소 및 글꼴 속성

  • 대상 요소: H1, H2, H3, H4, P, ol > li, ul > li, div.byline, div.dateline임.
  • 글꼴 패밀리 선택, 글꼴 정보 확인, 추가 정보 열기 및 전체 글꼴 검색 기능임.
  • 글꼴 크기(rem), 글꼴 스타일(normal, italic, oblique), 글꼴 두께 설정임.
  • 두께 값: 100(thin), 200(extra light), 300(light), 400(normal), 500(medium), 600(semi-bold), 700(bold), 800(extra bold), 900(black), 950(extra black)임.
  • 글꼴 변형 설정에는 대문자 형식, 합자, 숫자 형식이 포함됨.
  • 대문자 형식: normal, small caps, all small caps, petite caps, all petite caps, unicase, titling caps임.
  • 합자 및 문맥 형식: normal, common ligatures, no common ligatures, discretionary ligatures, no discretionary ligatures, historical ligatures, no historical ligatures, contextual alternates, no contextual forms임.
  • 숫자 형식: normal, ordinals, slashed zeros, lining numbers, oldstyle numbers, proportional numbers, tabular numbers, diagonal fractions, stacked fractions임.
  • 텍스트 정렬 값: start, end, center, justify임.
  • 텍스트 들여쓰기(rem), 자간(rem), 줄 높이, 단어 간격(rem) 설정임.
  • text-wrap 속성은 요소 안의 텍스트 줄바꿈을 제어하며, 줄 길이 균형 조정 같은 타이포그래피 개선과 줄바꿈 비활성화를 제공함.
  • 값: wrap(기본값), nowrap, balance, pretty, stable임.
  • 텍스트 변환 값: none, capitalize, uppercase, lowercase임.
  • font-kerning 속성은 글꼴에 저장된 커닝 정보의 사용 여부를 설정함.
  • auto에서는 브라우저가 커닝 적용 여부를 판단하며, 작은 글꼴에서는 가독성 저하 가능성 때문에 커닝을 비활성화할 수 있음.
  • normal은 글꼴의 커닝 정보를 적용하고, none은 해당 정보를 비활성화함.
  • 값: auto(기본값), normal, none임.
  • 텍스트 렌더링 값: auto(기본값), optimize speed, optimize legibility, geometric precision임.
  • font-optical-sizing 속성은 여러 크기에서 보기 좋도록 텍스트 렌더링을 최적화할지 설정함.
  • none은 최적 표시를 위한 글리프 모양 변경을 비활성화하고, auto는 브라우저가 글리프 모양을 조정하도록 함.
  • 값: auto(기본값), none임.
  • 두께 합성, 스타일 합성, 작은 대문자 합성 값은 각각 auto(기본값), none임.
  • 위쪽 여백(rem), 아래쪽 여백(rem), 왼쪽 안쪽 여백(rem) 설정임.
  • 목록 스타일 값: none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-latin, upper-latin, lower-alpha, upper-alpha임.