01. 타이포의 힘

About this offer

핵심 한 줄 타이포그래피는 글자를 꾸미는 것이 아니라, 정보의 순서와 브랜드의 목소리를 정하는 것 이다. 01. 타이포를 결정하는 4가지 크기 · 굵기 · 행간 · 자간 크기 Size → 무엇을 먼저 읽게 할지 결정 굵기 Weight → 강조의 정도를 결정 행간 Line height → 문장의 밀도와 가독성을 결정 자간 Letter spacing → 글자의 인상과 밀도를 조절 조정 순서는 보통 크기 → 굵기 → 행간 → 자간 처음부터 모든 값을 만지기보다 이 순서대로 조정하면 훨씬 수월하다. 📌 02. 실무 기본값 처음 시작할 때 참고할 만한 값. 용도 크기 굵기 행간 자간 큰 제목 28–40px 700–800 120–130% -3% 소제목 18–22px 700 130–140% -2% 본문 14–16px 400–500 150–160% -1~-2% 보조 설명 12–13px 400–500 140–150% 0~-1% 버튼 14–16px 700 100% -1% 기억할 것 모바일 본문은 가급적 14px 아래로 내리지 않기 한 화면의 글자 크기는 3단계 정도 면 충분 숫자·가격·할인율처럼 중요한 정보는 주변보다 한 단계 크게 긴 문장은 가운데 정렬보다 왼쪽 정렬 한글 본문의 자간을 지나치게 넓히지 않기 📌 03. 폰트의 ‘얼굴’ 한글 폰트는 크게 보면 먼저 고딕 / 명조 를 구분한다. 고딕 Sans 화면·UI·본문에 가장 일반적 비교적 현대적이고 명확한 인상 명조 Serif 긴 글, 브랜드 스토리, 감성적인 표현 등에 활용 고딕보다 인상이 강하므로 목적이 있을 때 선택 여기에 실무에서는 크게 4가지 얼굴 정도만 기억하면 된다. 고딕 / 명조 / 제목용 / 손글씨 같은 문장이라도 어떤 얼굴을 선택하느냐에 따라 브랜드의 말투가 달라진다. 📌 차분함·믿음 → 안정적인 고딕 친근함·부드러움 → 부드러운 형태 고급스러움·느림 → 명조 급함·센 강조 → 굵고 강한 제목용 서체 📌 04. 폰트는 많이 쓰지 않는다 기본은 폰트 1개 + 굵기 2단계 정도로 시작한다. 예: Pretendard Regular 400 → 본문 Pretendard Bold 700 → 제목·강조 브랜드 성격상 다른 얼굴이 꼭 필요하다면 두 번째 폰트를 추가한다. 예: 고딕 본문 + 명조 제목 하지만 비슷한 고딕 두 개를 섞는 식의 조합은 차이가 명확하지 않으면서 통일성만 깨질 수 있다. → 두 번째 폰트에는 이유가 있어야 한다. 05. 실무에서 시작하기 좋은 폰트 UI·본문용 후보: Pretendard / Noto Sans KR / SUIT / Spoqa Han Sans Neo / IBM Plex Sans KR 제목·강조용은 별도의 디스플레이 폰트를 사용할 수 있고, 긴 글이나 신뢰·감성이 필요한 영역에서는 명조 계열을 고려한다. 단, 실제 프로젝트에서는 예쁘다는 이유만으로 고르지 말고 라이선스부터 확인한다. 확인할 것: 상업적 이용 / 웹·앱 임베딩 / 로고 사용 가능 여부 06. 실제 화면에 적용하는 법 정보를 전부 강조하면 결국 아무것도 강조되지 않는다. 랜딩 화면이라면 기본적으로 큰 제목 한 줄 설명 한 줄 버튼 하나 정도로 핵심을 만든 뒤 나머지 정보는 아래로 내린다. 상세페이지에서도 숫자 → 크게 설명 → 작게 카피 → 한 줄 처럼 역할을 분리한다. 📌 07. 자주 하는 실수 1. 폰트를 3개 이상 사용 → 1개 + 굵기 2단계부터 시작 2. 모든 텍스트를 굵게 → 강조할 곳만 700, 나머지는 400 3. 행간 Auto에 맡김 → 본문 약 150%, 제목 약 120–130%부터 조정 4. 긴 문장을 가운데 정렬 → 긴 글은 왼쪽 정렬 5. 한글 본문의 자간을 넓힘 → 대체로 0~-2% 정도에서 시작 🔖 참고자료 https://noonnu.cc/

Offer details

Provider

velog

Source

velog-rss

Score

54.39

Confidence

49%