Když pracujete s textem na webu, možná jste si všimli, že stejný počet znaků může zabírat různě široký prostor. Je to proto, že většina fontů používá proporcionální šířku znaků – každý znak má svou vlastní šířku podle tvaru.

Písmeno W je výrazně širší než i, číslo 1 užší než 0. Tento rozdíl může být až několikanásobný.

Interaktivní porovnání šířky znaků

V tabulce níže můžete porovnat šířku jednotlivých znaků v pixelech. Referenční znak je M, protože se tradičně používá jako měrná jednotka (em).

Proč je to důležité pro webdesign

Rozdílná šířka znaků má zásadní dopad na layout a responsivní design:

• Nemožnost předvídat šířku textu – text „Willy“ zabere víc místa než „Filip“, i když mají stejný počet znaků

• Problém s ořezáváním – nastavení max-width podle počtu znaků může vést k nekonsistentním výsledkům

• Dynamický obsah – uživatelská jména, produktové názvy nebo překlady mohou rozbít layout

• Tlačítka a labely – text „Submit“ vs. „Odeslat formulář“ vyžaduje jiný přístup

Tlačítka s fixní vs flexibilní šířkou

Uživatelská jména v layoutu

Přetečení textu v kartě

CSS jednotka ch

CSS nabízí jednotku ch, která odpovídá šířce znaku 0 v daném fontu. Je to aproximace, protože předpokládá, že všechny znaky mají podobnou šířku.

.input-field {
  width: 20ch; /* Přibližně 20 znaků */
}

Jednotka ch funguje dobře pro:

• Textová pole pro čísla (PSČ, telefon)

• Kód a monospace text

• Přibližné odhady šířky

Ale nespoléhejte na ni pro přesné rozměry běžného textu.

Rozdíl mezi em a ch

Obě jednotky jsou relativní, ale odvozují se od jiné vlastnosti:

• em – relativní k velikosti písma (font-size) elementu. 1em = aktuální font-size. Název pochází z tiskařství (šířka velkého M), ale dnes nesouvisí se šířkou znaků.

• ch – relativní k šířce znaku „0“ v daném fontu. Používá se pro odhad šířky textu podle počtu znaků.

.box {
  font-size: 16px;
  padding: 1em;      /* = 16px (velikost písma) */
  width: 20ch;       /* = 20× šířka "0" v tomto fontu */
}

Praktický rozdíl: em se mění pouze s font-size, zatímco ch se mění s font-size i s typem fontu (Arial má jinou šířku 0 než Times New Roman).

Jednotka ch v praxi

Monospace fonty jako řešení

Pokud potřebujete konsistentní šířku znaků, použijte monospace font:

.fixed-width {
  font-family: 'Courier New', Consolas, monospace;
}

V monospace fontech mají všechny znaky stejnou šířku. Zkuste v ukázce výše vybrat Courier New a uvidíte, že všechny znaky mají 100% šířku vůči referenci.

Monospace fonty jsou vhodné pro:

• Zobrazení kódu

• Tabulková data (čísla pod sebou)

• ASCII art

• Terminálový výstup

Jak to řešit v responsivním designu

Místo spoléhání na počet znaků použijte tyto techniky:

Flexibilní kontejnery

.button {
  padding: 10px 20px;
  white-space: nowrap;
  max-width: 100%; /* Omezí šířku v úzkém kontejneru */
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Samotný padding bez omezení max-width může způsobit, že tlačítko přeteče z kontejneru. Proto je vhodné přidat max-width: 100% a text-overflow: ellipsis jako pojistku.

Min/max šířky místo fixních

.input {
  min-width: 200px;
  max-width: 400px;
  width: 100%;
}

Flexbox a Grid

Layoutové systémy Flexbox a CSS Grid se přizpůsobují obsahu automaticky:

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-item {
  flex: 0 1 auto; /* Přizpůsobí se obsahu */
}

CSS funkce clamp()

Funkce clamp(min, preferred, max) umožňuje nastavit hodnotu, která se plynule mění mezi minimem a maximem podle preferované hodnoty:

.heading {
  /* Minimum 1rem, preferovaně 4vw, maximum 2rem */
  font-size: clamp(1rem, 4vw, 2rem);
}

.container {
  /* Šířka mezi 300px a 800px, preferovaně 90% */
  width: clamp(300px, 90%, 800px);
}

.button {
  /* Padding reagující na šířku viewportu */
  padding: clamp(8px, 2vw, 20px) clamp(16px, 4vw, 40px);
}

Výhoda clamp() je, že nepotřebujete media queries – hodnota se plynule přizpůsobuje. Více o dynamických výpočtech v článku o CSS funkci calc().

clamp() v praxi

Container queries

.card {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card-title {
    font-size: 1.5rem;
  }
}

Praktické tipy

• Testujte s extrémními hodnotami – zkuste do inputu zadat „WWWWWWWWWW“ i „iiiiiiiiii“

• Počítejte s překlady – německé slovo může být 2× delší než anglické

• Používejte text-overflow: ellipsis – jako pojistku pro příliš dlouhý text

• Nastavujte min-width na tlačítkách – aby nebyla příliš úzká s krátkým textem

• Pro čísla používejte font-variant-numeric: tabular-nums – zajistí stejnou šířku číslic

.price {
  font-variant-numeric: tabular-nums;
  /* Čísla budou mít stejnou šířku */
}

Proporcionální vs tabulární číslice

Zadejte vlastní text

Závěr

• Většina fontů má proporcionální šířku znaků – různé znaky zabírají různě místa

• Rozdíl mezi nejširším a nejužším znakem může být až 3–4×

• Nespoléhejte na počet znaků při návrhu layoutu

• Používejte flexibilní techniky: flexbox, grid, min/max-width, padding

• Pro konsistentní šířku použijte monospace fonty nebo tabular-nums

• Vždy testujte s různými délkami textu a překlady