Tipografiyi Anlamak 10 Yardımcı Araçlar ve Kaynaklar

Tipografiyi Anlama konusundaki son makalemde, tipografinin tasarımına neyin girdiğini ve web sitenizin düzenini iyileştirmek ve kullanıcı deneyimini geliştirmek için nasıl manipüle edeceğimi yazdım. Bu yazıda listeliyorum Tipografi için en sevdiğim 10 araç internette.

Bunlar, HTML ızgaraları ve içerik alanları oluşturmaya, CSS stilleri oluşturmaya, yazı tipi adları oluşturmaya ve bir sürü başka harika şeylere yardımcı olabilir. Aşağıdaki linklerden bazılarına göz atın ve tartışma sonrası alandaki düşüncelerinizi bize bildirdiğinizden emin olun..

Önerilen Kaynaklar: Tipografiyi Anlamak: Web İçin Yazmak

Yazı Tipi Matrisi

Bu çevrimiçi kılavuz 24 yollu tasarım blogu tarafından yayınlanmıştır. Varsayılan olarak çeşitli yazılım satıcılarından bulacağınız tüm standart web fontlarının bir matris tablosuna sahiptir. Popüler başlıklar arasında Windows, Mac OS X, Microsoft Office ve Adobe Creative Suite programları bulunur.

Renk Kontrast Kontrolü

Renk kontrastı, standart siyah beyaz modelin dışına çıkarken genellikle bir problemdir. Bir eşleşme bulduğunuzda tasarım mükemmellik gibi hissediyor. Yine de zayıf bir renk seçimi çok kötü görünüyor ve genel tasarımı olumsuz yönde etkiliyor. Bu küçük web aracı, herhangi bir stil düzeni için birbirinize uygun renkleri seçmenize yardımcı olabilir.

HTML Ipsum

Çıktı metninden daha fazlasını yapabilecek bir Lorem Ipsum aracına mı ihtiyacınız var? Bu çevrimiçi HTML oluşturucu, en yaygın sayfa öğeleri için kod blokları yaratacaktır. Bazı örnekler, sıralanmamış listeler, tanım listeleri, web formları, tablolar ve birçok başka çözümü içerir..

Typechart

Typechart, CSS geliştiricisi olarak en sevdiğim araçlardan biri. Sık sık sistemimdeki belirli bir yazı tipini bir web projesiyle eşleştirmek istiyorum, ancak koleksiyonumun tamamını çevirmek için zamanım yok. Bu harika araç, popüler font ailesi seçimlerinde seçim yapmanıza ve hatta uygun CSS kodunu indirmenize olanak sağlar!

PX-to-EM.com

Varsayılan tarayıcı metin boyutunu sıfırlamazsanız büyük olasılıkla ems ile pikselleri eşleştirmede sorun yaşarsınız. Bu tarayıcı içi uygulama, px'den em'e hem bir dönüşüm tablosu hem de kullanıcı arabirimi sağlar. Kesinlikle çok basit bir araçtır, ancak gerçekten basit bir işlevselliğe sahip kullanışlı bir kılavuz sunar - ve ücretsiz fiyat etiketini geçemezsiniz.

CSS Türü Kümesi

Gerçekten yeni başlayan bir araç olduğu sürece CSS Type Set ile bağlantı kurmanızı tavsiye etmiyorum. Seçtiğiniz belirli yazı tipi özelliklerine göre CSS kodu oluşturmanıza olanak sağlar. İlk başta çok faydalı olsa da, zamanla dayanması gereken bir koltuk değneği olur. Ve CSS özelliklerinde ustalaşmanız için motive olmayacaksınız. Ancak bir projede zaman kazanmanız gerekirse, bu araç gözden kaçırılamaz.

tipik saygısız

İşte font önizleme kitaplığının gerçekten benzersiz bir örneği. Tipik saygısız işletim sistemi için yerel bir avuç dolusu yazı tipi içerir. En güvenli web çözümlerini almak için font dizininizi otomatik olarak tarar. Bunları yan yana karşılaştırabilir ve en sevdiğiniz seçenekler arasında kolayca seçim yapabilirsiniz. Bu, favorilerinize eklediğiniz ve son dakikaya kadar düşünmediğiniz bir başka harika zaman tasarrufudır..

Tipografik Izgara

Izgarayı HTML ve CSS'de tasarlamak hakkında çok fazla konuşma var. Izgaraların nasıl çalıştığını ve bir web sitesini piksel cinsinden ölçmek kavramını muhtemelen anlamıyorsunuz. CSS-Tricks tarafından hazırlanan bu kılavuz dersi, dijital çağın tipografisinin temellerini tanıtmak için yapılan rehberli bir çaba gibi. Web tasarımı alanında daha gelişmiş bir konu. Ancak biraz sabrınız varsa, bu ızgara özelliklerinin sayfa düzeninizi gerçekten nasıl etkileyebileceğini görmek için ayrıntıları gözden geçirmenizi öneririz..

Yazı tipi ne!

Hepimiz çok iyi tanımlanamayan bir fontla bir logo veya resim bulduk. WhatTheFont internette birkaç yıl boyunca tur attı ve hala benim favorim. Yüklenecek bir resim seçtiniz ve onların komut dosyası, resimdeki metni benzer yazı tipleriyle eşleştirmek için analiz edecek. Bu uygulama sizi, istediğiniz her yazı tipini satın alabileceğiniz dış ürünlere bile bağlar..

Satır Taban Çizgisi / Satır Yüksekliği Hesaplayıcısı

Sonunda çizgi yüksekliği ve ritim özellikleri oluşturmak için gerçekten güçlü bir araç. Temel yazı tipi boyutu ve satır yüksekliği için değerleri girin veya kendi özel CSS kodunuzu kenara koyun. Uygulama, önizlemeleri birkaç farklı stilde oluşturacak ve bu özelliklerin kendi web sitenizde nasıl görüneceği hakkında bir fikir edinebilirsiniz.