피그마 가변 글꼴: 내 맘대로 글꼴 주무르기

피그마가 새로운 가변 글꼴 (Variable fonts)을 다뤄볼 수 있는 웹사이트를 공개했습니다.

가변 글꼴은 하나의파 일로 너비, 두께, 기울기 등을 자유자재로 변경할 수 있는 차세대 글꼴 포맷입니다. 어도비, 애플, 구글, 마이크로소프트가 협업해 개발했으며 2016년 발표된 기술입니다.

©Figma
©Figma
©Figma

👁️ 디자이너의 눈

마우스를 올리면 반응하는 첫 상호작용이 매력적입니다. 귀여운 일러스트레이션 위에 마우스 커서를 올려 좌우로 움직이면 반응합니다. 글꼴의 속성에 영향을 미치는 다양한 축을 직관적으로 표현했습니다.

가변 글꼴을 바로 이해할 수 있게 직관적으로 설명합니다. 글꼴 파일 1개로 다양한 서체의 속성을 지정해 사용할 수 있습니다. Thin, Regular, Black와 같은 굵기나 Italic, Condensed 등의 스타일을 위해 별도 글꼴 파일을 사용할 필요가 없습니다. 마치 여러 개의 png 이미지를 쓰는 대신 자유자재로 쓸 수 있는 svg 파일을 사용하는 것 같습니다.

섬세한 디테일은 곧 사용성과 심미성에 연결됩니다. 글의 크기와 량에 따라 적절한 글꼴을 사용할 수 있습니다. 글자의 크기가 작아지면 글꼴이 더 두꺼워보이는데 크기에 따라 적절한 굵기를 지정할 수 있습니다. 버튼을 디자인할 때 글꼴의 속성을 바꾸면 레이어의 크기가 바뀔 수도 있는데 크기는 고정되면서 굵기만 바꿀 수 있습니다. 폭을 좁혀 좁은 공간에 더 많은 글자를 넣을 수도 있습니다. 시간축을 설정할 수 있어 애니메이션도 넣을 수 있습니다.

©Figma
©Figma
©Figma

📕 에디터 노트

서비스가 새롭게 제공하는 기능을 소개하는 방식이 멋집니다. 피그마다운 그래픽으로 알기 쉽게 개념을 설명하고 직접 사용해보게 만드는 것이 직관적입니다. 피그마 툴을 바로 써보게 할 수도 있지만 살펴볼 기능에만 집중하는 것도 쉽지 않습니다. 하고 싶은 말만 압축해서 매력적인 웹사이트로 공유한 것이 매력적입니다.

가지고 놀 수 있는 파일도 있으니 꼭 다뤄보세요!

더 보기 및 출처

비슷한 글

최근 글

디자인 나침반 뉴스레터

매주 화요일 아침, 16년 차 디자이너가 큐레이션한
영감을 주는 뉴스, 트렌드, 아티클을 모아보세요.

인기

baemin-increase-price-01
배민 대대적 개편: 수수료 높아지고 앱 메인도 바뀐다
musinsa-desktop-quit-01
무신사 PC 버전 종료: 넘쳐 버린 개발 부채
kakao-id-card-01
카카오 톡사원증: 킹차갓무직도 보일까?

최근

toss-stock-pc-01
토스 증권 PC 출시: 증권 서비스도 디자인 혁신
cfcldn-01
챌시 FC 리브랜딩: 푸르게 타오르는 열정
kakao-id-card-01
카카오 톡사원증: 킹차갓무직도 보일까?

디자인 나침반 아카데미

thumbnail-course-list-ux
UX 디자인 클래스: 선택 받는 서비스를 위한 UX 디자인
ui-design-main-mobile
UI 디자인 클래스: 변치 않을 인터페이스의 본질 배우기

최근 소식

toss-stock-pc-01
cfcldn-01
kakao-id-card-01
Channela-rebranding-01
baemin-increase-price-01
galaxy-ring-01
olympic-uniform-01
musinsa-desktop-quit-01
episode-yongsan-241-01
figma-ai-pause-01
meta-ai-label-01
verizon-rebrand-01