CSS ile Duyarlı Tipografi Nasıl Oluşturulur

Bu kadar çok kesme noktasına sahip bir web sitesi geliştirmek yorucu olabilir. İster deneyimli bir geliştirici olun, ister orta düzey bir geliştirici olun, CSS'de öğrenilecek birçok yeni teknik vardır.

Ancak duyarlı tipografiye nasıl başlarsınız? Web sayfalarını herhangi bir ekran boyutuna uyarlamak için nasıl adımlar atılacağı aşağıda açıklanmıştır.

Duyarlı Tipografinin Önemi

Tipografi, bir web sitesinin okunabilirliğini, kullanılabilirliğini ve genel estetiğini sağlayarak web geliştirme ve tasarımında hayati bir rol oynar. Herkes duyarlı bir web sitesi ister. Metin veya yazı tiplerinin otomatik olarak farklı ekran boyutlarına göre ayarlanması harika olmaz mıydı? Web geliştirmede duyarlı tipografinin diğer avantajları şunları içerir;

• Okunabilirlik ve okunurluk sağlayarak çeşitli cihazlarda veya ekran boyutlarında genel kullanıcı deneyimini geliştirir.
instagram viewer
• Görme engelli veya diğer engelleri olan kullanıcıları barındırarak erişilebilirliği artırır. Ayarlanabilir yazı tipi boyutları gibi çeşitli kullanıcı tercihlerini barındırır.
• Cihazlar ve çözünürlükler genelinde tutarlı tipografi, marka kimliğinin ve görsel bütünlüğün korunmasına yardımcı olur.

İşte başlamadan önce kod düzenleyicinize kopyalayabileceğiniz bir kod şablonu, böylece ele alınacak teknikleri takip edebilirsiniz.

HTML Kod Dosyası

index.html
html>
<htmldil="tr">
<KAFA>
<metakarakter kümesi="UTF-8">
<metaisim="görüntü alanı"içerik="genişlik=cihaz genişliği, başlangıç ​​ölçeği=1.0">
<bağlantırel="stil sayfası"href="stil.css">
<başlık> Duyarlı Tipografi başlık>
KAFA>
<vücut>
<divsınıf="konteyner">
<h1> lorem ipsum h1>
<P> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit opio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
P>
div>
vücut>
html>

CSS Kod Dosyası

/*style.css*/
vücut{
görüntülemek: esnek;
haklı içerik: merkez;
hizalama öğeleri: merkez;
yükseklik: 100vh;
}
.konteyner{
Genişlik: 400piksel;
arka plan rengi: Antik Beyaz;
dolgu malzemesi: 15piksel;
kutu gölgesi:0 2piksel 5pikselrgba(0,0,0, 0.1) ;
}
h1{
renk: sıcak pembe;
}

Şimdi, CSS kullanarak duyarlı tipografi uygulamak için bazı etkili yöntem ve teknikleri keşfedelim.

1. sıkma

Bu, bir öğenin yazı tipi boyutunun belirli bir aralıkta kalmasına izin veren ve sağlayan modern bir CSS tipografi tekniğidir. "Clamp()" kelepçe işlevi, minimum değer, ideal değer ve maksimum değer olmak üzere üç parametre alır. Kelepçe işlevi tipografi ile sınırlı değildir. Resimler, kartlar, videolar ve diğer ortamlar için kullanılabilir. Bu nasıl çalışır.

Kelepçe (min-değer, ideal-değer, maks-değer):

h1{
yazı Boyutu: kelepçe(2rem, 5vw, 3rem);
}
P{
yazı Boyutu: kelepçe(1rem, 3vw, 2rem);
}

Bu örnekte, başlık ve paragraf için yazı tipi boyutları "clamp()" işlevi kullanılarak ayarlanır. "h1" başlığı için, yazı tipi boyutunun kök yazı tipi boyutunun iki katının altına düşmemesi için minimum değer "2rem" olarak ayarlanmıştır. İdeal veya tercih edilen değer, farklı ekran boyutlarına yanıt vermesini sağlayan görünüm alanı genişliğinin %5'i olan “5vw” olarak ayarlanmıştır. Yazı tipi boyutunun kök yazı tipi boyutunun üç katından büyük olmamasını sağlamak için maksimum değer "3 rem" olarak ayarlanmıştır. Paragraf stili için bunun tersi geçerlidir.

İdeal değer için görünüm genişliği "vw" veya yüzde "%" kullanmak en iyi uygulamadır, çünkü bu, özelliğin mevcut alana göre orantılı olarak ölçeklenmesini sağlayarak tasarımı daha duyarlı hale getirir. bildiğinden emin ol hangi CSS birimini kullanmalısınız? senaryonuz için.

Bu, geliştiriciler tarafından kullanılan en yaygın tipografi tekniğidir. Her kesme noktası için medya sorguları oluşturmayı içerir. Farklı ekran boyutlarına göre belirli stiller uygulamanıza olanak tanır. İşte bir örnek:

/* Varsayılan yazı tipi boyutu */
h1{
yazı Boyutu: 38piksel;
}
P{
yazı Boyutu: 20piksel;
}
/* Küçük ekranlar için yazı tipi boyutu */
@medya (maksimum genişlik:800 piksel){
h1{
yazı Boyutu: 32piksel;
}
P{
yazı Boyutu: 18piksel;
}
}
/* Daha küçük ekranlar için yazı tipi boyutu */
@medya (maksimum genişlik:400 piksel){
h1{
yazı Boyutu: 28piksel;
}
P{
yazı Boyutu: 15piksel;
}
}

Bu örnekte, başlık ve paragraf sırasıyla "38 piksel" ila "20 piksel" varsayılan değerine ayarlanmıştır. Ardından, düzeni cep telefonlarında duyarlı hale getirmek için daha küçük ekran boyutları için koşullar belirlenir. Tasarıma ve istediğiniz yanıt hızına bağlı olarak, diğer pek çok şeyin yanı sıra, istediğiniz kadar medya sorgusu oluşturabilirsiniz. Bilmeniz gereken medya sorgusu CSS hileleri.

3. CSS Özel Özellikleri

CSS özel değişkenleri olarak da bilinir ve stiliniz boyunca yeniden kullanılabilecek değerleri depolar. Kolay yönetim ve özelleştirme sağlamak için tipografi için kullanılabilir. İşte bir örnek.

:kök {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rem;
}
h1{
yazı Boyutu: var(--heading-font-size);
}
P{
yazı Boyutu: var(--paragraph-font-size);
}
@medya (maksimum genişlik:800 piksel){
:kök {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rem;
}
}
@medya (maksimum genişlik:400 piksel){
:kök {
--heading-font-size: 1.5rem;
--paragraph-font-size: 0.8rem;
}
}

Bu örnekte, CSS özelliği, ona global olarak erişmemizi sağlayan kök düzeyinde ayarlanmıştır. --heading-font-size ve --paragraph-font-size sırasıyla başlık ve paragraf için açıklayıcı adlardır ve her ikisine de varsayılan değerler verilir. Bu teknik, pano genelinde tutarlılığı sağlamak için çeşitli medya sorguları için yeniden kullanılabilir.

Duyarlı Tipografi En İyi Uygulamaları

Geliştiriciler arasında, tipografiyi gerçekleştirmek için doğrudan görüntü alanı genişliğini (vw) kullanmak yaygın bir uygulamadır. Basit olmasına ve çalışıyor gibi görünmesine rağmen, küçük ekran boyutlarında küçülür ve büyük ekran boyutlarında aşırı derecede büyür. Bu, sayfanızı yakınlaştırıp uzaklaştırdığınızda da oluşur. Yapabiliyorsanız, görünümü doğrudan bu şekilde kullanmaktan kaçının;

h1{
yazı Boyutu: 2vh;
 }

Her zaman test edin ve tipografinizin çeşitli ekran boyutlarında okunabilir olduğundan emin olun ve her zaman tarayıcı uyumluluğunu test edin. Okunabilirliği göz önünde bulundurun ve yazı tipi boyutlarının çok küçük veya çok büyük olmadığından emin olun

Duyarlı Tipografi Okunabilir Web Tasarımının Anahtarı

Duyarlı tipografi, web tasarımı ve geliştirmesinde çok önemli bir rol oynar. Sıkıştırma, medya sorguları ve CSS özel özellikleri gibi yöntem ve teknikleri uygulayarak, tipografinizin çeşitli ekran boyutları ve cihazlarda ölçeklenmesini sağlayabilirsiniz. CSS kullanarak yanıt vermeye çalışırken keşfedilecek çok fazla teknik var -- bu alanda uzmanlık geliştirmeye başlamak için bu teknikleri kullanın.