Başlıklar içeriği tanıtır.

Okuyucuların okumaya devam etmesini, tonu ayarlamayı veya bir başrolü bir arada tutmasını sağlamak için grafik temelli başlıklara birçok efekt ve püf noktası uygulayabiliriz.

Ancak bazen görsel ağırlık ve düzeni değiştirmek gibi en belirgin teknikler çok daha iyi çalışır.

Çakışan başlıklar küçük bir miktar büyük metin kullanır ve düz bir başlıktan daha fazlasını iletmek için büyük miktarda küçük bir metin kendi başına yapabilir. Sesler çelişkili mi? Sadece iyi noktaları görmezden gelirseniz.

Çakışan metinle nasıl unutulmaz başlıklar oluşturmayı öğrenmek için okumaya devam edin.

hizalamayan yazı tiplerinden grit örneği

Yukarıdaki garip şekiller “WDD” ve ““ isimleriyle ne yapmak zorundadır? ” {$lang_domain} “? Bunlar, yerleştirme veya ayrıntıya bakılmaksızın bir metnin üzerinde bir metin koymasından talihsiz eserler. İşte rahatsız edici görüntü:

kötü hizalama içeren örnek metin

Bir bakışta, yukarıdaki grafik bir blog isminin ve kısaltmasının basit bir sunumudur. Yazı, blog tarafından kullanılan resmi bir yazıdır; parlak turuncu doğrudan web sitesinin temasından geliyor; ve her iki metin satırı da neredeyse mükemmel bir şekilde ortalanır.

Blogun tarzına göre bile yazılmakta ve büyük harfle yazılmaktadır. Ancak, üst üste gelen tekniği uzun bir metnin üzerine kısa bir çizgi ekleyerek taklit etmek amatör bir girişimdir. (Bu örnekteki zayıflıklar abartılı olmamakla birlikte abartılıdır.)


kötü hizalama içeren örnek metin

Yukarıdaki gölgeleme, iki metin parçasının yarattığı yeni şekilleri ortaya çıkarmaktadır. İki çizginin her biri ile nasıl bir ilişkisi vardır ve okundukları sıra, nasıl oluşturulduklarına bağlıdır. Üst üste binen metni diğerinin üzerine koymaktan daha fazlası var.

Elbette üst üste binme, her zaman kısa bir başlık ve uzun alt başlık düzenlemenin en iyi yolu değildir.

Aşağıdaki örnekler, bir tasarım normalden daha yaratıcı bir şey istediğinde bazı olası tedavileri göstermektedir. h1 ve h2 elementler.

Büyük ve küçük başlıkları eşleştirmenin diğer üç yolu

Çakışan metin, HTML ile kolayca çoğaltılamayan bir zarafete sahiptir (henüz). İki metin satırı, genellikle her birinin ayrı ayrı toplamından daha fazladır.

Çakışan Metnin Temelleri

Çakışan metin, birbirine karşı iki satır türünü karşılaştırır. Büyük metin, genellikle daha fazla kelime içeren küçük metnin arkasına yaslanır. Zor bölümler, her iki hattın da eşit olarak okunabilir olmasını sağlayarak, her ikisinin de birbirine karşı değil, birlikte çalışmasını ve tüm paketi konu üzerinde tutmasını sağlıyor.

yerleştirme, bağıl ağırlık, ses ve etkileşim örnekleri

Farklı teknikler çakışan metnin etkisini değiştirir.

Çakışan metni etkileyen dört ana faktör şunlardır:

  • Yerleşim , küçük metnin büyük metne göre nasıl konumlandırıldığıyla ilgilidir. Bu, metnin nasıl okunacağını doğrudan etkiler. Küçük metin sol üst tarafa doğruysa, muhtemelen ilk önce okunur (büyük metinden önce). Küçük metin sağ alt tarafa doğruysa, muhtemelen ikinci olarak okunacaktır.
  • Göreceli ağırlık , bir metin metninin diğerine göre çizdiği dikkat miktarını ifade eder. Büyüklüğü göz önüne alındığında, büyük metin hakim olmaya meyillidir. Ancak, büyük metin arka plana soluksa, o zaman küçük metin atlar.
  • Ses (çoğunlukla yazı ve renk), tipografinin ruh halini belirleyen estetik seçimlerle ilgilidir.
  • Etkileşim en zor olanıdır. Metinlerin mektup formlarının birbirleriyle nasıl çalıştığı ile ilgilidir. Etkileşim, yerleştirme, yazı karakteri ve karakterlerin kendilerine bağlıdır. Amaç, görsel olarak karşıt metin satırlarını görsel olarak birbirine bağlamaktır.

Yerleşim Bir Bütün Olarak Satırların Nasıl Okunduğunu Etkiler

Ziyaretçilerin yazı okumasını istediğiniz sıra, yazı dizilerinin nasıl düzenleneceğini belirlemede en önemli faktördür. İngilizce, soldan sağa bir dildir, soldaki küçük metin sağdaki küçük metinden önemli ölçüde farklıdır.

sol üstte hizalanmış küçük metin

Sol üst köşedeki küçük metinle, yukarıdaki grafik şöyle okur: “Onları veba gibi önlemek. Klişeler. ”Yine de,“ klişeler ”o kadar büyük yazılıyor ki insanlar önce onu okuyabiliyorlar. Boyut ve yerleştirme arasındaki denge, iki çizgiyi eşit olarak atar.

sağ alt tarafa hizalanmış küçük metin

Yukarıdaki sürüm daha az belirsizdir. Küçük metni sağ alt köşeye yerleştirmek, büyük metne açık bir öncelik verir. Şimdi şöyle yazıyor: “Klişeler: Onları veba gibi kaçının”.

Yukarıdaki başlıklar birbiriyle değiştirilebilir, çünkü her satır az çok bağımsızdır. Çizgiler birbirine bağlı olduğunda, yerleştirme daha önemlidir. İşte fakir bir işe bir örnek:

sağ alt tarafa hizalanmış küçük metin

Sağ alttaki küçük metni koymak okuyucuyu asılı bırakır. “Veba: gibi klişelerden kaçının…”? Çoğu insan bunu anlamaya çalışsa da, tereddüt anı bir vasat ve iyi bir sunum arasındaki farktır.

sol üstte hizalanmış küçük metin

Yukarıdaki düzenleme en iyisidir çünkü küçük metin cümlenin ilk kısmıdır. Küçük metni sağa koymak istiyorsak, büyük metnin cümlenin ilk bölümünü oluşturması gerekecektir. Ama yine, bir aksama var.

sağ alt tarafa hizalanmış küçük metin

Metne bağlı olarak, büyük metnin ilk kelimesini kullanmak yeterli değildir, çünkü metnin satırları tek tek ve birlikte çalışmalıdır. Yukarıdaki metin ifadeyi yanlış ayırır. “Kaçınma” emrindeki fiil, bağımsızlığı garanti altına almak için kendi başına yeterli anlama sahip değildir. Ve “veba gibi klişeler”, her ikisinden de kaçınmaktan ziyade, fazla kullanılan cümleleri hastalıkla karşılaştırdığımıza benziyor. Tüm grafik değişikliklerin anlamı.

sağ alt tarafa hizalanmış küçük metin

Büyük metinleri sığacak şekilde küçültmek zorunda kalsak bile, büyük metin için iki kelimeyi (tam bir ifade) kullanarak her iki satır da daha iyi okunur.

Çakışan metinle, düz yazı ile doğru ifadeyi almak, renk ve yazı tipi seçimi kadar önemlidir.

Arka Plana Karşı Çalışmayarak Dengeyi Dengeleyin

Büyük metnin amacı baskın olmakla birlikte, küçük metinleri de kolayca boğabilir. Ama bu her zaman kötü değil. İyi bir denge, büyük metnin küçük metne hakim olmasını engellemekten ziyade, göreceli önemlerini göstermekle ilgilidir.

Büyük metnin büyüklüğü onu doğal olarak ifade eder. Küçük metnin sadece büyük metni desteklemesi gerekiyorsa bu harikadır. Örneğin:

büyük metin küçük metin engeller

“WWW” önce atlar. “Dijital çağa hoş geldiniz” fikri üç W'yi destekleyen fikir üzerinde duruluyor. Ama eğer küçük metin ana mesajı taşıyacaksa?

büyük metin, küçük metinle dengeye geri döndü

Yukarıda, ana metin “Dijital çağa hoş geldiniz” dır. Peki bu ne anlama geliyor? Ardından, “WWW”, bir ipucu verir.

büyük metnin nasıl geçebileceğini örnekler

Büyük metin arka plana ne kadar çok karışırsa, daha az önemi vardır. Büyük metin zorlukla göründüğünde, küçük metin ana öğe olur.

Etkileşim Ayrıntılar İçindir

Bir yazı biçiminin şekli, farklı görünümünün anahtarıdır. İki metin satırı çakıştığında, cepler, garip şekiller ve diğer ince dikkat dağıtıcıları oluştururlar.

problemli metin

Yukarıda, büyük turuncu ve küçük beyaz metin, sayaçlara gereksiz bir karışıklık katar (yani harflerin içindeki delikler). Yalnız, her ekstra bit okunabilirliği fazla engellemez. Ama bu sorunun bir parçası: çünkü metni okunaksız hale getirmek için yeterince kötü olmadıkları için, önemsiz oldukları için kolayca kovulabilirler.

Azami okunaklılık için, küçük metnin harflerini korumalıyız.

çözümlerle metin

Yukarıda gösterildiği gibi, hafif ayarlamalar girişimi temizledi:

  • Büyük “C” nin kelepçe benzeri terminalleri arasında yeniden konumlandırıldı, “metin” kelimesi artık daha net.
  • “Açıklayıcı” da “r” ve “n” nin dikey saplarının büyük “C” nin kenarlarını nasıl karşıladığına dikkat edin.
  • “Destekleyici” deki “p” ve “o” daki sayıcılar artık sadece siyahı içeriyor.
  • Küçük harfleri “destekleyici” olarak daha net hale getirmek için “A” harfini kestik.

Amaç, okuyucular fark etmese bile küçük harflerin şekillerini korumaktır.

Yazı karakteri fark yaratır

Her yazı tipi büyük ve küçük boyutlar için uygun değildir. Yeterince küçük bir boyutta, bir yazının ayrıntıları kaybolabilir. Büyük boyutta büyütülmüş detaylar bazen sıra dışı sorunlar yaratabilir.

Uygunsuz tiplerin problemlere neden olduğu örnekler

Yukarıdaki dört yazı tipi kombinasyonu farklı nedenlerle başarısız oluyor:

  1. Bu komut dosyası yazı karakteri, el yazısını taklit etmek için tasarlanmıştır. Düzensiz kenarları, çoğu küçük boyutta kaybolan yüzlerce vektör noktası içerir.
  2. Ancak, betiği çok büyük ve harfler daha az el yazısı ve daha çok taraklı Illustrator yolları gibi görünüyor.
  3. Zapfino'nun kaligrafik kenarları Texas Hero'nunkinden daha iyi, ama “b” nin muazzam ataleti, kompozisyonu dengeden atar.
  4. Lucida Blackletter, en azından küçük metnin çok dikkatli bir düzenlemesi olmadan, bir arka plan olarak pratik olmak için çok karmaşıktır. Ayrıca, eşsiz karakteri küçük bir boyutta kaybolur. Bu serseriler ve serifler mi yoksa sadece bulanık mı?

Büyük Metin için Çok Kalın veya Çok İnce Sadece Doğru

Çakışan metin, büyük yazı tipini hem metin hem de arka plan olarak düşünün. Harfler ne kadar karmaşıksa, o kadar dokuya dönüşürler. Yani, küçük metindeki mektup formlarını gizleme olasılıkları daha yüksektir.

Sorunlardan kaçınmak için şişman veya zayıf olun. Ekstra kalın ve ekstra hafif şekiller, aynı yüzün normal ağırlığından daha iyi çalışır. Her ikisi de daha az karışır çünkü küçük metin bir kenara daha az vurma şansına sahiptir.

kalın ve ince büyük metnin en iyi nasıl çalıştığını gösteren örnekler

Örneğin, yukarıdaki Açık ve Siyah varyasyonlardaki büyük metin daha az küçük harfe çarptı. Tabii ki, her yüz - ve her kelime dizisi - farklıdır. Ancak genel olarak, orta ağırlıklar, ince ve kalın ağırlıklardan daha fazla soruna neden olur.

Pratik Örnekler

Bu daha muhtemel metinlerle nasıl çalışır? İşte çakışan metnin birkaç örneği.

zararsız nane yeşili setindeki genel blog başlığı

Neden çalışıyor: Arka plana doğru soluklaşan büyük metin, küçük metne açık bir öncelik veriyor. Museo'nun geometrik şekilleri çok az dikkat dağıtıcıdır.

Potansiyel problemler: Eğer bu küçük metin daha kısa olursa, bu çakışma pek işe yaramaz. Mesajı taşımak için, küçük metnin büyük metnin altı harfinin üst üste gelmesi gerekir.


tetsuo / kaneda, Akira filminin son yarısından iletişim

Neden çalışıyor: Küçük metin yalnızca üç kalın ve iki ince renk vuruşundan geçer. Sıcak renk paleti için bile bol bol kontrast.

Potansiyel problemler: Büyük metnin enerjik kenarları küçük metnin zarif çizgilerine karşı çalışıyor gibi görünüyor.


Steampunk, yüksek teknoloji Victoria buhar gücü

Neden çalışıyor: Her iki metin satırı keskin geometrik şekillere sahip ve hassas bir şekilde hizalanmış.

Potansiyel problemler: Küçük metin biraz kayıp mı görünüyor? Yazı tipleri gerçekten “ruhu yansıtır mı?” steampunk ?”


Trajan, dramatik film afişlerinde çok güzel ve çok kullanıldı

Neden çalışıyor: Her iki metinde de büyük harflerle ve temiz satırlarda cömert izleme, her karakteri netleştirir.

Potansiyel problemler: Arkaplan dokusu okumayı çok zorlaştırıyor mu?


örnek 5

Neden işe yarıyor: Kalın büyük metin kendi başına okunabilir, küçük bir metin ise okumaya davet ediyor. Birkaç ilave dolgu, “S” harflerinin renk derinliğini korur.

Potansiyel problemler: SxSW, genellikle bir bitmap yazı tipinde oluşturulur; bunlar marka dışı. Ayrıca, küçük metinlerde betikleri dikkatlice kullanın.

Ama yardımcı olur mu?

Bu dersleri orijinal kompozisyonumuza uygulayalım.

kötü hizalama içeren örnek metin
örnek 6

Neden çalışır:

  • Büyük metin koyu arka plana karışır, ancak boyutu görülebilir olmasını sağlar.
  • Parlak renk, küçük metni öne çıkarır. Doğru hizalama onu dengeler.
  • Küçük harflerin dikkatli bir şekilde yerleştirilmesi ve büyük harflerin sadeliği çatışmayı en aza indirir.
  • İki yazı tipi ortak öğeleri paylaşır. Örneğin, iki “W” farklı yüzlerde olmasına rağmen hizalanır.


Ben Gremillion tarafından Webdesigner Deposu için özel olarak yazılmıştır . Ben, iletişim sorunlarını daha iyi tasarımla çözen bir web tasarımcısı.

Son örneğin potansiyel problemlerinden bazıları nelerdir? Lütfen düşüncelerinizi aşağıdaki yorumlarda paylaşın.