FontFYI

1. 개요2. 주요 기능

2.1. 인터랙티브 도구2.2. 글꼴 데이터베이스2.3. 카테고리 & 태그

2.3.1. 글꼴 대분류 (5개)2.3.2. 글꼴 소분류 (14개)2.3.3. 폰트 태그 (30개)

2.4. 폰트 비교2.5. 활용 사례별 추천2.6. 디자인 시스템 글꼴2.7. 용어사전2.8. 블로그

2.8.1. 블로그 시리즈 (10개)

2.9. CSS 폰트 스택2.10. 개발자 API

3. 특징4. 관련 문서

4.1. 글꼴 & 서체4.2. 타이포그래피4.3. 대표 서체4.4. 웹 개발 & CSS4.5. 디자인 시스템

5. 외부 링크

1. 개요

FontFYI(https://fontfyi.com)는 개발자와 디자이너를 위한 글꼴 레퍼런스 웹 서비스이다. 구글 폰트(Google Fonts)에 등록된 1,911개의 무료 웹 폰트를 기반으로, 폰트 미리보기, 조합 추천, 비교, CSS 코드 생성 등 타이포그래피 관련 기능을 제공한다. 한국어를 포함한 15개 언어를 지원한다.

서비스명	FontFYI
URL	https://fontfyi.com
한국어	fontfyi.com/ko/
유형	글꼴 레퍼런스 / 개발자 도구
언어	15개 언어 (한국어 포함)
운영	2024년~
API	REST API 제공
글꼴 수	1,911개 (구글 폰트 전체)
블로그	110편 (8개 카테고리, 10개 시리즈)
용어사전	83개 타이포그래피 용어

2. 주요 기능

2.1. 인터랙티브 도구

FontFYI는 10가지 브라우저 기반 실시간 타이포그래피 도구를 제공한다. 별도의 설치 없이 웹 브라우저에서 바로 사용할 수 있다.

도구	URL	설명	관련 문서
폰트 조합 생성기	`fontfyi.com/tools/font-pairing-generator/`	제목용·본문용 폰트 조합을 AI 기반으로 추천. 실시간 미리보기와 조합 이유 설명 제공.	타이포그래피, 글꼴
폰트 미리보기	`fontfyi.com/tools/font-preview/`	1,911개 구글 폰트를 원하는 텍스트·크기·굵기·색상으로 미리보기.	글꼴
폰트 비교	`fontfyi.com/tools/font-compare/`	2~4개 폰트를 동일한 샘플 텍스트로 나란히 비교.	서체, 글꼴
타입 스케일 계산기	`fontfyi.com/tools/type-scale-calculator/`	황금비(1.618), Major Third(1.25), Perfect Fourth(1.333) 등 비율 기반 조화로운 글자 크기 스케일 생성.	타이포그래피, 황금비
폰트 스택 빌더	`fontfyi.com/tools/font-stack-builder/`	CSS `font-family` 폴백 체인을 시각적으로 구성. 웹 안전 폰트 폴백 자동 추천.	CSS, 웹 표준
CSS 코드 생성기	`fontfyi.com/tools/css-code-generator/`	구글 폰트 `@import` 및 `font-family` CSS 코드를 즉시 생성하여 복사.	CSS
명암비 검사기	`fontfyi.com/tools/contrast-checker/`	글자색·배경색 조합의 WCAG 2.1 AA(4.5:1) / AAA(7:1) 명암비 준수 여부 확인.	WCAG, 웹 접근성, 다크 모드
유동 타입 계산기	`fontfyi.com/tools/fluid-type-calculator/`	CSS `clamp()` 함수를 활용한 반응형 유동 글자 크기 선언문 생성.	반응형 웹 디자인, CSS
px/rem/em 변환기	`fontfyi.com/tools/px-rem-em-converter/`	픽셀(px), rem, em 타이포그래피 단위를 실시간 양방향 변환. 기본 글자 크기(base font size) 설정 가능.	CSS, 타이포그래피
가변 폰트 놀이터	`fontfyi.com/tools/variable-font-playground/`	가변 폰트(Variable Font)의 축(weight, width, slant, optical size)을 실시간으로 조절하며 탐색.	가변 폰트, 오픈타입

2.2. 글꼴 데이터베이스

분류	URL	수량	설명
글꼴 개별 페이지	`fontfyi.com/font/{slug}/`	1,911개	구글 폰트 전체. 각 폰트의 미리보기, 지원 굵기·스타일, 디자이너 정보, CSS 코드, 추천 조합 제공.
폰트 조합(Pairings)	`fontfyi.com/pairings/`	15개	제목용+본문용 폰트 조합 추천. 각 조합의 사용 맥락, 분위기, 적합도 점수(1~10) 제공.
용어사전(Glossary)	`fontfyi.com/glossary/`	83개	타이포그래피 용어를 8개 카테고리로 분류. 각 용어에 상세한 설명과 시각적 예시 포함.
블로그(Blog)	`fontfyi.com/blog/`	110편	타이포그래피 기초, 폰트 선택 가이드, CSS 활용, 웹 성능, 접근성 등 8개 카테고리.

2.3. 카테고리 & 태그

글꼴을 5개 대분류, 14개 소분류, 30개 태그로 체계적으로 분류한다.

2.3.1. 글꼴 대분류 (5개)

분류	설명	관련 문서
산세리프(Sans-serif)	돌기가 없는 현대적 서체. 고딕체에 해당.	고딕체, 세리프
세리프(Serif)	획 끝에 돌기가 있는 전통적 서체. 명조체에 해당.	명조체, 세리프
모노스페이스(Monospace)	모든 글자의 너비가 동일한 등폭 글꼴. 코드 편집기에서 주로 사용.	등폭 글꼴
필기체(Handwriting)	손글씨 스타일의 서체.	필기체
디스플레이(Display)	큰 크기의 제목·로고용 장식 서체.	서체

2.3.2. 글꼴 소분류 (14개)

대분류	소분류	설명	관련 문서
산세리프	기하학적(Geometric)	원과 직선 기반의 기하학적 구조. Futura, Poppins 등.	바우하우스
산세리프	휴머니스트(Humanist)	손글씨에서 영감을 받은 자연스러운 형태. Open Sans 등.	타이포그래피
산세리프	네오 그로테스크(Neo-grotesque)	중립적이고 절제된 스타일. 헬베티카, Arial 등.	헬베티카, 스위스 디자인
산세리프	그로테스크(Grotesque)	19세기 초기 산세리프 양식.	타이포그래피의 역사
산세리프	라운드(Rounded)	획 끝이 둥근 산세리프.	서체
세리프	올드 스타일(Old Style)	15~18세기 인쇄 전통. Garamond 등.	개러몬드, 활자
세리프	트랜지셔널(Transitional)	올드 스타일과 모던의 중간. Times New Roman 등.	타이포그래피의 역사
세리프	모던/디도(Modern/Didone)	극단적 굵기 대비. Bodoni, Didot 등.	보도니
세리프	슬랩 세리프(Slab)	두꺼운 직사각형 돌기. Roboto Slab 등.	세리프
디스플레이	장식체(Decorative)	독특한 장식이 가미된 서체.	서체
디스플레이	스크립트(Script)	붓글씨·캘리그래피 스타일.	캘리그래피
디스플레이	스텐실(Stencil)	스텐실 인쇄 스타일의 끊어진 획.	스텐실
모노스페이스	코딩용(Coding)	개발자를 위한 코딩 전용 등폭 폰트.	프로그래밍, 등폭 글꼴
모노스페이스	타자기(Typewriter)	타자기 스타일의 등폭 폰트.	타자기

2.3.3. 폰트 태그 (30개)

모던, 클래식, 장난스러운, 우아한, 미니멀, 볼드, 기하학적, 휴머니스트, 그로테스크, 슬랩 세리프, 컨덴스드, 라운드, 장식적, 빈티지, 테크, 에디토리얼, 친근한, 전문적, 예술적, 높은 가독성, 한국어 지원, CJK 지원, 가변 폰트, 코딩, 필기체, 와이드, 내로우, 고대비, 저대비, 다국어

2.4. 폰트 비교

2~4개의 폰트를 동일한 샘플 텍스트로 나란히 비교할 수 있다. URL은 알파벳순으로 정규화되어 검색엔진에 최적화된다.

URL 패턴	예시	설명
`/compare/{slug1}-vs-{slug2}/`	Inter vs Roboto	2개 폰트 비교
`/compare/{slug1}-vs-{slug2}-vs-{slug3}/`	Inter vs Open Sans vs Roboto	3개 폰트 비교

2.5. 활용 사례별 추천

17개의 용도별 폰트 추천 페이지를 제공한다.

용도	URL	대상	관련 문서
이력서	`fontfyi.com/use-case/resume/`	취업 준비생, 디자이너	이력서
프레젠테이션	`fontfyi.com/use-case/presentation/`	발표자, 기획자	프레젠테이션
블로그	`fontfyi.com/use-case/blog/`	블로거, 콘텐츠 크리에이터	블로그
랜딩 페이지	`fontfyi.com/use-case/landing-page/`	마케터, 웹 디자이너	랜딩 페이지
이커머스	`fontfyi.com/use-case/e-commerce/`	쇼핑몰 운영자	전자 상거래
모바일 앱	`fontfyi.com/use-case/mobile-app/`	앱 개발자, UI 디자이너	모바일 앱
코드 편집기	`fontfyi.com/use-case/code-editor/`	개발자	통합 개발 환경, 등폭 글꼴
대시보드	`fontfyi.com/use-case/dashboard/`	데이터 시각화	대시보드
문서화	`fontfyi.com/use-case/documentation/`	기술 문서 작성자	기술 문서
책·장문	`fontfyi.com/use-case/book/`	출판, 전자책	전자책
청첩장	`fontfyi.com/use-case/wedding-invitation/`	결혼 준비	청첩장
로고	`fontfyi.com/use-case/logo/`	브랜드 디자이너	로고
포스터	`fontfyi.com/use-case/poster/`	그래픽 디자이너	포스터
게임	`fontfyi.com/use-case/gaming/`	게임 UI 디자이너	게임 디자인
이메일 뉴스레터	`fontfyi.com/use-case/email-newsletter/`	이메일 마케터	이메일 마케팅
개발자용	`fontfyi.com/use-case/developers/`	웹 개발자	웹 개발
디자이너용	`fontfyi.com/use-case/designers/`	UI/UX 디자이너	웹 디자인

2.6. 디자인 시스템 글꼴

10개 주요 디자인 시스템에서 사용하는 글꼴 정보를 정리한다.

디자인 시스템	기본 글꼴	관련 문서
Material Design (구글)	Roboto	머티리얼 디자인
Apple Human Interface Guidelines	Inter	애플
IBM Carbon	IBM Plex Sans	IBM
GitHub Primer	Inter	GitHub
Tailwind UI	Inter	Tailwind CSS
Ant Design	Inter	앤트 디자인
Chakra UI	Inter	웹 프레임워크
Bootstrap	Open Sans	Bootstrap
Microsoft Fluent	Noto Sans	마이크로소프트
Vercel Geist	Inter	Vercel

2.7. 용어사전

83개의 타이포그래피 관련 용어를 8개 카테고리로 분류하여 상세한 설명을 제공한다.

카테고리	용어 수	주요 용어	관련 문서
활자 해부학(Anatomy)	16개	베이스라인, 엑스하이트, 어센더, 디센더, 세리프, 산세리프, 합자, 글리프	타이포그래피
분류(Classification)	12개	세리프, 산세리프, 슬랩 세리프, 모노스페이스, 디스플레이, 스크립트 등	서체, 활자
간격·지표(Spacing)	7개	줄 높이, 자간, 트래킹, 커닝	타이포그래피
기술(Technology)	14개	가변 폰트, `font-feature-settings`, 서브세팅, WOFF2, CSS `@font-face`, 오픈타입	웹 폰트, 오픈타입
웹 타이포그래피	13개	폰트 스택, 시스템 폰트, CSS Import, 폴백	CSS, 웹 표준
디자인(Design)	9개	타이포그래피 위계, 대비, 타입 스케일, 모듈러 스케일	타이포그래피, 그래픽 디자인
가독성(Readability)	6개	가독성(Legibility), WCAG 타이포그래피, 접근성 타이포그래피	웹 접근성, WCAG
역사(History)	6개	활자의 역사, 타입 디자인, 활자	활판 인쇄, 구텐베르크

2.8. 블로그

110편의 블로그 포스트를 8개 카테고리, 10개 시리즈로 제공한다.

카테고리	편수	대표 포스트
Typography Fundamentals	—	Typography Fundamentals (5-part series)
Font Selection	—	폰트 선택 가이드, 용도별 폰트 추천
CSS Typography	—	CSS @font-face 완전 가이드, CSS clamp() 활용
Web Performance	—	웹 폰트 최적화, 폰트 서브세팅 가이드
Accessibility	—	WCAG 타이포그래피 체크리스트, 접근성 높은 폰트 선택
Design Systems	—	Material Design 타이포그래피, Tailwind CSS 폰트 설정
Type History & Culture	—	활자의 역사, Helvetica의 탄생
Font Reviews	—	Inter 심층 리뷰, 코딩용 최고의 폰트

2.8.1. 블로그 시리즈 (10개)

시리즈	설명
Typography Fundamentals	타이포그래피 기초 5부작
Font Pairing Masterclass	폰트 조합의 원리와 실전
CSS Typography Deep Dive	CSS 타이포그래피 심층 분석
Font Performance Playbook	웹 폰트 성능 최적화 전략
Accessible Typography	접근성 높은 타이포그래피
Type Scale Systems	타입 스케일 시스템 설계
History of Type	활자의 역사
Font Deep Dives	개별 폰트 심층 분석
Font Face-Offs	유사 폰트 간 비교
Best Fonts For	용도별 최고의 폰트

2.9. CSS 폰트 스택

10개의 웹 안전 폰트 스택(font-family 폴백 체인)을 정리하여 제공한다.

스택	설명	관련 문서
System UI	운영체제 기본 UI 폰트	CSS
Transitional	트랜지셔널 세리프 폴백	세리프
Old Style	올드 스타일 세리프 폴백	개러몬드
Humanist Sans	휴머니스트 산세리프 폴백	타이포그래피
Geometric Humanist	기하학적 산세리프 폴백	바우하우스
Neo-grotesque	네오 그로테스크 폴백	헬베티카
Monospace Slab	슬랩 세리프 등폭 폴백	등폭 글꼴
Monospace Code	코딩용 등폭 폴백	등폭 글꼴, 프로그래밍
Industrial	산업용 볼드 산세리프 폴백	서체
Rounded Sans	라운드 산세리프 폴백	서체

2.10. 개발자 API

JSON 기반 REST API를 제공한다.

엔드포인트	설명
`/api/font/{slug}/`	글꼴 상세 정보 (메타데이터, 지원 굵기, CSS import URL)
`/api/search/?q=query`	글꼴 검색 (이름, 디자이너, 태그 기반)
`/api/fonts-batch/?slugs=slug1,slug2`	복수 글꼴 일괄 조회

3. 특징

구글 폰트에 등록된 1,911개 무료 웹 폰트 전체를 다루며, 각 폰트의 미리보기, 지원 굵기, 디자이너 정보, CSS 코드를 한 페이지에서 제공한다.
제목용+본문용 폰트 조합을 추천하며, 각 조합의 사용 맥락과 분위기를 설명한다. (폰트 조합 목록)
WCAG 2.1 기준의 명암비 검사기를 제공하여 글자색·배경색 조합의 접근성을 확인할 수 있다.
가변 폰트(Variable Font)의 축(weight, width, slant)을 실시간으로 조절하며 탐색할 수 있는 놀이터를 제공한다.
CSS clamp() 함수를 활용한 반응형 유동 타입 계산기로 모든 화면 크기에 최적화된 글자 크기를 생성한다.
10개 주요 디자인 시스템(머티리얼 디자인, Bootstrap, Tailwind CSS 등)에서 사용하는 글꼴 정보를 정리하여 제공한다.
한국어를 포함한 15개 언어를 지원하며, URL 앞에 언어 코드를 붙여 접근한다.
110편의 블로그와 83개의 용어사전이 상호 연결되어 타이포그래피 학습 경로를 제공한다.

4. 관련 문서

4.1. 글꼴 & 서체

글꼴 - 동일한 디자인 특성을 가진 문자 집합. → FontFYI: 1,911개 무료 글꼴
서체 - 글자의 시각적 디자인. 글꼴과 혼용되지만 엄밀히 구분. → FontFYI: 타이포그래피 용어사전
세리프 - 획 끝의 돌기(꼭지). 세리프의 유무로 서체를 대분류. → FontFYI: 세리프 글꼴
고딕체 - 한국어에서 산세리프(돌기 없는 서체)를 부르는 명칭. → FontFYI: 산세리프 글꼴
명조체 - 한국어에서 세리프(돌기 있는 서체)를 부르는 명칭. → FontFYI: 세리프 글꼴
등폭 글꼴 - 모든 문자가 같은 너비를 차지하는 글꼴. 코드 편집기에서 필수. → FontFYI: 모노스페이스 글꼴
가변 폰트 - 하나의 폰트 파일에 굵기·너비·기울기 등을 연속적으로 포함. → FontFYI: 가변 폰트 놀이터
구글 폰트 - 구글이 제공하는 무료·오픈소스 웹 폰트 서비스. → FontFYI: 1,911개 구글 폰트 레퍼런스

4.2. 타이포그래피

타이포그래피 - 문자를 배열하여 가독성과 시각적 효과를 높이는 기술. → FontFYI: 83개 타이포그래피 용어
커닝 - 두 글자 사이의 간격을 조절하는 타이포그래피 기법. → FontFYI: 커닝
행간 - 줄과 줄 사이의 간격. CSS의 line-height에 해당. → FontFYI: 줄 높이
합자 - fi, fl 등 두 글자를 하나로 결합한 형태. → FontFYI: 합자(Ligature)
활판 인쇄 - 구텐베르크의 활자 발명으로 시작된 인쇄 혁명. → FontFYI: 활자의 역사
캘리그래피 - 손으로 아름답게 글씨를 쓰는 예술. → FontFYI: 필기체 글꼴
황금비 - 1:1.618 비율. 타입 스케일에도 적용. → FontFYI: 타입 스케일 계산기

4.3. 대표 서체

헬베티카 - 1957년 스위스에서 탄생한 네오 그로테스크 산세리프. 가장 널리 사용되는 서체 중 하나. → FontFYI: Helvetica 이야기
Arial - Helvetica의 대안으로 만들어진 산세리프. Windows 기본 글꼴. → FontFYI
개러몬드 - 16세기 프랑스 활자공 클로드 개러몬의 올드 스타일 세리프. → FontFYI: EB Garamond
보도니 - 18세기 이탈리아의 극단적 굵기 대비 모던 세리프. → FontFYI

4.4. 웹 개발 & CSS

CSS - 웹 페이지의 글꼴·크기·색상 등 스타일을 정의하는 언어. → FontFYI: CSS 코드 생성기
웹 표준 - W3C가 정한 웹 기술 표준. → FontFYI: 폰트 스택 빌더
반응형 웹 디자인 - 화면 크기에 따라 레이아웃이 변하는 디자인. → FontFYI: 유동 타입 계산기
WCAG - 웹 콘텐츠 접근성 가이드라인. 명암비 기준 포함. → FontFYI: 명암비 검사기
웹 접근성 - 장애 여부와 무관하게 웹을 이용할 수 있도록 보장하는 원칙. → FontFYI: WCAG 명암비 검사
다크 모드 - 어두운 배경의 UI 테마. 글꼴 가독성에 영향. → FontFYI: 명암비 검사기

4.5. 디자인 시스템

머티리얼 디자인 - 구글의 디자인 시스템. 기본 글꼴 Roboto. → FontFYI: Roboto
Bootstrap - 가장 널리 사용되는 CSS 프레임워크. → FontFYI
Tailwind CSS - 유틸리티-퍼스트 CSS 프레임워크. → FontFYI