• Ana / Nasıl

Duyarlı web tipografisinin kuralları

Duyarlı web tipografisi zordur - hem tasarım aşamalarına hem de teknik bilgiye sahip olmanız gerekir. Ancak her ne kadar karmaşık olursa olsun, yanlış yapmak bir seçenek değildir çünkü tipografi web tasarımının temel taşıdır.

Hem tasarımı hem de kodu nasıl doğru bir şekilde elde edersiniz? Geliştiricileriniz, piksel zorlayan tasarımcılarla nasıl iletişim kuruyor? Tasarımcılarınız ilgisiz geliştiricilerin tipografiye önem vermesini nasıl sağlayabilir? En hızlı ve basit yol, tasarımcılarınızın ve geliştiricilerinizin aynı dili konuşmasını sağlamak, zanaatları için birbirlerine saygı duymak ve web tipografisinin hem ilkelerini hem de sınırlamalarını anlamaya çalışmaktır.

Bu makale, hem tasarımcılara hem de geliştiricilere tipografi konusunda iletişime başlamak için bir temel sağlamayı amaçlamaktadır. Gerekli tasarım ilkelerini ele alacağız ve aşağıdakiler için pratik çözümleri keşfedeceğiz: duyarlı tipografi .

İyi tipografi nedir?

'İyi' her zaman özneldir; iletişimi dayandırabileceğimiz sabit bir çapa değil. Tasarımcıların ve geliştiricilerin etkili bir şekilde iletişim kurması için, her iki tarafın da anlayabileceği ortak bir payda hakkında konuşarak başlamalıyız. Bu payda tipografinin amacıdır.

Tipografi, metnin görünüşüdür; metni süslüyoruz. Giyinmenin amacı, kullanıcıyı bir sohbeti çekecek kadar çekici kılmak, ancak karşı tarafın konuşmadan dikkatini dağıtacak kadar dikkat çekmemektir.

Benzer şekilde, tipografinin amacı, okuyucuların metnin içeriğine odaklanmasını ve içine girmesini sağlamaktır. İyi tipografi, tanımı gereği, metnin iletişim amacını yerine getirmesine yardımcı olan tipografidir.

Okuyucuların metne odaklanıp kendilerini kaptırmaları için iki şeyin olması gerekir. İlk olarak, tipografi uygun (varsa) duyguyu iletmelidir. İkincisi, metnin okunması kolay olmalıdır. Bu bizi, doğru yapmanız gereken dört temel özelliğe getiriyor.

• Font ailesi
• Yazı Boyutu
• Satır yüksekliği (satır aralığı da denir)
• Metin genişliği (metin ölçüsü olarak da adlandırılır)

Doğru yazı tipi ailesini edinmek, metnin altında yatan duyguların öne çıkmasına yardımcı olur. Diğer üç özelliği doğru almak, metninizin okunmasının kolay olmasını sağlar. Çoğunlukla, tasarımcılar doğru yazı tipi ailesini bulmakta mükemmeldir. Bu nedenle, bu makalenin geri kalanında diğer üç faktöre odaklanacağız.

Okunabilir metin sanatı

Herhangi bir projedeki ilk adım, yazı Boyutu , satır yüksekliği ve Genişlik vücut metninizin. Bu işleme dizgi adı verilir. Kullanıcının ihtiyaç duyduğu bilgileri içeren bir sayfa dizisiyle başlayın. Mümkün olduğunca, bu sayfa h1, h2, h3, gövde metni ve başlıklar gibi, tasarımınız için neyin işe yarayacağına dair bilinçli bir seçim yapmanız gereken birden çok öğe içermelidir. Sayfanız ne kadar çok öğe içeriyorsa, pano genelinde işe yarayan bir tür şeması oluşturma şansınız o kadar artar.

Seçtiğinizde yazı Boyutu , satır yüksekliği ve gövde metninizi ölçün, gerçek içerik kullandığınızdan emin olun. Gerçek içeriğiniz yoksa Lorem Ipsum yerine Wikipedia'dan metin kullanın.

Kendinizi dizgi yaptığınız duruma sokmanız da gerekir, çünkü okuyucunun gözleri ile ekran arasındaki mesafe farklı cihazlar için farklıdır. Bir mobil cihaz için dizgi yapıyorsanız, çıktınıza bir telefon aracılığıyla bakın. Bir dizüstü bilgisayar için dizgi yapıyorsanız, dizüstü bilgisayarınızla masanıza oturun vb.

Kendinizi doğru ortama yerleştirdikten sonra, ilk önce seçim yaparak dizgi işleminize başlayın. yazı Boyutu , ardından ölçü ve son olarak satır yüksekliği . Mükemmel bir kombinasyon olmadığını unutmayın - iyi tipografiye sahip olduğunu düşündüğünüz diğer sayfalara bakın ve hiçbirinin aynı şeyi kullanmadığını göreceksiniz. yazı Boyutu , satır yüksekliği ve ölçün. Yani, amaçladığınız şey basitçe okunması kolay bir metindir.

Doğru boyutları belirlemeyi yazılı olarak açıklamak daha zordur, bu nedenle size yardımcı olacak bazı videolar hazırladım. yazı Boyutu , ölçü ve lider .

İyi bir yazı tipi boyutuna sahip olduğunuzdan, yönlendirdiğinizden ve ölçtüğünüzden emin olmanıza yardımcı olacak bazı hızlı yönergeler.

Yazı tipiniz şu durumlarda çok küçüktür:

• Metni okumak için konsantre olmalısın
• Gözlerini kısmalısın
• Yakınlaştırma dürtüsüne sahipsin

Yazı tipiniz şu durumlarda çok büyük:

• İçeriği okumak yerine harf biçimlerini fark etmeye başlıyorsunuz
• Bir seferde yalnızca bir ila üç kelime okuyabilirsiniz
• Uzaklaşma dürtüsüne sahipsin

Metin ölçünüz şu durumlarda çok uzun:

• Metni okumak için başını çevirmelisin
• Ortasında konsantrasyonunuzu kaybedersiniz

Metin ölçünüz şu durumlarda çok kısadır:

• Metin bir sonraki satıra geçtiğinde rahatsız hissediyorsunuz
• Gözleriniz hızla sağa ve sola sıçramaktan yorulur

Başlangıcınız şu durumlarda çok dardır:

• Metin yoğun ve bunaltıcı geliyor
• Yanlışlıkla yanlış metin satırını okudunuz

Lideriniz şu durumlarda çok büyük:

• Kelime satırları arasındaki beyaz boşluk dikkatinizi dağıtıyor

Her zaman iyi tipografinin tanımını hatırlayın: mükemmelliğin peşinde değilsiniz, sadece okunması kolay metinler arıyor olabilirsiniz. Bunu yaparken, haklı olduğundan emin olmak için dizgi seçimlerinizi izleyicilerinizle test etmek isteyeceksiniz (arkadaşlar ve iş arkadaşları da harika testçilerdir). Yalnızca gövde metnini yazmayı bitirdiğinizde diğer öğelerin boyutlarını ayarlamaya geçin.

Diğer öğeleri dizgi oluşturma

Birçok tasarımcı ve geliştirici, yazı Boyutu h1 ve h2 gibi öğeler için görsel olarak ve basitçe bu sihirli sayıların tasarımlarında iyi çalıştığını umuyoruz. Ancak sayıları havadan çekmeye gerek yok; Tipograflar, buna yardımcı olmak için yüzyıllardır tipografi ölçekleri kullandılar. Yaptığınız şey, tipografi ölçeğinden öğenizin boyutu olarak bir sayı seçmektir. Ne yazık ki, bu ölçekler doğrudan web için kullanılamaz çünkü baskı tasarımı için oluşturulmuşlardır.

Tipografi alanında uzman olan Tim Brown, modüler ölçek adı verilen bir çözüm buldu. Karar verdiğiniz gövde metniyle modüler ölçeği oluşturmanız dışında, tıpkı bir tipografi ölçeği gibi çalışır.

Modüler ölçeği oluşturmak için gövde metnini alırsınız yazı Boyutu (temel yazı tipi boyutu olarak da adlandırılır) ve bir ölçek elde edene kadar bunu birçok kez bir oranla çarpın. Genellikle, kullandığınız oran müzikten elde edilir (çünkü müziğin uyum içinde kökleri vardır). Yukarıda, bir yardımcının yardımıyla oluşturulmuş bir ölçek örneğidir. modüler ölçek hesaplayıcı .

Modüler ölçeği oluşturmayı bitirdiğinizde, geri kalan öğelerinizi dizgiye, ölçekten bir sayı seçerek devam edebilirsiniz. yazı Boyutu . Ardından, okunabilir öğeler arasında iyi bir denge elde edene kadar öncüyü ayarlayın ve aynı işlemle ölçün.

Dikey ritim

Bir sonraki adım, dikey ritim adı verilen bir teknik kullanarak tek tek unsurları bir araya getirmeye yardımcı olmaktır. Bir öğenin uyumlu bir şekilde diğerine akması için, onları birleştiren şeyi değiştirmemiz gerekir: beyaz boşluk. Bu beyaz boşluk, bir öğeyi diğerinden belirgin bir şekilde ayıracak kadar büyük olmalı, ancak akışın bozulmamasını sağlayacak kadar küçük olmalıdır.

Ne kadar beyaz alan kullanmalısınız? Birçok tasarımcı, etrafında tasarlaması kolay olan 10px gibi bir figür seçer. Öte yandan birçok geliştirici, başka bir grid sisteminden veya çevrimiçi okuduğu bir makaleden rastgele bir sayı (6px gibi) çıkarma eğilimindedir. Bu ikisinin iletişim kuramamasına şaşmamalı.

Tahmin edebileceğiniz gibi, beyaz boşluk için sihirli bir sayıya güvenmenize gerek yok; birden fazla kullanabiliriz satır yüksekliği vücut metnimizin değeri. Bunun nedeni, içgüdüsel olarak metin içindeki beyaz boşluk kalıplarını tanımamızdır. Kalıp ne kadar güçlüyse, kendimizi o kadar güvende hissederiz ve zihnimizin içeriğe girmesine izin vermek o kadar kolay olur.

Dikey ritmi kullanmak için tek yapmanız gereken:

1. Öğeler arasındaki beyaz boşluğu tabanın bir katına ayarlayın satır yüksekliği
2. Yı kur satır yüksekliği diğer tüm unsurlardan tabanın bir katına satır yüksekliği

Söz konusu kat sayısının tam sayı olması gerekmez. Tabanın 0,5x ve 1,25x gibi değerleri kullanabilirsiniz satır yüksekliği size daha fazla esneklik sağlamak için. Bu değerler işe yarar çünkü dikey ritim tekrarlama ilkesini kullanır.

Temel ızgara veya hayır?

Dikey ritimden bahsettiğimizde, temel ızgara kavramı kaçınılmaz olarak devreye girer. Temel ızgara potansiyel olarak yardımcı olabilse de, çoğunlukla bir tren kazasıdır çünkü yeni başlayanlar, metnin taban çizgileri arasında (veya üzerinde) oturmasına o kadar çok enerji odaklanır ki, dikey ritmi doğru bir şekilde elde etmenin imkansız olduğunu düşünürler.

Dürüst olmak gerekirse, tipografideki matematik her zaman alt pikseller (24,8 piksel gibi) içerdiğinden ve tüm tarayıcılar alt pikselleri farklı şekilde ele aldığından, web üzerinde hiçbir zaman temel ızgaraların mükemmel şekilde çalışmasını sağlayamazsınız. Örneğin, bazı tarayıcılar sayfadaki her öğenin 1 piksel kapalı olmasına neden olur. Bu 1 piksellik hatalar birikir ve sayfanın aşağısına yerleştirilen öğeleri ızgaranın daha da uzağına iter. Sonuç olarak, bir temel ızgara kullanmamanızı öneririm.

Devam ederken, duyarlı uygulamalar ve birden çok ekran için tasarım alanına girelim.

Birden çok ekran için tipografi

Birden çok ekran için tipografi tasarlamak hiç de zor değil. Tasarım açısından yapmamız gereken üç şey var.

İlk olarak, bir kullanıcının gözleri ile ekranı arasındaki mesafe, ne tür bir cihaz kullandıklarına bağlıdır. Genel olarak, kullanıcı daha büyük bir ekran kullanırken cihazı daha uzağa yerleştirecektir. Bu fenomen, aygıt genişliği arttıkça yazı tipi boyutlarınızı artırmanız gerektiği anlamına gelir.

İkinci olarak, gövde metni ile diğer öğeler arasındaki oranları tutarlı tutmak istiyoruz. Bu, gövde metni boyutunu artırırken tüm öğelerin boyutlarını artırmamız gerektiği anlamına gelir.

Üçüncüsü, belirli kesme noktalarında yazı Boyutu modüler ölçekten farklı bir sayı seçerek belirli öğelerin (h1 gibi) Bunu yapmak, görsel hiyerarşiyi kontrol etmemize olanak tanır ve öğelerin bir kullanıcıyı okumaya çekecek kadar dikkat çekmesini sağlar.

Duyarlı tipografi için kodlama

Metin boyutlarımızı orantılı olarak artırmamız gerektiğini biliyoruz. Bunu yapmanın en kolay yolu, yazı Boyutu içinde html seçici. Ayrıca, bir kullanıcının yazı Boyutu tercih.

html {font-size: 100%;} @media (min-width: 40em) { html {font-size: 112.5%;} }

Ayrıca diğer öğeler için göreli bir birim kullanmak istiyoruz, bu nedenle bunlar HTML'ye göre ölçeklenir yazı Boyutu ( h2 aşağıdaki örnekte). Değiştirmeniz gerekirse yazı Boyutu modüler ölçekte farklı bir sayıya yükseltirseniz, tek yapmanız gereken yazı Boyutu buna göre ( h1 altında).

h1 {font-size: 2.369em;} @media (min-width: 40em) { html {font-size: 3.147em;} } h2 {font-size: 1.777em;}

Süreç basit görünse de, yeni geliştiriciler, içerdiği matematik nedeniyle bir sürü baş ağrısıyla karşılaşabilir, bu yüzden yardımcı olmak için işlevleri ve karışımları kullanmanızı tavsiye ederim. Sık sık kullanırım Hanım() -den modüler ölçek kitaplığı . Bununla yazabilirsin ms (4) onun yerine 3.157em ve ms (3) onun yerine 2.369em .

Dikey ritim hesaplama yükünü hafifletebilecek bir fonksiyon örneği:

@function vr($rhythm) {@return $rhythm / 16 * 1rem;}

Bu fr fonksiyon yazmanıza izin verir Fr (3) kendiniz hesaplamak yerine üç temel çizginin katları için. Size (ve kendime) daha da fazla yardımcı olmak için, adında duyarlı bir tipografi kitaplığı oluşturdum. Diğer çeşitler .

Bağıl birimler

İlgili birimler hakkındaki tüm tartışmalar, kullanıp kullanmamanız gerektiği sorusuyla biter. iş veya içinde birimleri. İnanıyorum ki iş ve içinde benzersiz kullanım durumlarına sahiptir ve bunları farklı durumlarda kullanmalısınız. Hangi birimi kullanacağınızı seçmenize yardımcı olabilecek iki kural şunlardır:

1. Kullanım içinde mülkün ölçeklenmesi gerekiyorsa yazı Boyutu
2. Değilse, kullanın iş

Bu birimler arasında seçim yapma konusunda daha fazla bilgi için, bu makaleye bakın .

Özetle

Bu makalede, duyarlı web tipografisinin temellerini öğrendiniz. Elbette, hem teoride hem de uygulamada daha derine daldıkça daha fazla ayrıntı bulacaksınız, ancak burada sahip olduğunuz şey, gerçek bir projede ihtiyacınız olanın yüzde 80'ini kapsıyor. Bu bilgiyle donatılmış olarak, duyarlı web için iyi tipografinin nasıl tasarlanacağı ve kodlanacağı konusunda hem tasarımcılarla hem de geliştiricilerle sohbet etmeye hazırsınız.

Duyarlı tipografi inanılmaz derecede zor değil. Bu sadece zorlayıcı çünkü ilgili ilkeleri ortaya çıkarmak ve bunları web'e uygun bir şekilde uygulamak için büyük miktarda sabır ve gayret göstermeniz gerekiyor.

Bu makale ilk olarak net dergi . Abone olun .

İlgili Makaleler:

• Erişilebilir web tipografisinde ustalaşın
• Em tabanlı boyutlandırma ile duyarlı bir site tasarlayın
• Kullanıcı dostu web formları oluşturmak için 10 kural