Design Atlas
한국어
❝ UX writing

Sentence Case

문장식 표기

Capitalize only the first word — "Save your changes now" — instead of Title-Casing Every Word.

Also known as: Title Case vs Sentence case
···
html
<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <div class="col"><button class="btn ghost" id="b1"></button><button class="btn ghost" id="b2"></button></div>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <div class="col"><button class="btn solid" id="g1"></button><button class="btn solid" id="g2"></button></div>
    <p class="why" id="gw"></p></div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:16px 14px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
.mark{position:absolute;top:10px;right:12px;font:800 16px/1 system-ui;color:var(--accent-2)}
.good .mark{color:var(--accent-3)}
.label{position:absolute;top:10px;left:12px;font:700 10px/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.col{display:flex;flex-direction:column;gap:8px;width:90%}
.btn{padding:8px 14px;border-radius:8px;font:700 clamp(10px,2.6vmin,13px)/1 -apple-system,sans-serif;text-align:center}
.ghost{background:var(--bg);border:1px solid var(--line);color:var(--fg)}
.solid{background:var(--accent-3);border:0;color:#fff}
.why{margin:0;font:500 11px/1.3 -apple-system,sans-serif;color:var(--muted);text-align:center}
js
const b1 = document.getElementById('b1'), b2 = document.getElementById('b2'), bw = document.getElementById('bw');
const g1 = document.getElementById('g1'), g2 = document.getElementById('g2'), gw = document.getElementById('gw');
const L = {
  ko: { b1: '저장하기', b2: 'SAVE', bw: '한 화면에서 어미·표기가 뒤섞임', g1: '저장하기', g2: '취소하기', gw: '어미를 화면 전체에서 통일' },
  en: { b1: 'Save Your Changes Now', b2: 'CANCEL', bw: 'Title Case and all-caps mixed on one screen', g1: 'Save your changes', g2: 'Cancel', gw: 'sentence case, consistent everywhere' },
};
let lang = 'ko';
function paint() {
  const t = L[lang];
  b1.textContent = t.b1; b2.textContent = t.b2; bw.textContent = t.bw;
  g1.textContent = t.g1; g2.textContent = t.g2; gw.textContent = t.gw;
}
paint();
setInterval(() => { lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 2600);

Sentence case capitalizes only the first word of a string, leaving the rest lowercase. It reads faster than Title Case ("Save Your Changes Now") and feels less like shouting — which is why design systems like Material Design and GOV.UK default to it for UI text.

Korean has no letter case, so the rule doesn't translate literally, but the underlying problem does: **keeping sentence-ending style consistent across one screen**. Mixing "저장하기," "저장," and "SAVE" for the same action creates the same visual noise that over-capitalized Title Case does in English.

The demo contrasts Title Case and sentence case on English buttons, and shows the Korean equivalent — inconsistent endings on the same screen.

When to use

Default to sentence case for English buttons, headings, and menu labels. For Korean, standardize the verb ending across the whole screen instead.