Temel CSS özellikleriyle duyarlı ve akışkan tipografi

Miriam Suzanne

Yayınlanma tarihi: 16 Aralık 2025

Duyarlı web tasarımı, çeşitli tarayıcılarda, görüntü alanı boyutlarında, cihazlarda ve kullanıcı tercihlerinde iyi görünen ve iyi çalışan web siteleri oluşturma yaklaşımıdır. Tipografiye uygulandığında, temel sorun genellikle font-size değerinin tarayıcı genişliğine göre ayarlanmasıdır. Bu durum, line-height ve margin gibi aralık değerlerini de etkileyebilir.

Tasarımcılar olarak, tarayıcıda hangi alanın kullanılabileceğini düşünmek ve tipografinizi buna göre ayarlamak mantıklıdır. Ayrıca, farklı kullanıcıların, erişiminiz veya farkındalığınız dışında kalan kişisel koşullara bağlı olarak çeşitli cihazlarda farklı font-size ihtiyaçları olacağını da unutmamak önemlidir. Bu nedenle, kullanıcının nihai sonuç üzerindeki kontrolünü elinden alacak herhangi bir işlem yapmak tehlikelidir. İnsanların web'de gezinirken yazı tipi boyutunu etkilemek için kullanabileceği iki temel giriş vardır:

• Tüm web sitelerinde varsayılan bir font-size tercihi sunma
• Siteleri tek tek yakınlaştırabilir veya uzaklaştırabilirsiniz.

Bu demoda amaç, tipografiyi hem tarayıcının görüntü alanı boyutuna hem de kullanıcı girişlerine duyarlı hale getirmektir. Ancak tipografinizin görünüm alanına ne kadar çok yanıt verirse kullanıcı tercihlerine o kadar az yanıt vereceğini anlamanız önemlidir. Duyarlı tipografi uygulayacaksanız bunu dikkatli bir şekilde yapmanız ve sonuçların erişilebilir olmaya devam ettiğini test etmeniz önemlidir.

Kullanıcı tercihlerine göre temel font-size müzakere etme

İnternetteki herhangi bir tipografiyi tanımlamanın ilk adımı, kullanıcının font-size tercihine göre başlangıçtaki yazı tipi boyutunu belirlemektir. Bu yazı tipi, sayfadaki metnin büyük bir bölümünde ve başlıklar gibi diğer yazı tipi boyutları için temel olarak kullanılır. Buradaki en basit seçenek, 1em kullanarak kullanıcıya herhangi bir düzenleme yapmadan tam kontrol vermektir. Başka bir font-size değeri ayarlamadığınızda 1em, kullanıcı tercihini ifade eder. Spektrumun diğer ucunda ise piksel veya diğer mutlak birimlerde (hatta görüntü alanı ile ilgili birimlerde) font-size ayarlanması, kullanıcının tercihlerini tamamen geçersiz kılar. Bu durumdan kaçınılmalıdır.

Ancak farklı kullanım alanları farklı tipografiler gerektirir. Bir makalenin büyük metinle okunması daha kolay olabilirken, veri yoğun sitelerde daha küçük metinlerle daha kompakt bir tasarım gerekebilir. Her iki durumda da, kullanıcıların sonucu kendi durumlarına göre ayarlamasına izin verirken tasarıma uygun bir varsayılan önermek isteyebilirsiniz.

Birinci seçenek: Varsayımlara dayalı bir çarpan hesaplama

Sık kullanılan bir çözüm, kullanıcı varsayılan font-size değerine göre em veya % birimlerinde ayarlanmış bir font-size tanımlamaktır. Genellikle bu yaklaşım, tarayıcıların 16px varsayılanı sağladığı ve çoğu kullanıcının bu varsayılanı değiştirmeden bıraktığı varsayımıyla başlar. Siteniz için 20px yazı tipi boyutunun daha iyi olacağını düşünüyorsanız genellikle 1.25em veya 125% font-size yazı tipi boyutu istediğiniz sonucu verir:

html {
  /* 20px preferred, 16px expected: 20/16 = 1.25 */
  font-size: 1.25em;
}

Burada matematiksel işlemi göstermek için calc() işlevini de kullanabilirsiniz ancak yine de denklemin ne olduğunu bilmeniz gerekir: hedef boyut, beklenen boyuta bölünür ve 1em ile çarpılır:

html {
  font-size: calc(20 / 16 * 1em);
}

Daha büyük veya daha küçük bir tercihi olan kullanıcılar, varsayılanınız artık kendi tercihlerine göre belirlendiğinden (bu durumda tercihlerinin 1,25 katı) sonucu etkileyebilir. Ancak hem sizin hem de kullanıcının 20px varsayılanını istemesi ve sonucun 25px (ayarlanmış varsayılan boyutun 1, 25 katı) olması, yani kimsenin istemediği bir boyut elde edilmesi garip olabilir.

İkinci seçenek: Bırakın bu işi clamp() yapsın

Daha ayrıntılı bir yaklaşım, matematiksel işlem içermeyen CSS karşılaştırma işlevlerini kullanmayı gerektirir. 1em'in 16px'ya eşit olduğunu varsaymak ve px ile em arasında güvenilir olmayan dönüşümler yapmak yerine 1em'ı kullanıcı tercihini ifade eden bir değişken olarak düşünebilirsiniz. 1em hangi piksel değerini temsil ederse etsin, max(1em, 20px) piksel değeri her zaman tasarım tercihiniz (20px) ile kullanıcının tercihi (1em) arasındaki daha büyük değeri döndürür. Bu, kullanıcının daha büyük yazı tipi boyutlarını seçmesine olanak tanır ancak daha küçük yazı tipi boyutlarını seçmesine izin vermez.font-size

clamp() işlevine geçerek, tercih edilen boyut seçtiğiniz varsayılandan çok uzaklaştığında kullanıcının her iki yönde de ölçeklendirme yapmasına izin verebilirsiniz. Örneğin, clamp(1em, 20px, 1.25em) için font-size değeri, kullanıcı varsayılanından büyük olduğu sürece varsayılan olarak 20px olur ancak varsayılan değerin 125% katından fazla olmaz.

Bu sayede, tasarımınız kullanıcı tercihine yakın olduğunda öncelikli olur ancak kullanıcının tercihi belirtilen aralığın dışında olduğunda öncelik kullanıcıya verilir. Dönüşümle ilgili matematiksel işlemler, kullanıcı tercihi boyutuyla ilgili varsayımlar ve tasarımcı ile kullanıcı değerlerinin çarpımı yoktur.

Bunu html öğesinde kök font-size olarak ayarlayarak artık 1rem öğesine, üzerinde anlaşılmış temel boyut olarak sitenin herhangi bir yerinden referans verebilirsiniz.

Duyarlılık ekleme

Bu font-size öğesini görüntü alanına duyarlı hale getirmek için medya sorgusu (veya kapsayıcı sorgusu) kesme noktaları ekleyebilirsiniz. Örneğin, ekran boyutuna bağlı olarak sabitlenmiş değeri değiştirebilirsiniz:

html {
  font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
  @media (width > 30em) { --base-font-size: 18px; }
  @media (width > 45em) { --base-font-size: 20px; }
}

Diğer seçenek ise görüntü alanı veya kapsayıcı birimlerini statik temel değere eklemektir:

html {
  font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}

vw (Görüntü alanı genişliği) veya vi (Görüntü alanı satır içi boyutu) birimleri, toplam görüntü alanının (tarayıcının sitenizi oluşturduğu bölüm) %1'ini temsil eder. Benzer şekilde, cqw ve cqi birimleri, sayfadaki satır içi boyutlu bir kapsayıcının% 1'ini temsil eder. Daha fazla bilgi için kapsayıcı sorguları ve birimleri demosuna göz atın.

Bu yaklaşım genellikle akışkan tipografi olarak adlandırılır. Bunun nedeni, font-size değerindeki değişikliğin, medya veya kapsayıcı kesme noktalarında bir değerden diğerine atlamak yerine bir dizi görüntü alanı genişliğinde sabit olmasıdır. Ancak geçişin sorunsuzluğuna aldanmayın. Bu ayrım genellikle yalnızca pencere boyutunu sorunsuz bir şekilde ayarlarsanız test sırasında görünür. Bu etki, kullanıcılar tarafından nadiren (hiç görülmeyebilir) görülür. Kullanıcılar tarayıcının boyutunu veya yakınlaştırma düzeyini düzenli olarak değiştirebilir ancak kesme noktası ile görüntü alanı birimi arasındaki farkı fark etmek için bu ayarlamaları yavaş ve akıcı bir şekilde yapmaları gerekir. Bu yalnızca geçişi etkiler, yeniden boyutlandırmadan sonraki sonucu etkilemez.

Değişken yazı tipi boyutlandırmanın temel avantajı, kesme noktalarının manuel olarak hesaplanması veya belirtilmesi ihtiyacını ortadan kaldırarak herhangi bir boyutta enterpolasyonlu bir sonuç sağlamasıdır. Yalnızca başlangıç noktasını (16px) ve değişim oranını (0.25vw, görünüm alanındaki her 100px artış için font-size değerinde 0.25px artış sağlar) ve muhtemelen minimum ve maksimum değerleri ayarlarsınız. Görüntü alanı 1000px genişliğinde olduğunda font-size, 16px + 2.5px veya 18.5px olur ancak bu hesaplama tamamen tarayıcı tarafından yapılır. Bu, kapsayıcı tabanlı duyarlılığı göstermek için cqi birimlerinin kullanıldığı demoda kullanılan yaklaşımdır. Tanımlanmış bir kapsayıcının olmadığı durumlarda, kök (html) öğesinde kullanıldığında cqi birimleri yine görüntü alanı boyutunu ifade eder.

Belirli bir görüntü alanı boyutunda belirtilen font-size açısından düşünmeyi tercih ediyorsanız biraz daha net olan daha doğrudan medya sorgusu yaklaşımını kullanmayı düşünebilirsiniz. Görüntü alanı birimlerini amaçlanan kesme noktalarına göre hesaplamaya çalıştığınızda işler karmaşıklaşır. Birçok kişi bunu üçüncü taraf araçlarından değerleri kopyalayıp yapıştırarak yapar ancak sonuçta ortaya çıkan kodu anlamak veya doğrudan değiştirmek çok daha zordur. Genel olarak CSS'de en iyi seçenek, niyetlerinizi en net şekilde ifade eden seçenektir.

Uyarı: Görüntü alanı değişiklikleri her zaman aynı anlama gelmez.

Medya sorguları ve vi birimleri farklı şekillerde uygulanırken her iki yaklaşım da görüntü alanının aynı ölçümüne dayanır. Görüntü alanı 600px genişliğindeyse 100vw, 600px değerine eşit olur ve (width > 500px) medya sorgusundaki stiller uygulanır.

Peki görüntü alanının 600px geniş olması ne anlama geliyor? Gerçekte, piksel her durumda tek bir anlamı olan sabit bir boyuta sahip değildir. Daha az piksel içeren bir görünüm alanının daha küçük bir ekranda (ör. telefon) veya dar bir tarayıcı penceresinde olması doğal olsa da bu güvenilir bir varsayım değildir. Aslında, yakınlaştırma ve tarayıcı penceresini küçültme, ölçülen görüntü alanı genişliği üzerinde aynı etkiye sahiptir. Bir işlem (yakınlaştırma) pikselin boyutunu değiştirirken diğeri (yeniden boyutlandırma) tarayıcının boyutunu değiştirir. Ancak her ikisi de tarayıcının genişliği boyunca piksel sayısını değiştirir. Görünüm alanı ölçümünden elde ettiğimiz, mevcut piksel boyutu ile mevcut tarayıcı penceresi arasındaki ilişkidir.

Kullanıcı için yakınlaştırma ve yeniden boyutlandırma çok farklı amaçlara hizmet eder. Yakınlaştırma düzeyini değiştiren bir kullanıcı, sayfanın içeriğini büyütmeye veya küçültmeye çalışır. Tarayıcıyı yeniden boyutlandıran bir kullanıcı ise yalnızca farklı ekranlardaki alanı yönetir. Kullanıcı niyeti farklı olsa da CSS ölçümlerindeki sonuç aynıdır. Pencere küçüldükçe veya piksel büyüdükçe tarayıcının genişliğinde daha az piksel bulunur.

Bu kopukluk, duyarlı tipografiyi güvenilmez hale getirir. Metniniz yalnızca görüntü alanına veya kapsayıcıya göre yeniden boyutlandırılacak şekilde ayarlanmışsa kullanıcı yakınlaştırması etkili olmaz.

Görüntü alanına göre birimin değerini 1vw veya 100vw olarak değiştirmek, yazı tipi boyutu ile görüntü alanı arasındaki tam ilişkiyi değiştirir. 1vw yazı tipi, görüntü alanı boyutunun her 100px'si için 1px büyürken 100vw yazı tipi, görüntü alanıyla tam olarak aynı boyutta olur. Bu değeri değiştirerek yazı tipinin tarayıcıya göre daha yavaş veya daha hızlı büyümesini sağlayabilirsiniz. Ancak kullanıcı yakınlaştırma veya uzaklaştırma yaptığında görüntü alanına göre değerler sabit kalır ve kullanıcı kontrollerine yanıt vermez.

Benzer şekilde, kullanıcı varsayılan font-size'si için ne 1vw ne de 100vw hesapları kullanılır.

font-size için tek başına görünüm alanı veya kapsayıcıya göre birimler kullanmak her zaman kullanıcıya zarar verir. Bir font-size, kapsayıcısına tamamen duyarlı olduğunda kullanıcı varsayılanlarına veya ayarlarına da duyarlı olamaz. En iyi niyetlerle ve önlemlerle bile olsa son font-size kontrolü kullanıcılardan almak kaçınılmalıdır. Bu durum yalnızca kötü bir kullanıcı deneyimine yol açmakla kalmaz, aynı zamanda genellikle yasalarca zorunlu kılınan erişilebilirlik yönergelerini de ihlal edebilir. Özellikle Web İçeriği Erişilebilirlik Kuralları'nın 1.4.4 bölümünde "metnin, yardımcı teknoloji kullanılmadan %200'e kadar yeniden boyutlandırılabilmesi" gerektiği belirtilir.

font-size değerlerinin yakınlaştırmaya duyarlı olmasını sağlama

Görünüm alanına göre font-size değerinin yakınlaştırmaya duyarlı olmasını sağlamak için görünüm alanına göre değer, başka bir değere göre ayarlanarak uygulanmalıdır. Bu, CSS'de calc() işlevi veya hesaplamaları kabul eden diğer matematik işlevleri (ör. min(), max() ve clamp()) kullanılarak yapılabilir. font-size calc(16px + 1vw), hem görüntü alanı boyutuna hem de pikselin mevcut (yakınlaştırmaya göre) boyutuna bağlıdır. vw birimi yakınlaştırmadan etkilenmez ancak temel değer etkilenir.

Sonuç, hem görüntü alanı boyutuna hem de kullanıcının yakınlaştırma ayarlarına yanıt veren bir font-size olur. Kullanıcı 200% değerine yakınlaştırdığında temel değer iki kat büyük (32px) olarak oluşturulur ancak duyarlı değer değişmez. Bir 1000px görünüm alanı başlangıçta 16px + 10px = 26px font-size değeri verir ancak 200% yakınlaştırma düzeyinde yazı tipi boyutu yalnızca 42px değerine (160% değerinin biraz üzerinde) çıkar. Bu durum çok büyük bir sorun gibi görünmeyebilir ancak font-size öğeniz ne kadar çok görüntü alanına bağlı olursa yakınlaştırma o kadar az etkili olur.

Küçük ekranlarda font-size değeri temel olarak temel piksel değerinden gelir ve yakınlaştırmaya iyi yanıt verir. Ancak daha büyük ekranlarda, görünüm alanı boyutu oluşturulan yazı tipi boyutunun daha büyük bir bölümünü oluşturur ve bu da yakınlaştırmayı daha az etkili hale getirir. Bu durum, özellikle% 500 yakınlaştırmanın (çoğu tarayıcıda maksimum) WCAG 1.4.4'ün gerektirdiği% 200'lük yazı tipi boyutu artışını sağlayamadığı noktada tehlikeli hale gelir. Ancak bu noktadan önce bile yakınlaştırmanın etkisiz hale gelmesi sinir bozucu olabilir.

Grafiğin sol kenarında (0 görüntü alanı genişliği), 500% yakınlaştırma tam olarak etkilidir. Ancak tarayıcı boyutu arttıkça bu etkinlik hızla düşer ve (yakınlaştırılamayan) görünüm alanı birimleri font-size içinde daha büyük bir faktör haline gelir. Tarayıcı 2040px genişliğindeyken maksimum 500% yakınlaştırma, yazı tipi boyutunda yalnızca 200% artış sağlayabilir. Bu noktadan sonra 200% etkili yazı tipi yakınlaştırması mümkün değildir.

Bu hesaplamayı minimum ve maksimum değerlerle birlikte bir clamp() işlevine taşıyarak, yakınlaştırılabilir metin sağlayan sınırlar uygulayabilirsiniz. Maxwell Barvian'a göre:

Maksimum yazı tipi boyutu, minimum yazı tipi boyutunun 2,5 katından az veya bu değere eşitse metin, en azından tüm modern tarayıcılarda her zaman WCAG SC 1.4.4'ü karşılar.

@media ve @container sorguları, vw ve cqw birimleriyle aynı ölçümlere dayandığından, yazı tipi boyutunu değiştirmek için bir kesme noktası kullanırken de aynı mantık geçerlidir. Boyut artışı çok fazla olduğunda yakınlaştırma etkisiz hale gelir. Bu değerlerin nasıl etkileşim kurduğunu aşağıdaki görselleştirme ile deneyebilirsiniz:

font-size değerlerinin kullanıcı varsayılanlarına duyarlı olmasını sağlama

Ancak calc(16px + 1vw), kullanıcıların varsayılan yazı tipi ayarlarına hâlâ yanıt vermiyor. Bunu yapmak için px birimleri yerine em veya rem birimlerini kullanarak bir taban ya da minimum ve maksimum değerler belirleyebilirsiniz. Tüm bunları bir araya getirdiğinizde, bağlantılı demoyla eşleşen tanıdık bir sonuç elde edersiniz:

html {
  font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}

Unutmayın:

• Minimum ve maksimum değerler, kullanıcı tercihine göre belirlenen (ve yakınlaştırmaya duyarlı) em birimlerini kullanır.
• Yakınlaştırmanın çok fazla etkilenmemesi için ek vw değeri minimum düzeyde tutulur.
• Maksimum boyut (1.125em), minimum boyutun (1em) 2,5 katından çok daha küçüktür.Bu sayede her zaman 200% etkili font-size değeri elde edilebilir.

pow() ile tipografik ölçekler

Çoğu tasarımda birden fazla yazı tipi boyutu kullanılır. Tipografik ölçek, birden fazla yazı tipi boyutu arasındaki ilişkiyi açıklar. Bu, taban boyutu ve diğer boyutları hesaplamak için kullanılan bir dizi çarpma faktörü olarak ifade edilebilir. CSS, kullanıcının yazı tipi boyutu tercihini ifade eden medium anahtar kelimesine veya varsayılan olarak 16px'ye göre yerleşik bir tipografik ölçek sağlar. Tam anahtar kelime ölçeği:

• xx-small: 3/5 (0,6)
• x-small: 3/4 (0,75)
• small: 8/9 (0,89)
• medium: 1 (diğerlerinin çarpıldığı temel boyut)
• large: 6/5 (1.2)
• x-large: 3/2 (1,5)
• xx-large: 2/1 (2)
• xxx-large: 3/1 (3)

Bu ölçek, kök font-size yerine kullanıcı varsayılanına göre belirlendiğinden sitenizin kök font-size değerini değiştirdiğinizde iyi çalışmaz. Çoğu yazar, özel özelliklerle benzer bir tür ölçeği yeniden oluşturur. Bazen aynı tişört boyutu adlarını kullanır, bazen de matematiksel bir ölçekte yukarı ve aşağı doğru bir dizi adım tercih eder. Bu ölçekleri, çoğunlukla Batı müziği ölçeğinden alınan ortak oranlara göre oluşturmak için kullanabileceğiniz birçok üçüncü taraf aracı vardır:

html {
  /* musical ratios */
  --minor-second: calc(16/15);
  --major-second: calc(9/8);
  --minor-third: calc(6/5);
  --major-third: calc(5/4);
  --perfect-fourth: calc(4/3);
  --augmented-fourth: sqrt(2);
  --perfect-fifth: calc(3/2);
  --major-sixth: calc(5/3);

  /* the golden ratio*/
  --golden-ratio: calc((1 + sqrt(5)) / 2);
}

Ancak CSS'de kendi ölçeğinizi oluşturmak için harici araçlara ihtiyacınız yoktur. Yeni pow() işlevi, kendi temel boyutunuz olarak 1rem ile ölçeğinizi sizin için oluşturabilir.

html {
  /* choose a ratio */
  --scale: 1.2;

  /* generate the scale using pow() */
  --xx-small: calc(1rem * pow(var(--scale), -0.5));
  --x-small: calc(1rem * pow(var(--scale), -0.25));
  --small: calc(1rem * pow(var(--scale), -0.125));
  --medium: 1rem;
  --large: calc(1rem * pow(var(--scale), 1));
  --x-large: calc(1rem * pow(var(--scale), 2));
  --xx-large: calc(1rem * pow(var(--scale), 3));
  --xxx-large: calc(1rem * pow(var(--scale), 4));

  /* change the ratio for different viewport sizes */
  @media (width > 50em) {
    --scale: var(--perfect-fourth);
  }
}

Ölçeğin tutarlı kalması için tam adımlar kullanmanız gerekmez. Hatta, yaygın 12pt tipografi ölçeğinde her adım için yaklaşık 5 kesir kullanılır. Buradaki büyük boyutlar ölçekte tam adımlar kullanırken küçük boyutlar daha yavaş bir oranda ölçeklendirmek için kesirler kullanır.

CSS mixin'leri ve işlevleri, bu mantığı daha da yoğunlaştırmayı mümkün kılarken progress() gibi diğer yerleşik araçlar, bir değerden diğerine akıcı bir şekilde ayarlanan ölçekler oluşturmayı kolaylaştırır. Ancak bu özellikler bu demoda ele alınmamaktadır.

Sayfa içi kapsayıcıların boyutuna yanıt verme

vw veya vi yerine cqi birimini kullanarak tüm bu hesaplamaların kapsayıcı sorgularında çalışmasını sağlayabilirsiniz. Ancak, kullanıcının font-size değerini html öğesinde bırakmak da faydalıdır. Böylece her tür ayar kapsayıcısı, bu kullanıcı tercihine 1rem olarak geri dönebilir. Demoda, tüm tür ölçeğinin genel tür için kök html öğesi yerine body öğesine uygulandığını ve ardından type-set özelliğine sahip her öğe için kapsayıcı boyutuna göre sıfırlandığını göreceksiniz.

Bu, her zaman kapsayıcıya göre yazı tipi boyutlarıyla ilgili bir dengelemeyi ifade eder. Bağlamdaki her öğe için daha akıcı bir yazı tipi boyutu elde edersiniz ancak bu, sayfa genelinde tutarlılık pahasına olur. Hangisinin sizin için daha önemli olduğu, kullanım alanınızın özelliklerine bağlıdır. Ayrıca, akışkan tipografinin kendisinin bir ödünleşme olduğunu ve yakınlaştırma gibi kullanıcı kontrollerini daha az etkili hale getirdiğini unutmayın.

Duyarlı tipografi ve tipografik ölçekler tasarımcılar için harika araçlar olsa da gerekmiyorsa işleri daha karmaşık hale getirmenize gerek yoktur. Kullanıcı varsayılanı ve yerleşik tür ölçeği de harika bir seçenektir. Ancak duyarlı (veya akışkan) tipografi seçerseniz sonuçların farklı kullanıcı varsayılanları ve yakınlaştırma ayarlarıyla ilişkili olarak nasıl davrandığını test ettiğinizden emin olun. Keyfini çıkarın!