Tipografi nasıl duyarlı hâle getirilir

Duyarlı tipografi, çevresindeki alan değişirken başlığın okunur ve gerektiği kadar belirgin kalmasını sağlar. Akışkan tipografi boyutu bir aralıkta kesintisiz değiştirir; kırılma noktalarına dayalı tipografi seçili genişliklerde değiştirir. İki yaklaşım da sınırlara ve içeriğe uygun metin sütununa ihtiyaç duyar. Telefonda yazıyı küçültmek işin yalnızca bir parçasıdır. Başlık kapsayıcısına sığıp yine de sıkışık hissedilebilir, tuhaf yerden bölünebilir veya onu açıklayan paragrafı bastırabilir.

Şu kurgusal başlığı düşünün: “Karmaşık projeleri yönetmenin daha sakin bir yolu.” Geniş sayfada iki satırda dengeli görünebilir. Dar ekranda beş yoğun satıra dönüşüp “yolu” sözcüğünü altta yalnız bırakabilir. Yanıt otomatik olarak küçük yazı değildir. Sütun gereksiz dar, yazı tipi geniş oranlı olabilir veya masaüstündeki satır sonu yanlış şekli zorluyor olabilir.

GOV.UK yalnızca büyük başlıkları değil, küçük metni değiştirdi

“Mobilde her şeyi küçült” yaklaşımına yararlı karşı örnek GOV.UK’den gelir. Güncel yazı ölçeği, 19px gövde boyutunu küçük ekranlarda 19px tutarken çok büyük başlığı 48px’ten 32px’e değiştirir. Okuma görevleri farklı olduğu için roller farklı tepki verir.

Ekip, tipografi değişikliğini açıkladığı yazıda küçük metinlerin küçültülmesine ilişkin topluluk kaygılarını ve görme engelli kişiler üzerindeki etkisini aktarır. Aşağıdaki değerler için yararlı referans güncel uygulamadır; önceki makale motivasyonu açıklar.

Ürün sayfasında bu, sıkça birlikte ele alınan iki kararı ayırmayı önerir. Gösterişli başlık ekran daraldığında daha az görsel ağırlık isteyebilir. Talimatlar, uygunluk koşulları ve gövde paragrafları ise rahat okunmaya devam etmelidir. Her rolü aynı çarpanla ölçeklemek, başlık sorununu gövde metni sorunu yaratarak çözebilir.

Test edebileceğiniz akışkan tipografi CSS kuralı

Gösterişli başlık için örnek başlangıç kuralı şöyledir:

.page-title {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
}

Varsayılan 16px kök boyutunda bu, 390px görünüm alanında yaklaşık 32px, 768px’te yaklaşık 43px ve 1440px’te 63px üretir. Yararlı özelliği, metnin alt ve üst sınırının olmasıdır.

Hesapta kontrol etmeye değer iki geçiş vardır. 400px görünüm alanı genişliğinin altında 32px minimum devreye girer. Yaklaşık 1467px üzerinde 64px maksimum geçerlidir. Arada görünüm alanına eklenen her 100px, başlığa 3px ekler. Böylece kuralı anlamak kolaylaşır: başlık 900px civarında tuhaf bir satır kazanıyorsa farklı mobil boyut tahmin etmek yerine kullanılabilir sütun genişliğini bu büyüme hızıyla birlikte inceleyebilirsiniz.

Formülü aday olarak ele alın. Ara genişlikte başlık sütunundan hızlı büyüyerek ekran genişlerken bile ek satır yaratabilir. Eğriyi kabul etmeden önce en uzun gerçek başlığı gerçek görselin yanına koyun. Orta durum başarısızsa büyüme hızını azaltın veya sütun dağılımını değiştirin; her başlığa elle satır sonu eklemek bunun yerine bakım sorunu yaratır.

rem katkısı akışkan kuralın metin boyutlandırma kontrollerini otomatik geçmesini sağlamaz. Tarayıcı yakınlaştırması hem etkin görünüm alanını hem metin boyutunu değiştirir; görünüm alanı terimi artışı kısmen dengeleyebilir. Yakınlaştırma ve büyütülmüş varsayılan metin ayarlarıyla gerçek sonucu test edin. Gereklilik, stil dosyasında göreli birim bulunması değil okunabilir, erişilebilir içeriktir.

Yazı tipini değiştirmeden önce rahatsızlığı tarif edin

Başlık yanlış hissettirdiğinde gördüğünüzü tanımlayın. “Çok büyük”, “çok fazla satır”dan farklıdır. “Çok sıkışık”; harflerin değmesi, satırların yakınlığı veya bütün metin bloğunun görsele dayanması olabilir. Her teşhis başka ayara işaret eder.

Başlığı sesli okuyun, sonra satırların ifadeyi nasıl böldüğüne bakın. Küçük bağlayıcı sözcükten sonra biten satır doğal okuma ritmini kesebilir. Çok kısa son satır kazara oluşmuş görünebilir. İkisi de otomatik kullanılabilirlik kusuru değildir, ama temiz sayfanın neden bitmemiş hissettirdiğini açıklayabilir.

Ardından çevredeki görselleri bir an kapatın. Başlık onlarsız rahatlıyorsa sorun yalnız tipografi değil kompozisyon olabilir. Görsel kenarı metin sütununu olduğundan dar hissettirebilir. Yoğun çizim, boş arka planda açık olan aynı sözcüklerle yarışabilir.

Her başlık düzeyine rol verin

Sayfa başlığı, bölüm başlığı ve kart başlığı farklı işler yapar. Sayfa başlığı ana konuyu kurar. Bölüm başlıkları argümanda veya teklifte gezinmeye yardım eder. Kart başlıkları yinelenen öğeleri ayırır. Aynı yazı tipini kullanıyorlar diye hepsi aynı şiddette ölçeklenmemelidir.

Proje yönetimi örneğinde ana başlık ifadeli olabilir. “Kararları işle birlikte tutun” bölümü ilk dikkati kapmaya çalışmadan fark edilir kalmalıdır. “Proje geçmişi” kartı açıklamasının yanında rahat durmalıdır. Her düzey masaüstünde aşırı büyürse sayfa tanıtım afişleri koleksiyonu gibi hissedilebilir.

Kesin değerleri seçmeden ilişkileri tanımlayın. Önce hangi düzeyin görüleceğine, her birinin genellikle ne kadar metin taşıdığına ve görsel yanında bulunup bulunmadığına karar verin. Sonra her düzeyde en uzun gerçekçi örneği deneyin. Yalnızca en kısa başlıkla çalışan tipografi sistemi güvenilir sayfa kuralı değil gösterimdir.

Belirsiz ifadeyi boyutla telafi etmeyin. “İhtiyacınız olan her şey” güzel dizilebilir, ama bölümü tanıtamayabilir. Okur sayfanın içeriğini keşfetmek için her paragrafı incelemek zorundaysa daha güçlü başlıklar, daha iyi aralıklarla birlikte daha kesin dil de gerektirebilir.

Metin sütunu genişliğini hak etsin

Başlığın satır kırılımları ona ayrılan alana bağlıdır. Yazıyı küçültmeden kapsayıcıyı inceleyin. Yan dolgu, ızgara aralığı, boş sütun veya gereksiz büyük görsel sözcüklerden alan alıyor olabilir. Bu tercihler geniş boyutta uygun olup gereğinden uzun sürmüş olabilir.

Kurgusal başlıkta aynı tipografili iki dar düzeni karşılaştırın. Birinde büyük yan boşluklar metni ince sütuna sıkıştırır. Diğerinde boşluklar sayfanın kalanıyla tutarlı ama daha ölçülü hâle gelir. İkinci düzen, boyut veya ağırlık hiç değişmeden daha sakin başlık üretebilir.

Geniş ekranda tersi sorun görünür. Başlığı bütün sayfaya yaymak uzun yatay şeride dönüştürüp alttaki içerikle bağını zayıflatabilir. Maksimum genişlik editoryal şeklini koruyabilir. Bu genişliği karakter sayısını garantili satır uzunluğu sayarak değil, gerçek başlıklara bakarak seçin.

Harflerin eşit genişlikte olmadığını unutmayın. On iki dar harfin sığdığı sütuna on iki geniş harf sığmayabilir. Tipografik birimlere dayalı değerler yararlı başlangıçtır, ancak kanıt ekranda görünen sözcüklerdir. Bu özellikle marka adı veya teknik terimin bütün kalması gerektiğinde önemlidir.

Sonsuz büyüme kuralı değil, ölçek aralığı seçin

Az sayıda boyut değişimi veya akışkan ölçek kullanabilirsiniz. Alt ve üst sınırlar mantıklıysa iki yaklaşım da çalışabilir. Önemli soru, başlığın bilerek tasarladığınız görünümler arasında nasıl davrandığıdır.

web.dev tipografi dersi, akışkan boyutlandırmayı açıklar ve metin boyutunda yalnızca görünüm alanı birimleri kullanmaya karşı uyarır. Daha geniş mesajı burada yararlıdır: okuma, yazı tipi seçmekten fazlasına bağlıdır. Göreli metin boyutu bileşenini koruyun ve okur yakınlaştırmayı ya da metin tercihlerini değiştirdiğinde olanları deneyin.

Aralığın ortasını kontrol edin. Başlık minimum ve maksimumda iyi görünüp aralarında tuhaf üç satırlı blok oluşturabilir. Sütunu veya büyüme hızını ayarlamak, bir başka ani boyut değişikliği eklemekten etkili olabilir. Kuralı metin değiştiğinde birinin sürdürebileceği kadar anlaşılır tutun.

Sözcüklerin çevresindeki ve içindeki alanı iyileştirin

Satır yüksekliği: ifadeyi bir arada tutun

Satır aralığı, çok satırlı başlığı okunabilir tek birim hissettiren mesafedir. Çok azı, özellikle uzun büyük harfler ve aşağı uzanan harflerde komşu satırları görsel olarak çarpıştırabilir. Çok fazlası ise satırları ifadeyi ilgisiz etiketler gibi hissettirecek kadar ayırabilir.

Yalnızca stil panelindeki sayıları değil gerçek harf şekillerini karşılaştırın. Küçük harf yüksekliği büyük yazı tipi, başka tipte çalışan ayarda sıkışık hissedilebilir. Kalın ağırlıklar sayfada daha fazla koyu malzeme bulunduğu için boşlukları küçük gösterebilir. Aksanlı karakterler de özgün örneğe göre fazla dar satır kutusunu açığa çıkarabilir.

İncelemede büyük harf, küçük harf ve noktalama karışımlı başlık kullanın. “DAHA İYİ ÇALIŞIN”, gerçekte görünecek normal cümlenin kötü ikamesidir. Önemli şekillerin birkaçını gizler. Sayfa çok dil destekliyorsa başlık testi sonunda o yazı sistemlerini de içermelidir.

Başlığın altındaki alanı ayrı değerlendirin. Paragraf öncesi mesafeyi artırmak için satır aralığını artırmak başlığın içini değiştirir ve yanlış etki yaratabilir. Başlık-paragraf boşluğuna ayrı değer verin ve ikisinin bağlı hissedip hissetmediğini inceleyin.

Harf aralığı: sözcük şekillerini koruyun

Satırlarında yeterli alan olmasına rağmen başlık sıkışık hissediyorsa harf aralığına bakın. Güçlü negatif aralık, büyük statik kompozisyonda dramatik görünüp küçük gösterimde rahatsız edici olabilir. Aynı ayar daha hafif veya kalın ağırlıkta da farklı görünebilir.

Yazı tipinin normal aralığıyla başlayıp küçük ayarları karşılaştırın. Yuvarlak harf, çapraz çizgi ve tekrarlanan dikey birleşimlerine bakın. Yalnızca ilk sözcüğü değerlendirmeyin. “Sakin”i güzel açan değişiklik, ifadenin başka bölümünü gevşek gösterebilir.

Sözcükleri görsel olarak tutarlı tutun. Aşırı pozitif aralık tanımayı yavaşlatıp cümleyi yalıtılmış karakter dizisine dönüştürebilir. Toplam genişliği de artırarak kaldırmaya çalıştığınız satır kırılımını yaratabilir. Başlık zaten uzunsa aralık ve sütun genişliği birlikte değerlendirilmelidir.

Tamamı büyük harf ve normal cümle biçimli başlıkları aynı ele almayın. Büyük harfli küçük üst etiket biraz ek ayrımdan yararlanabilirken uzun normal başlık daha sakin ayar ister. Amaç metnin rolünü desteklemektir. Küçük etiketten kopyalanan stil ana başlık için nadiren iyi kural olur.

Satıra kayma: kırılgan satır sonlarından kaçının

Bilinçli satır sonu bir kompozisyonu iyileştirebilir, ama kırılgan da yapabilir. Proje yönetimi başlığını “yönetmenin” sonrasında bölerseniz son sözcükler geniş ekranda harika çalışabilir. Dar genişlikte ilk bölüm zaten satıra kayıp beklenmedik ek satır yaratabilir.

Elle satır sonu eklemeden genişliği ve ölçeği ayarlamayı deneyin. Elle kırılım tasarım için hâlâ önemliyse hangi koşullarda geçerli olduğunu belgeleyin ve dışında ne olduğunu kontrol edin. İngilizce için seçilen satır sonunun her çeviride kalması gerektiğini varsaymayın.

Tercih edilen şekli korumak için uzun ifadeyi bir arada tutmayın. Bütün satıra kaymayı engellemek metni kapsayıcı dışına zorlayabilir veya okunamaz küçük boyut gerektirebilir. Bölünmez öğeleri, kısa değer ve birimi gibi ayrılmanın gerçekten anlama zarar vereceği durumlarla sınırlayın ve ardından kalan alanı inceleyin.

Son satır fazla kısa görünüyorsa anlam kaybetmeden metnin düzenlenip düzenlenemeyeceğini düşünün. Gereksiz ifadeyi kaldırmak hem cümleyi hem düzenini iyileştirebilir. Ama tipografi ürün sınırlamasını, anlamlı koşulu veya okurun teklifi tanımak için gereken terimi sildirmemelidir.

Hiyerarşiyi desteklemek için renk ve ağırlık kullanın

Büyük başlık aynı anda bütün vurgu biçimlerine ihtiyaç duymaz. Kalın ağırlık, sıkı aralık, parlak degrade ve güçlü gölge tek metin bloğunda yarışabilir. Belirginliği hangi uygulamanın taşıdığına karar verin, diğerlerini ölçülü tutun.

Renkli çizimli sayfada düz koyu başlık en açık okuma sırasını yaratabilir. Tasarım hafif degrade istiyorsa açık kısmının arka plana karşı okunur kaldığını kontrol edin. Tam boyutta açık başlık, küçük ekranda veya parlak görsel yanında kontrast kaybedebilir.

İkincil bilgiyi çok soluk yapmadan önce boyut, ağırlık ve konum bileşimiyle ayırın. Daha sessiz altbaşlık yine kolay okunmalıdır. Aynısı açıklama ve etiketlerde geçerlidir: onları neredeyse görünmez yapmak yararlı hiyerarşi yaratmaz, bilgiyi kaldırır.

Sayfayı hem hızlı bakışta hem sürekli okumada karşılaştırın. İlk bakış ana konuyu kurmalıdır. Yakın okuma destekleyici ayrıntıyı zorlanmadan göstermelidir. Her başlık eşit bağırıyorsa bazı ağırlıkları veya boyutları azaltmak, başka vurgu rengi eklemekten fazla işe yarayabilir.

Gerçekte yüklenen yazı tipini test edin

Amaçlanan yazı tipi kullanılabilir olduğunda veya yüklenemediğinde tasarım değişebilir. Farklı harf genişlikleri satır sonlarını değiştirip komşu içeriği itebilir. Her ziyaretçinin anında aynı tipografiyi gördüğünü varsaymak yerine yedek durumunu incelemenin parçası sayın.

Geliştirme incelemesinde hangi yazı tipinin gerçekten gösterildiğini ve beklenen ağırlığın bulunup bulunmadığını sorun. Varlığın içermediği ağırlık isteği istenmeyen sonuç üretebilir. Başlık olağandışı kalın veya dar görünüyorsa aralık değişiklikleriyle telafi etmeden varlığı doğrulayın.

Metnin şekli değiştiğinde düzen sonuçlarını arayın. Paragraf aşağı sıçrıyor mu? Rozet başlıkla çakışıyor mu? Sabit yükseklikli giriş alanı son satırı kırpıyor mu? Bunlar yalnızca yazı tipinin “farklı göründüğünü” söylemekten yararlıdır; düzenin barındırması gereken koşulları tanımlar.

Yedek yazı tipi marka tipiyle görsel olarak aynı olmak zorunda değildir, ama kullanılabilir sayfayı korumalıdır. Başlık bölümü bozmadan farklı sayıda satır kaplayabilsin diye yeterli esneklik bırakın. Tam marka gösterimi önemliyse bile değişken yükleme koşullarının pratik gerçeğiyle birlikte var olmalıdır.

Kısa bir başlık incelemesi yapın

Üç başlık seçin: ana başlık, uzun bölüm başlığı ve olağan en uzun kart başlığı. Yalıtılmış örnek yerine çevre içeriğiyle inceleyin. Dar, orta ve geniş görünüme bakın; sonra ani değişiklikleri izleyerek aralarında boyut değiştirin.

Her görünümde ifadeyi bütünüyle okuyun. Satır kırılımlarının anlamı koruduğunu, iç aralığın rahat olduğunu ve başlığın paragraftan ayrı kaldığını kontrol edin. Sonra tarayıcı yakınlaştırmasını artırıp temel okuma görevini tekrarlayın. Belirli boyutlandırma tekniğinin iyi davranışı garantilediğini varsaymak yerine sonucu gözleyin.

Bakım testi için daha uzun alternatif başlık kullanın. Kurgusal sayfada başlığı “Dağıtık ekipler arasında projeleri yönetmenin daha sakin bir yolu” yapın. Bu metne taahhüt vermiyorsunuz. Bileşenin makul editoryal değişikliği özel onarım olmadan destekleyip desteklemediğini öğreniyorsunuz.

Kararı normal dille belgeleyin: “Başlık dar ekranlarda ek satır kullanabilir; cümleyi bütün tutun ve bölümün büyümesine izin verin.” Bu, her boyutta tek ekran görüntüsünün tam satır sayısını korumaktan kalıcıdır. Sonraki editöre tasarımın neye değer verdiğini ve nelerin değişebileceğini söyler.

OpenDesign’da düzeltmeyi somutlaştırın

OpenDesign’ın HTML önizlemesi ve masaüstü, tablet, mobil görünümleri aynı başlığı düzenler arasında karşılaştırmaya yardım edebilir. Odaklı düzeltmede başlığı ve gözlediğiniz rahatsızlığı tanımlayın. Sorun yalnızca aralık veya desteklenen stil özelliğiyse elle düzenleme yeterli olabilir; yapısal istek amaçlanan kısıtlarla sohbette anlatılabilir.

Örneğin ifadeyi ve yazı tipini korumayı, sıkışık harf aralığını gevşetmeyi ve dar görünümde başlığın ek satır kaplamasına izin vermeyi isteyin. Böylece düzeltme tipografiye odaklanır. Bütün giriş alanını daha premium yapma gibi belirsiz istek, asıl okuma sorununu çözmeden çizimi, renkleri ve metni değiştirebilir.

Değişiklikten sonra inceleme kümesindeki üç başlığa da dönün. Paylaşılan stil, baktığınız başlıktan fazlasını etkileyebilir. İlgili görünümleri karşılaştırın ve destekleyici metnin amaçlanan rolünü koruduğunu doğrulayın.