İçerik
- 01. Yazı tiplerinizin neler yapabileceğini öğrenin
- 02. Akıllıca alt küme
- 03. Rakamları bulun
- 04. Sahte stiller yapmayın
- 05. ... ama yaptığında iyi numara yap
- 06. Metni kopyalayıp yapıştırırken dikkatli olun
- 07. HTML varlıklarınızı öğrenin
- 08. Mutlak boyutları değil ilişkileri tanımlayın
- 09. Satır sonlarını kontrol altına alın
- 10. Dikkatli yerleştirme
Neredeyse tüm tarayıcılarda yerel olarak desteklenen web yazı tipleriyle ve HTML ve CSS'nin en son sürümlerinde giderek daha fazla tipografik özellik uygulanırken, giderek daha karmaşık hale gelen web tipografisinin parlak ve yeni bir çağı önümüzde. Bu, web tasarımcılarının klasik dizginin kurallarını (yeniden) tanımaları gerektiği anlamına gelir - ancak bu burada bitmez.
Baskı tipografisi statikken, web tipografisi akıcı bir ortamdır. Tasarımcılar, yalnızca belirli bir görünüme nasıl ulaşılacağını öğrenmekten daha fazlası, duyarlı tipografiyle uğraşmalı ve farklı tarayıcılar ve cihazlarda nihai sonucu tahmin edebilmelidir. Tipografiyle ilgili olarak özellikle web için uygulanan temel yapılması ve yapılmaması gereken bazı şeyler aşağıda verilmiştir.
01. Yazı tiplerinizin neler yapabileceğini öğrenin
Yapmanız gereken ilk şey, kullanacağınız yazı tiplerinin yeteneklerini kontrol etmektir. Tüm yazı tipleri eşit oluşturulur, ancak bazı yazı tipleri diğerlerinden daha eşittir. Unicode kodlama, fontların tam anlamıyla on binlerce glif tutabileceği anlamına gelir ve OpenType font formatı küçük büyük harfler, eski stil rakamlar, isteğe bağlı bitişik harfler ve bağlamsal alternatifler gibi çok sayıda özelliği destekler.
Yine de herhangi bir yazı tipi, onu oluşturan yazı tasarımcısı kadar iyidir. Tasarımcı gerekli karakterleri çizmeyi ihmal ederse veya ilgili özellikleri kodlayamazsa, tüm bu tipografik incelikler ne işe yarar? Profesyonel yazı tipleri oluşturmak çok fazla zaman ve çaba gerektirir ve bazı tasarımcılar sonuna kadar gitmeye hazır değildir.
Bu nedenle, bir yazı tipini web tasarımınıza dahil etmeden önce karakter setini ve özelliklerini kontrol etmek çok önemlidir. Yazı tipi bir araç kutusu gibidir; önemli bir alet eksikse, uzağa gidemezsiniz - bir tornavida, testere ve pense varsa, ancak çekiç yoksa, çok fazla çekiçleme yapılmayacaktır.
02. Akıllıca alt küme
Yazı tipi yedekleri, karakter bazında gerçekleşir. Belirtilen yazı tipinde karakter eksik olduğu anda, geri dönüş sistemi listedeki bir sonraki yazı tipinden karşılık gelen karakteri kullanır ve ardından orijinal yazı tipine geri döner.
Bu teknik, şaşırtıcı sonuçlarla alışılmadık bir şekilde kullanılabilir. Örneğin, bir yazı tipinin karakter setinde eski stil figürleri yoksa, bunlara sahip karşılık gelen bir yazı tipi bulun. Yalnızca istenen sayıları bırakarak onu alt küme haline getirin ve yedek listesinde ilk sıraya koyun. Metindeki tüm sayılar daha sonra o eski stil şekil alt kümesinde ve metnin geri kalanı normal yazı tipinde ayarlanacaktır. Bu, sayıları ayrı ayrı biçimlendirme zorunluluğunu ortadan kaldırır ve metin dosyanızı gereksiz HTML etiketlerinden uzak tutar.
03. Rakamları bulun
Profesyonel kalitede yazı tiplerinin çoğu, her biri belirli bir kullanıma sahip birkaç sayı kümesine sahiptir. Örneğin:
- Tablo şeklinde: Her karakter aynı miktarda alanı kaplar, bu nedenle dikey sütunlarda sıralanırlar
- Orantılı: Karakter genişlikleri tasarımlarına göre değişir
- Eski tarz: Rakamlar küçük harfli karakterleri x yüksekliği, yükselme ve alçalma ile taklit eder; karışık büyük / küçük harfli metinle mükemmel uyum
- Zar: Sayısal maddede veya tümü büyük harfli metinle birlikte kullanılmak anlamına gelir
04. Sahte stiller yapmayın
CSS, birçok şeyi taklit etmenizi sağlar. Yazı tipinizin kalın bir çeşidi yoksa b> etiketi, metni hafif bir yanal çeviriyle ikiye katlayarak yapay olarak cesaretlendirir. Uygulama i> italik stili olmayan bir yazı tipine etiketlemek, karakterleri dijital olarak eğimlendirir. Ortaya çıkan çarpık harfler her zaman kasvetli görünür. Genel olarak, tüm metin biçimlendirmenizi CSS dosyasında tanımlamak ve yerel karakter biçimlendirmesinden mümkün olduğunca kaçınmak istersiniz.
05. ... ama yaptığında iyi numara yap
Karakter setinde eksik olduklarında küçük harfleri taklit etmek, etrafındaki metne kıyasla her zaman çok ince görünmelerine neden olur. Yazı ailesinin yarı-kalın bir çeşidi varsa veya normal ve kalın ağırlık arasındaki fark orta derecede ise, metnin koyuluğunu ayarlamak için küçük büyük harfler için bu kalın ağırlığı kullanın. Küçük büyük harflere biraz fazladan karakter alanı vermeyi unutmayın.
06. Metni kopyalayıp yapıştırırken dikkatli olun
Aksanlı veya başka bir özel karakter olması gereken, okunaksız karakter dizilerine sahip web sayfalarında bazen kelimeleri bulabilirsiniz. Bu, metin UTF-8 dışında bir karakter kodlaması kullanılarak metin düzenleme yazılımından kopyalandığında meydana gelir. Karakter kodlama sistemleri, verilerin (genellikle sayılar veya metin) telekomünikasyon ağları veya veri depolama yoluyla iletimini kolaylaştırmak için belirli bir karakter kümesindeki tüm glifleri eşler.
HTML, UTF-8 ile çalıştığı için, başka herhangi bir kodlama sisteminden kopyalanarak yapıştırılan metni yanlış yorumlayarak, belirli karakterleri rastgele harf ve işaretlerin tuhaf kombinasyonlarına dönüştürür. Dahası, belirli içerik yönetim sistemleri yalnızca metni değil, aynı zamanda biçimlendirmeyi de kopyalayarak tahmin edilemeyen sonuçlara neden olur. Bundan kaçınmanın en iyi yolu, kopyalanan metni basit bir metin düzenleyicide salt metin biçimine dönüştürmek, ardından oradan kopyalayıp CMS'ye yapıştırmaktır.
07. HTML varlıklarınızı öğrenin
Klavyenize bakınca, ne kadar çok karakterin mevcut olduğunu fark edemeyebilirsiniz. Birçoğu HTML varlıkları tarafından tanımlanır, bu nedenle en yaygın olanları ezberlemek ve web için dizgi yaparken kullanışlı bir genel bakışa sahip olmak iyi bir fikirdir.
Küçük harfli x, çarpma işaretiyle aynı değildir, ticari marka işareti yalnızca büyük bir T ve M değildir ve kayan bir akut vurgu kesme işareti için işe yaramaz. Bununla ilgili daha fazla ayrıntı için, herkesin yaptığı tipografik hatalar hakkındaki makalemize bir göz atın.
08. Mutlak boyutları değil ilişkileri tanımlayın
Web'deki metnin büyük bir avantajı, kullanıcı tarafından yeniden boyutlandırılabilmesidir. Metin piksel cinsinden tanımlanmışsa, bir web sayfasının yeniden boyutlandırılması, farklı metin stillerinin göreli boyutlarında tutarsızlıklara neden olabilir ve örneğin gövde metni başlıklardan daha büyük olabilir. Tüm metin boyutlarının standart gövde metni boyutuyla ilişkili olarak ems cinsinden tanımlanması çok önemlidir. Bu, bir web sayfasındaki tüm metnin, farklı metin boyutları arasındaki ilişkilere saygı gösterilerek uygun şekilde yeniden boyutlandırılmasını sağlar.
09. Satır sonlarını kontrol altına alın
Tarayıcı penceresini yeniden boyutlandırmak, metin sütunlarının daralmasını veya genişlemesini sağlar ve son kullanıcılar da metin boyutlarını değiştirebilir. Bu, sizi satır sonları üzerinde hiçbir kontrolünüz olmadığına inandırabilir. Yine de, istenen nihai sonucun ötesine baktığınızda ve tam olarak neyi başarmak istediğinizi anladığınızda, yönlendirilebilecek belirli yönler vardır.
Satır sonları, bir p> veya div> etiket. Diğer tüm durumlarda, satır sonları çok nadiren yalnızca bir sonraki kelimenin bir sonraki satırın başında başlaması amacıyla eklenir, bu nedenle br> az miktarda etiketleyin. En yaygın neden, iki veya daha fazla kelimeyi bir arada tutmaktır.
10. Dikkatli yerleştirme
Bölünemez boşluk, HTML'de bulunan tek özel boşluk karakteri değildir. Em boşluğu yazı boyutu kadar geniştir ve mükemmel bir kare ayırıcı oluşturur. Boşluk, genişliğinin yarısı kadardır. Tablo malzemesinde çok kullanışlı olan şekil alanı, yazı tipindeki rakamlar kadar yer kaplarken, noktalama alanı nokta veya virgül kadar geniştir. Kısaltılmış adlarda nokta ve sonraki harf arasında ince boşluklar ve uzun tireleri komşu karakterlerden ayırmak için saç boşlukları kullanılabilir. Ve sonra em başına üç boşluk, em başına dört boşluk, em başına altı boşluk…
Okuma, harflerin kendilerinin siyahı olduğu kadar, harflerin içindeki ve arasındaki boşlukla da ilgilidir. Doğru hiyerarşi, harfler arasındaki boşluğun kelimeler arasındaki boşluktan ve kelimeler arasındaki boşluğun metin satırları arasındaki boşluktan daha küçük olmasıdır. Harfler arasına boşluk eklemekten kaçının çünkü bu, kelimelerin parçalanmasına neden olur ve okunaklılığı engeller. Mantıklı bir şekilde artan harf aralığı yalnızca çok küçük boyutlardaki metinler için garanti edilir. Aksine, ekran boyutlarındaki metinler genellikle daha sıkı izlemeden yararlanır, ancak burada da aşırıya kaçmayın.
Tam gerekçelendirme, metnin görünümü üzerinde olumsuz bir etkiye sahiptir. Kelimeleri satır uzunluğuna uyacak şekilde yaslama işlemi, kelimeler arasındaki aralığı arttırır ve bu kelime boşluklarının sonraki metin satırları arasında çılgınca farklılık göstermesine neden olur. Bu, metne düzensiz bir görünüm verir ve bazı satırlardaki kelimeler arasında göze hoş görünmeyen boşluklar oluşturur. Sola yaslanmış / düzensiz sağa, okuma kolaylığı için tercih edilen hizalamadır.
Karakter aralığı ve kelime aralığının yanı sıra, satır aralığı da okunaklılığı etkiler. Birbirine çok yakın olan metin satırları, deşifre edilmesi zor yoğun bir metin görüntüsü oluşturur. Aksine, satır aralığı çok cömertse, okuyucu bir satır kesilmesinden sonra doğru bir sonraki satırı bulmakta güçlük çeker.
