GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

css typography 플레이그라운드 9종 — 웹폰트 한 줄도 없이

· Godrich · 9종 · 11분 읽기

baseSCSS바닐라 JS페이지 템플릿클릭콘텐츠 파이프라인

css typography 는 페이지의 글자 손질, 곧 어느 서체에 얼마나 굵게, 자간과 행간을 얼마나 벌리고, 크기를 어디까지 키울지를 정하는 일입니다. 이번 놀이터 아홉 개는 웹폰트 한 줄도 없이 이미 컴퓨터에 깔려 있는 서체만으로 지었고, 아래 격자에서 전부 움직입니다.

시스템 서체 스택 비교01 font-stack-compare 굵기 축 슬라이더 (100~900)02 font-weight-slider 자간·행간 조절기03 font-spacing-tuner 단락 리듬 프리뷰04 text-rhythm-preview 제목 스케일 사다리05 type-scale-ladder 폰트 해부 카드06 font-anatomy-cards 제목·본문 페어링 프리뷰07 font-pairing-preview 드롭캡과 인용문 꾸미기08 dropcap-quote 반응형 clamp() 스케일09 clamp-fluid-scale

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

순서는 글자 하나의 얼굴을 고르는 일에서 시작해 점점 넓은 설계로 나갑니다. 먼저 쓸 서체의 얼굴을 나란히 견주고(01), 굵기 축을 훑고(02), 자간과 행간을 두 손잡이로 만지고(03), 한 줄 길이와 바탕 격자로 리듬을 잡고(04), 단계 크기로 사다리를 쌓고(05), 서체의 뼈대를 해부하고(06), 제목과 본문의 짝을 견주고(07), 첫 글자와 인용을 꾸미고(08), 마지막에 화면 폭을 따라 크기를 흐르게 만듭니다(09). 시스템 서체만 쓴 까닭은 하나입니다 — 어느 기기에서 열어도 첫 화면부터 제 모양으로 떠야 이 실험의 값이 참이 되고, 받은 파일을 아무것도 더 내려받지 않고 열어도 그대로 돌아가기 때문입니다. 글자 자체에 움직임을 입히는 쪽이 궁금하면 키네틱 타이포그래피 랜딩과 css 텍스트 애니메이션 9종이 이 편의 이웃입니다.

01시스템 서체 스택 비교

같은 문장을 세 판에 나란히 놓고 serif·sans·mono 시스템 스택을 각각 입혀 보는, 디자인 시스템 문서의 서체 지정 페이지에 얹는 부품입니다.

시스템 서체 스택 비교
새 창에서 열기

01 · 시스템 서체 스택 비교 — 측정 누적면적 23.762% · 움직인 프레임 14/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

font-familysystem-uiui-monospace

세 판이 실제로 입은 스택

$serif: ui-serif, Georgia, "Times New Roman", "Noto Serif KR", serif;
$sans: system-ui, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
$mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

.fs__spec {
  margin: 0; color: $subject-cream;
  font-size: clamp(13px, 4.6vw, 20px); font-weight: 600; line-height: 1.45;
}
.fs__spec--serif { font-family: $serif; }
.fs__spec--sans { font-family: $sans; }
.fs__spec--mono { font-family: $mono; }

세 판의 font-family 계산값은 각각 ui-serif 와 Georgia 짝, system-ui 와 Segoe UI 짝, ui-monospace 와 Consolas 짝으로 풀렸습니다.

탭 한 번에 표본 세 벌이 갈아 입는다

var SAMPLES = ['동해물과 백두산이', 'Hello Type 0123', 'CSS 타이포 2026'];
// 탭을 누르면 세 판의 표본 문장이 한꺼번에 갈아 입는다 — 미리보기 루프는 여기서 뗀다
tabs.forEach(function (tab, i) {
  tab.addEventListener('click', function () {
    fs.classList.remove('is-demo');
    tabs.forEach(function (t) { t.setAttribute('aria-pressed', String(t === tab)); });
    specs.forEach(function (spec) { spec.textContent = SAMPLES[i]; });
  });
});

영문 탭을 누르면 세 판의 문장이 한꺼번에 Hello Type 0123 으로 바뀌고, 누른 탭의 aria-pressed 만 true 로 남았습니다.

02굵기 축 슬라이더 (100~900)

슬라이더를 끌면 font-weight 가 100 에서 900 까지 움직이고, 화면에는 브라우저가 계산한 값이 따라오는, 도구의 글꼴 설정 패널에 얹는 부품입니다.

굵기 축 슬라이더 (100~900)
새 창에서 열기

02 · 굵기 축 슬라이더 (100~900) — 측정 누적면적 5.237% · 움직인 프레임 14/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

font-weightfont-variation-settingsoninput

숫자 칸은 계산값을 다시 읽는다

range.oninput = function () {
  wt.classList.remove('is-demo');
  var v = range.value;
  var pct = (v - 100) / 8;
  big.style.fontWeight = v;
  big.style.setProperty('--w', v);
  hangul.style.fontWeight = v;
  hangul.style.setProperty('--w', v);
  range.style.setProperty('--fill', pct + '%');
  range.setAttribute('aria-valuenow', v);
  out.textContent = getComputedStyle(big).fontWeight;
};

숫자 칸은 작성값을 그대로 옮겨 적지 않고 getComputedStyle 로 다시 읽어, 100 으로 내리면 100 이, 900 으로 올리면 900 이 찍혔습니다.

가변 축과 가까운 굵기의 갈림길

.wt__big {
  margin: 0; color: $subject-ink;
  font-family: $sans; font-weight: 700;
  font-size: clamp(38px, 15vw, 64px); line-height: 1.05;
  font-variation-settings: 'wght' var(--w, 700);
}

@keyframes wtSweep {
  0% { font-weight: 100; font-variation-settings: 'wght' 100; }
  45% { font-weight: 900; font-variation-settings: 'wght' 900; }
  90%, 100% { font-weight: 100; font-variation-settings: 'wght' 100; }
}

latin 표본 Ag 09 는 가변 축을 타고 부드럽게 흐르는 반면 한글 표본은 가까운 굵기에 붙는데, 화살표 키 오른쪽을 한 번 누른 실측에서는 정확히 600 을 가리켰습니다.

03자간·행간 조절기

자간은 em 으로, 행간은 단위 없는 배수로 각각 움직이며 값이 글 옆에 바로 붙는, 블로그 본문 설정 패널용 부품입니다.

자간·행간 조절기
새 창에서 열기

03 · 자간·행간 조절기 — 측정 누적면적 13.345% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

letter-spacingline-heighttextContent

em 자간과 단위 없는 행간

track.oninput = function () {
  st.classList.remove('is-demo');
  var v = Number(track.value).toFixed(2);
  text.style.letterSpacing = v + 'em';
  track.style.setProperty('--fill', ((track.value + 0.04) / 0.34 * 100) + '%');
  trackVal.textContent = v + 'em';
};
lead.oninput = function () {
  st.classList.remove('is-demo');
  var m = Number(lead.value).toFixed(2);
  text.style.lineHeight = m;
  lead.style.setProperty('--fill', ((lead.value - 1) / 1 * 100) + '%');
  leadVal.textContent = m;
};

자간을 0.3em 으로 밀면 계산값이 3.9px 가 되고, -0.04em 으로 당기면 -0.52px 로 본문이 바로 반응합니다.

상자 높이가 무대를 지킨다

.st__body {
  height: 130px; overflow: hidden;
  padding: $sp-2; border: 1px solid rgba($subject-ink, .14); border-radius: $r-control;
}
.st__text {
  margin: 0; color: $subject-ink;
  font-family: $sans; font-weight: 500;
  font-size: clamp(10px, 3.2vw, 13px); line-height: 1.7; letter-spacing: 0.02em;
  overflow-wrap: break-word;
}

@keyframes stLead {
  0% { line-height: 1.1; }
  45% { line-height: 2.0; }
  90%, 100% { line-height: 1.1; }
}

행간을 2.0 까지 벌리면 13px 본문의 줄 간격이 26px 로 늘어나는데, 표본 상자가 높이 130px 로 고정돼 있어 무대 밖으로 나가지 않습니다.

04단락 리듬 프리뷰

한 줄 길이를 ch 로 정하고 바탕 격자를 켜면 행이 격자 줄에 앉는지 보이는, 뉴스·매거진 본문 프리뷰용 부품입니다.

단락 리듬 프리뷰
새 창에서 열기

04 · 단락 리듬 프리뷰 — 측정 누적면적 17.881% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

chrepeating-linear-gradienttext-wrap: pretty

ch 폭과 같은 간격의 격자

.tr__sheet {
  --measure: 44;
  box-sizing: border-box; width: calc(var(--measure) * 1ch); max-width: 100%;
  padding: $sp-2; border-radius: $r-sm;
}
// 격자 줄은 행간과 같은 $lh 간격으로 반복한다
.tr__sheet.is-grid {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba($subject-blue, .26) 0, rgba($subject-blue, .26) 1px,
    transparent 1px, transparent $lh
  );
  background-position: 0 $sp-2;
}
.tr__p {
  margin: 0; color: $subject-ink;
  font-family: $serif; font-weight: 400; font-size: 13px; line-height: $lh;
  text-wrap: pretty;
}

슬라이더를 28 로 내리면 표본 폭이 44ch 일 때의 326.6px 에서 241.5px 로 줄고 값 칸이 28ch 를 가리켰습니다.

토글은 배경 한 줄로 끝난다

function applyMeasure() {
  sheet.style.setProperty('--measure', range.value);
  val.textContent = range.value + 'ch';
}
function stopLoop() { tr.classList.remove('is-demo'); }
range.addEventListener('input', function () { stopLoop(); applyMeasure(); });
grid.addEventListener('click', function () {
  stopLoop();
  var on = grid.getAttribute('aria-pressed') === 'true';
  grid.setAttribute('aria-pressed', on ? 'false' : 'true');
  sheet.classList.toggle('is-grid', !on);
});

토글을 끄면 시트의 배경 계산값이 repeating-linear-gradient 에서 none 으로 바뀌어, 잉크가 지워지듯 줄이 사라졌습니다.

05제목 스케일 사다리

비율을 고르면 다섯 단의 크기가 calc() 사슬로 다시 계산되는, 이른바 css typography scale 을 비율 하나로 묶어 보는 스타일 가이드용 부품입니다.

제목 스케일 사다리
새 창에서 열기

05 · 제목 스케일 사다리 — 측정 누적면적 48.553% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

calc()--ratiotoFixed

비율은 calc 사슬이 계산한다

@property --ratio {
  syntax: "<number>";
  inherits: true;
  initial-value: 1.25;
}

.ts__rung--1 .ts__glyph { font-size: calc(var(--base) * 1px); }
.ts__rung--2 .ts__glyph { font-size: calc(var(--base) * var(--ratio) * 1px); }
.ts__rung--3 .ts__glyph { font-size: calc(var(--base) * var(--ratio) * var(--ratio) * 1px); }
.ts__rung--4 .ts__glyph { font-size: calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio) * 1px); }
.ts__rung--5 .ts__glyph { font-size: calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * 1px); }

비율 1.25 에서는 다섯 단이 11px 부터 26.86px 까지 쌓이고, 1.333 으로 바꾸면 최상단 라벨이 34.7px 를 가리켰습니다.

숫자 세 벌을 겹쳐 두는 이유

var BASE = 11;
var RATIOS = { a: 1.125, b: 1.25, c: 1.333 };

function buildLabels() {
  boxes.forEach(function (box) {
    var step = Number(box.getAttribute('data-step'));
    Object.keys(RATIOS).forEach(function (key) {
      var v = document.createElement('span');
      v.className = 'ts__v ts__v--' + key;
      v.textContent = (BASE * Math.pow(RATIOS[key], step)).toFixed(1) + 'px';
      box.appendChild(v);
    });
  });
}

숫자 라벨은 세 비율의 값을 처음에 전부 심어 두고 지금 비율의 것만 보여 주어, 칩을 바꿔도 크기와 숫자가 어긋나지 않습니다.

06폰트 해부 카드

큰 글자 위에 기준선·x 높이·대문자 높이 줄을 겹쳐 그리는, 타이포그래피 가이드와 강의 자료에 얹는 부품입니다.

폰트 해부 카드
새 창에서 열기

06 · 폰트 해부 카드 — 측정 누적면적 41.664% · 움직인 프레임 15/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

::beforelinear-gradientex

x 높이 줄만 진짜 치수다

.fa__rule {
  position: absolute; left: $sp-2; right: $sp-2;
  font-size: 52px;                     // ex 가 이 크기의 서체 치수로 풀리게 한다
  pointer-events: none;
}
.fa__rule::before {
  content: ""; display: block; height: 1px;
  background: linear-gradient(90deg, $color 0 6px, transparent 6px 10px);
  background-size: 10px 1px;
}
.fa__rule--base { bottom: calc(#{$sp-4} + #{$desc}); }
.fa__rule--x    { bottom: calc(#{$sp-4} + #{$desc} + 1ex); }
.fa__rule--cap  { bottom: calc(#{$sp-4} + #{$desc} + #{$cap}); }

같은 식으로 그린 x 높이 줄의 바닥 위치가 세리프 판에서 176.0px 로, 산세리프 판에서 174.4px 로 갈라집니다.

표본 글자의 바닥과 고른 카드의 강조

.fa__sample {
  position: absolute; left: $sp-3; bottom: $sp-4;
  color: $subject-ink; font-weight: 400; font-size: 52px; line-height: 1;
}

// 지금 보고 있는 카드에만 테두리가 선다
.fa.is-serif .fa__card--serif,
.fa.is-sans .fa__card--sans { border-color: $color; background: rgba($subject-blue, .07); }

표본 글자 Hxg 는 line-height: 1 로 카드 아래쪽에 앉아 상자 바닥이 곧 내림 끝이 되고, 고른 카드는 .fa.is-serif .fa__card--serif 한 줄로 테두리 색과 7% 파랑 바탕만 바뀌어 두 판의 자리는 그대로 둔 채 지금 보는 쪽만 도드라집니다.

07제목·본문 페어링 프리뷰

제목 서체와 본문 서체를 각자 골라 조합이 즉시 그려지는, 랜딩페이지를 짜기 전 폰트 짝을 검토하는 판입니다.

제목·본문 페어링 프리뷰
새 창에서 열기

07 · 제목·본문 페어링 프리뷰 — 측정 누적면적 26.822% · 움직인 프레임 21/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

font-familyfont-styleline-height

칩의 얼굴을 견본에 옮긴다

// 칩은 제 저마다 해당 서체로 그 이름을 쓰고 있다 — 컴퓨티드 font-family 를 그대로 견본에 옮긴다
function stack(btn) { return getComputedStyle(btn).fontFamily; }

function pick(btn) {
  pp.classList.remove('is-demo');
  var target = btn.getAttribute('data-row') === 'head' ? head : body;
  target.style.fontFamily = stack(btn);
  var row = btn.parentNode;
  var chips = row.querySelectorAll('.pp__chip');
  for (var i = 0; i < chips.length; i++) {
    var on = chips[i] === btn;
    chips[i].classList.toggle('is-on', on);
    chips[i].setAttribute('aria-pressed', on ? 'true' : 'false');
  }
}

제목 칩으로 세리프를 고르면 견본 제목의 계산된 font-family 가 system-ui 에서 Georgia 로 갈아앉았습니다.

기울임과 두 손잡이의 값

.pp {
  --f-sans: system-ui, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  --f-serif: Georgia, "Times New Roman", ui-serif, serif;
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --f-wide: Verdana, "Segoe UI", "Noto Sans KR", sans-serif;
  display: flex; flex-direction: column; gap: $sp-2;
  box-sizing: border-box; width: min(100%, 432px);
  padding: $sp-2; border: 1px solid rgba(23, 20, 26, .14); border-radius: $r-card;
  background: $stage-paper; box-shadow: $shadow-raised;
}

기울임을 켜면 제목이 italic 로 서고, 자간 0.08em 에 행간 1.9 를 맞추면 자간이 1.92px · 행간이 24.7px 로 짝의 결이 잡힙니다.

08드롭캡과 인용문 꾸미기

::first-letter 를 float 으로 띄워 첫 글자를 키우고 initial-letter 를 아는 브라우저는 그 길로 보내는, 매거진형 블로그 본문 꾸미기용 부품입니다.

드롭캡과 인용문 꾸미기
새 창에서 열기

08 · 드롭캡과 인용문 꾸미기 — 측정 누적면적 48.323% · 움직인 프레임 20/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

::first-letterfloatinitial-letter

두 경로를 가르는 supports 분기

.dq.is-cap .dq__text::first-letter {
  float: left;
  padding-right: $sp-1; padding-top: $sp-1;
  line-height: .82;
  font-weight: 700;
  font-size: calc(1.65em * var(--cap-lines));
  color: $subject-blue-deep;
}
@supports (initial-letter: 3) {
  .dq.is-cap .dq__text::first-letter {
    initial-letter: var(--cap-lines);
    float: none;
    padding-top: 0;
  }
}

줄수를 3 으로 두면 첫 글자가 61.875px 로 커져 62px 너비에 83px 높이를 차지하고, 4 로 올리면 82.5px · 86px · 110px 로 자랐습니다.

줄수를 숫자 속성으로 등록한 값

// initial-letter 를 아는 브라우저는 그 경로로 넘어간다 — 배지가 어느 쪽인지 알려 준다
if (window.CSS && CSS.supports && CSS.supports('(initial-letter: 3)')) {
  badge.textContent = 'initial-letter 경로';
}

var sizes = document.querySelectorAll('.dq__size');
for (var i = 0; i < sizes.length; i++) {
  sizes[i].addEventListener('click', function () {
    dq.classList.remove('is-demo');
    dq.style.setProperty('--cap-lines', this.getAttribute('data-lines'));
    for (var j = 0; j < sizes.length; j++) {
      var on = sizes[j] === this;
      sizes[j].classList.toggle('is-on', on);
      sizes[j].setAttribute('aria-pressed', on ? 'true' : 'false');
    }
  });
}

측정 환경에서 이 판정이 참으로 나와 배지는 initial-letter 경로를 가리켰고, 그 경로에서는 float 이 none 으로 계산되었습니다.

09반응형 clamp() 스케일

창 가장자리를 끌면 판 폭이 rem 로 찍히고 제목이 clamp() 구간 안에서 따라오는, 중단점 없이 크기를 흘리는 css typography responsive 설계를 시험하는 판입니다.

반응형 clamp() 스케일
새 창에서 열기

09 · 반응형 clamp() 스케일 — 측정 누적면적 30.844% · 움직인 프레임 21/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

clamp()innerWidthmin()

cqw 를 보는 상자 하나

.cf__frame {
  position: relative;
  container-type: inline-size;
  width: min(62%, 30rem);
  box-sizing: border-box;
  padding: $sp-3 $sp-3 0;
  border-radius: $r-card;
  background: $stage-paper; box-shadow: $shadow-raised;
}
.cf__inner { min-height: 92px; }
.cf__title {
  margin: 0; color: $subject-ink;
  font-weight: 800; font-size: clamp(1.125rem, 13cqw, 3rem); line-height: 1.15;
}

판을 176px 에서 432px 까지 끌면 제목이 19.76px 에서 40.56px 를 지나 48px 에 멈추었습니다.

창 폭까지 함께 찍는 숫자

function update() {
  var w = frame.offsetWidth;
  if (w === lastW) return;
  lastW = w;
  var winRem = window.innerWidth / 16;
  var ratio = Math.round(w / cf.clientWidth * 100);
  big.textContent = '판 ' + (w / 16).toFixed(1) + 'rem';
  sub.textContent = '창 ' + winRem.toFixed(1) + 'rem · 비율 ' + ratio + '%';
}

if ('ResizeObserver' in window) {
  new ResizeObserver(update).observe(frame);
  new ResizeObserver(update).observe(cf);
}

창 폭 숫자는 window.innerWidth 를 16 으로 나눈 rem 로 적히는데, 480px 창에서 30.0rem 이 찍혔습니다.

폰트 페어링은 시스템 서체만으로 어디까지 되나?

짝짓기 판(07)에서 나올 수 있는 조합은 제목 넷에 본문 넷, 모두 16가지입니다. 기울임과 자간·행간 손잡이까지 더하면 같은 짝 안에서도 결이 몇 갈래로 갈라집니다. 제목은 굵은 산스·본문은 세리프인 정석 짝은 물론, 모노 제목에 세리프 본문 같은 잡지 짝까지 판에서 바로 견줄 수 있습니다. 한계도 분명합니다 — OS 가 기본으로 주는 얼굴이 네 family 로 좁아, 개성 강한 디스플레이 서체를 앞세운 짝은 이 재료로는 나오지 않습니다. 대신 06 처럼 x 높이를 재어 보면 같은 크기로 찍어도 세리프와 산스의 얼굴이 달라 보이는 까닭을 알게 되고, 한쪽 크기를 살짝 올려 맞추는 보정까지가 이 재료로 할 수 있는 마지막 손질입니다.

어디서 깨지는가 — 함정

루프가 계산값을 오염시켰다

02 의 격자 미리보기는 font-weight 를 100 에서 900 까지 보간하는데, 그 한가운데서 계산값을 읽으면 실측에서 135.25 같은 중간값이 나옵니다. 그래서 루프가 붙어 있는 동안에는 숫자 칸을 HTML 의 초기값 700 그대로 두고, 손잡이에 닿는 순간 루프를 뗀 뒤에야 계산값을 읽도록 지켰습니다.

320px 에서 조용히 넘친 무대 트랙

04 의 표본은 폭이 44ch 인데, 무대의 자동 트랙이 이 너비만큼 벌어지며 320px 화면에서 화면 밖으로 조용히 넘쳤습니다. 항목 트랙을 minmax(0, 1fr) 로 못박아 무대 안에 가둔 뒤 320px 실측에서 넘침 0건으로 돌아왔습니다. 데모 아홉 판과 소스 전부가 든 zip 을 여는 여덟 글자는 rdv7unke 입니다.

천장에 닿은 제목은 자라지 않는다

09 에서 판을 끝까지 늘려도 제목이 멈춘다면 고장이 아니라 clamp() 의 최댓값에 닿은 것입니다. 실측에서 판 27.0rem 에 제목 48px, 손잡이로 120px 을 더 늘려 판이 27.6rem 이 되어도 제목은 48px 그대로였습니다.

변형 세 가지와 접근성

이름 바꾼 값 느낌
사다리 비율 --ratio 1.25 → 1.333 최상단이 26.86px 에서 34.73px 로 가팔라진다
드롭캡 줄수 --cap-lines 3 → 4 첫 글자가 61.875px 에서 82.5px 로 자란다
제목 천장 clamp() 최댓값 3rem → 2.5rem 판이 아무리 넓어도 제목이 40px 선에서 멈춘다

조작은 전부 진짜 range 와 button 이라 키보드와 스크린리더가 그대로 닿습니다. 02 는 슬라이더에 aria-valuenow 를 갱신하고 01 과 04~08 은 aria-pressed 로 눌림을 알리며, 09 의 손잡이는 button 이라 화살표 키로 한 칸에 1rem 씩 움직입니다. prefers-reduced-motion: reduce 에서는 01 이 세 판을 기본 상태로 멈춰 세우고, 02 는 굵기 스윕을 끄고, 03 은 자간 0.02em 과 행간 1.7 로 값을 고정하며, 04 는 폭을 44ch 로 되돌리고, 05 는 1.25 의 숫자만을 보이며, 07 은 기울임과 자간을 풀고, 08 은 3줄 드롭캡에 멈추고, 09 는 판 폭 순환을 끊어 각각 알맞은 정지 장면을 남깁니다. 대비는 아홉 판의 글자 59줄을 픽셀로 재어 AA 미달 0건이었고, 드롭캡 첫 글자는 #fff7e6 위 5.98:1, 06 의 x 높이 라벨은 #f0f5fe 위 4.91:1 이었습니다.

더 읽을거리: css 텍스트 그라디언트 샤인은 글자에 빛을 입히는 쪽이고, 코드 블록 UI 9종은 이웃한 읽기 전용 화면을 다룹니다. 명세는 MDN font-family와 MDN clamp(), MDN ::first-letter 문서가 원전입니다.

FAQ

시스템 서체만으로 쓸 폰트 페어링 추천 조합이 있나요

제목은 system-ui 계열의 800 굵기, 본문은 ui-serif 계열의 보통 굵기로 시작하는 짝이 무난합니다. 07 의 판에서 조합 16가지를 직접 견주고, 06 처럼 x 높이를 재어 한쪽 크기를 보정하면 짝이 더 단단해집니다.

font-weight 100 같은 얇은 굵기가 한글에서만 안 보이는 이유가 뭔가요

한글 시스템 서체에 그 축이 없어 브라우저가 가까운 굵기로 붙이기 때문입니다. 02 의 슬라이더에서 latin 표본은 축을 타고 부드럽게 흐르고 한글 표본은 계단처럼 붙는 것을 나란히 볼 수 있습니다.

clamp() 의 최솟값과 최댓값은 어떻게 정하면 좋나요

최솟값은 가장 좁은 화면에서 읽히는 크기, 최댓값은 레이아웃이 버티는 선에서 정합니다. 09 의 실측에서 제목은 19.76px 부터 자라 48px 천장에서 멈췄으니, 천장 감각은 이 판을 끌어 보며 익히면 됩니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.