Web Tasarımında Güzel Tipografi. Web Tasarımında Güzel Tipografi Güzel Tipografi

Tipet Yazı Tiplerinde Kaynak Küratörü Jeremy Schoaf, ilginç yazı tipi çözümleri olan sitelerin örneklerini seçti ve avantajlarını ve dezavantajlarını açıkladı.

İnce bir kağıt dokusu ile birlikte, bu tipografi kitabı okuduğunuz bir duygu yaratır.

Basitçe sakız.

Web fontları sayesinde, ürün ambalajının tipografisini üreticinin tipografi bölgesine sığdırmanıza yardımcı olur. Bu daha sık olur. Site basitçe sakız, Sabit ve çevrimiçi ve çevrimdışı kanallarda koruyan markasını çizerken Gotham'ı seçti.

Bu site, birinin sadece birinin gerekli olan tek birinin ne kadar gerekli olduğuna dair iyi bir örnektir. Gotham'ın farklı doygunluğunu kullanarak ve başlıkları büyük harfle ayarlamak için, sadece sakız her şeyin bir yoğunluğuyla net bir hiyerarşiyi takılıdır.

Başlık ve altbilgideki logolar PNG formatında durur, bu yüzden web fontunun netliğini ve ölçeklenmesini kaybederler. Bir logo için bir web fontunun kullanımı, özellikle kıvrılma üzerinde iyi bir kontrole ihtiyacınız varsa, her zaman mümkün değildir; Bununla birlikte, SVG'deki görüntü bu durumda PNG'den daha iyi uyacak, çünkü ölçeklendirebilir ve aynı zamanda netliğini koruyabilir.

Özet

Neyse ki, tipografide belirli çözümler tasarımı etkileyebileceğinden, örnekler yukarıda gösterilmiştir. Burada bazı önemli düşünceleriniz var:

Birkaç vuruş kullanacaksanız, belirli bir tipografide sabit bir sistem geliştirin ve buna bağlı kalın.
Ana metin için, normal bir italik, yağlı yazıt ve cesur tarzı bir fitness ile bir yazı tipi seçin.
Popüler bir tasarım seçecekseniz, tasarımı ayırt etmek için daha az getirilmiş bir şekilde birleştirmeye çalışın.
Ekip üyeleriniz arasında fontların sıralı kullanımını garanti etmek için projenin başında bir stil rehberi yapın.
Kontrast kullanın ve tasarıma benzer değildir.
Ana metin için ekran yazı tiplerini kullanmayın. Tasarımı hedefte kullanın.
Çizimin sadece bir yedisini kullanmaktan korkmayın. Hiyerarşiyi farklı doygunluk ve bir ailenin tarzı yardımıyla ayarlayabilirsiniz.
Logonuz, tanım ve ölçeklenebilirlik sağlamak için SVG'de yapmanızı sağlar.

Mükemmel bir web sitesi güzel bir tipografi ile başlar. Ve bazı kurallar kırılabilse de, bazen, iyi bir tipografi olanın temel ilkelerine ve nasıl oluşturulacağının temel ilkelerine geri dönecektir.

Bu hatırlatma, projelerinize taze bir bakışta size yardımcı olacak, yeni yaklaşımlar hakkında düşünmeniz veya daha basit bir tasarıma geri dönecektir.

Bu nedenle, bugün, moda trendlerini görmezden geliyoruz, tipografi teorisine odaklanıyoruz ve "kuralların" güzel metinler yaratmada bize nasıl yardımcı olabileceği konusunda.

Boyut ve hiyerarşi

Boyut önemlidir. Sarfsiz bir tipografi oluşturmak için, belirleyici bir faktör olabilir. Küçük metnin göz önünde bulundurulması zordur, okunacak bir şey değil, çok büyük, hattın yüksekliğini aşacak ve karışıklığa yol açacaktır.

Okunabilir bir tipografi birkaç hiyerarşi katmanı vardır. Bu katmanlar, ilk olarak, ikincisinde, ikinci ve üçüncü sırada okunması gereken kullanıcıyı önermektedir. Ayrıca, metnin boyutlarında bariz bir hiyerarşi vardır - başlıkların bir büyüklüğü, diğeri, ana metinde ve altyazılardaki üçüncü.

İzleme ve Kering

İzleme ve Kerning sık sık karıştı. Kerning, formlarına bağlı olarak harfler arasındaki aralıkta seçici bir değişikliktir. İzleme, harf kümeleri, yani, paragraflar veya tüm metin bloğu arasındaki aralıktaki bir değişikliktir.

Kerning genellikle bir netlik, okunabilirliğin iyileştirilmesi ve hatta metnin çok büyük alıntılarını oluşturmak için belirli unsurlara uygulanır. İzleme genellikle ana metnin yazı tipini daraltmak için kullanılır.

Uygulamalı stil stillerinin sayısını sınırlayın

Çoğu proje için iki veya üç stil vardır. Seçmede bir hata yapmamak için, yazı tipi ailesini bulun büyük miktar Mevcut çizim varyasyonları. En yüksek kalitede yazı tipleri çok çeşitli stillere sahiptir - yağ, normal, italik, yoğunlaştırılmış, siyah vb.

Stilleri karıştırın ve karşılaştırın

İki farklı stil seçmenizi öneririm. En yaygın çifti Serif ve Sans Serif'dir. Çeşitli stilleri ve çizerlerin bağlanması, aynı yükseklikte ve kabın şekline sahip harfleri arayın ("O" gibi kapalı harfler içindeki boşluk).

Bu küçük detaylar, bu fontların nasıl bir araya geleceğini ve metni okumanın rahatlığını önemli ölçüde etkileyecektir.

Transfer ve kapalı

Çoğu durumda, dize transferleri ve ihtiyaç duymaz. Çevrimiçi metin durumunda, bu teknikler yalnızca hızlı asimilasyon ve anlayışı karmaşıklaştırır. Transferler okuma ile müdahale eder ve komple güç genellikle okunamayan biçimlendirmeye yol açmaz.

Yazı tiplerini değiştirmeyin

Yazı tipini asla değiştirmeyin. Daha kalın, tiner veya daha yüksek yapmayı denemeyin. Başka birini seçmek daha iyidir.

Yazı Tipi Geliştirme Tasarımcıları, bu yazı tipinin danışmanlık ve stil tarzını tatmin etmesi için çok zaman harcıyorlar. Hiçbir şeyi değiştirmenize gerek yok. Bunu iyileştiremezsiniz ve çoğu durumda sadece her şeyi bozacak.

Yazı tipi size uymuyorsa, başka bir şey arayın. Benzer fontları tanımlayan benzer font aracını, benzer fontları tanımlayan aracı kullanın.

Kontrast

Kontrast oluşturmak için tipografi kullanın. Ayrıca, farklı boyutlarda kullandığınız bir hiyerarşi oluşturma, ağırlık, rengi ve yazı tipi stilini değiştirerek görsel ilgi oluşturun.

Renk en verimli olanlardan biridir ve basit yollar Kontrast oluşturulması. Mükemmel kontrast - açık bir arka plan üzerinde karanlık metin (veya tam tersi). Bu amaca ulaşmanıza yardımcı olacak neredeyse sınırsız bir renk setiniz var. Renk ve tipografi ile oynamak, bazı renk kombinasyonlarının, örneğin parlak mavi üzerindeki parlak kırmızı olduğunu unutmayın, oldukça zor olabilir.

Kontrast söz konusu olduğunda, elle okunabilir bir metin oluşturmak için en iyi basit bir arka plan kullanın. Ancak bu kadar görsel elemanları görüntü veya desenler olarak içeriyorsa, harflerin boyutunu arttırın - bu, arka planın arka planı ile ön planın metin öğeleri arasında bir ayrım oluşturacaktır.

Koleksiyon Şerit Formatı

Arama bandı formatı, konteyner metninin boyutudur. Tüm metin çerçevesinin genişliği veya tek sütun olabilir.

Dizenin formatı önemlidir, çünkü ekrandaki karakter sayısı (boşluklar, özel karakterler ve noktalama işaretleri dahil) okunabilirliği etkiler. Satırlar çok uzun veya çok kısa ise, kullanıcının görünümü hareket etmek zor olacaktır.

Tipografik tarzın elemanlarından: "45 ila 75 arasında değişen herhangi bir sayıda karakter, tek sütun kümesi için tatmin edici bir dize uzunluğu olarak kabul edilir. 66 karakter dizisi (harfler ve boşluklar dahil) mükemmel olarak kabul edilir. Çok renkli bir set için, ideal ortalama bir dize, uzun 40-50 sembolü olacaktır. "

Bu kitabın yayınlanmasında, mobil tipografi hakkında hiç kimse düşünülmediğine rağmen, Multicolon setiyle ilgili öneri alaka düzeyini kaybetmedi. Küçük ekranlardaki durumlarda, dizgi başına 35 karakter bile kullanabilirsiniz.

Makale'nin çevirisi Carrie Casins

Bu liste II'nin sonuçlarına göre derlenir. 2008. Önceki "Hit Parads" bulunabilir ve bulunabilir.

Her örneğin kısa bir yorum eşlik eder ve ekran görüntüsüne basmak orijinal siteye yol açar.

Tohum konferansı

Flaş yok, resim yok, gürültü yok; Sadece iyi stilize yazı tipi ve iyi yazılı metin: Sadece yazı tipi ile büyük bir sonuç elde edilebileceğinin gerçek kanıtı. Bu türden daha fazla örnek görmek istiyorum.

Haber tasarlamak.

Başlık ve ana içerik arasındaki büyük kontrast, çok fazla saf alan ve iyi bir organizasyon.

Omniti.

Hoş logo, net metin ve çok güzel renk şeması. Tasarım geliştirme hakkında daha fazla bilgi edinin.

DesignR.it.

Muhteşem uygun logo (ne tür bir yazı tipini biliyor mu?) Ve birçok rafine parça.

TASARIM GÖRÜNÜMÜ.

Andy RatdleZH - Uygulamalı bir tasarımcı, destekleyen aynı prensipleri uygular. Yayın boyutunu, makalenin yayınlanmasına bağlı olarak nasıl değiştirdiğini, böylece en taze metin en büyük Kehal'e karşılık gelir.

Wordpress.org & wp 2.5.x admin

WordPress Blogger platformu web sitesine dayanmıyor olsa da, her gün milyonlarca ekranlarımız yoksa, web siteleri binlerce olarak gösterilir. Daha fazla çevrimiçi ve çevrimdışı başvurular da iyi isterdim.

Bizim tarz.

Gerçekten bu siteyi incelemede eklemek istemedim, çünkü flaş üzerinde kullanılır. Bununla birlikte, bazı mükemmel yazı tipleri üzerinde sunulur (ve favorilerimden bazıları eklenmelidir).

Güverte.

Her şeyde sadece yazı tiplerine dayanan bir başka site. Mükemmel hiyerarşi ve işaretleme örneği. "Fotoğrafın bin kelimeden fazla" diyor "dedi? Hayır, yazı tipi daha iyi diyor.