Ekran çözünürlüğüne göre duyarlı yazı boyutu — Responsive font size

Merhaba, bu yazıda ekran çözünürlüğüne göre duyarlı yazı boyutunu ayarlamayı ve ölçü birimleri hakkında bilgiler vermeye çalışacağım. Şimdiden keyifli okumalar :)

1 — CSS ile duyarlı tipografi oluşturalım; vw #

<h1 style="font-size:calc(1.5rem + .75vw);">Merhaba Dünya</h1>

Merhaba Dünya

Örnek olarak bir tane tanımlayalım.

1.1 — Nedir rem? #

Web’de tipografi için en iyi uygulamalardan biri, rem ve em gibi göreli birimleri kullanmaktır. Soru şu ki, hangisini kullanmalısınız?

em ve rem arasında aslında fark r yani root. Peki bunun anlamı ne?
— rem dediğimiz zaman body yani kök (root) font-size değerine göre değer alır em ise bir üstteki kapsayıcıya göre değer almaktadır.

Tarayıcılarda varsayılan olarak font-size değeri 16px gelmektedir bu da; 1rem=16px anlamına gelmektedir.

body {
   font-size: 16px;
}
.heading {
   font-size: 2em /* 16px * 2 = 32px */
}

— em kullanımına örnek

<div class="home-page">
<h1 class="home-page--heading">Başlık</h1>
...
</div>

.home-page { font-size: 20px }
.home-page--heading { font-size: 2em } /* 20px * 2 = 40px */

1.2— Nedir vw? vw ve vh birimleri #

Bu birimler, görünüm alanı genişliği ve görünüm alanı yüksekliğinin yüzdeleri cinsinden boyutları belirlemenize olanak tanır.

• vw: Görüntü alanı genişliğinin yüzdesi
• vh: Görüntü alanı yüksekliğinin yüzdesi
• vmin: vmin – vw veya vh, hangisi daha küçükse
• vmax:vw veya vh, hangisi daha büyükse

görsel https://zellwk.com/

Viewport, bu durumda tarayıcı ekranını ifade eder. 1vw tarayıcının genişliğinin yüzde biri anlamına gelir. 100vw tam tarayıcı genişliği anlamına gelir. Unutmamakta fayda var buna scroll dahildir.

Örneğin, a font-size 8vw, 1200px bir görüntü alanı genişliği için yaklaşık 96px, 400px bir görüntü alanı genişliği için 33px ve 1920px bir görüntü alanı genişliği için 154px olarak hesaplanacaktır.

2 — Medya sorgularıyla yazı tipi boyutu #

Medya sorguları da çözüm sağlar. Kullanıcının tarayıcı genişliğine bağlı olarak otomatik olarak yeniden hesaplanır. Bir örnek yapalım

.home-page--heading {
  font-size: 2rem;
}
@media (min-width: 768px) {
   .home-page--heading {
      font-size: 1rem;
   }
}

Bonus: Bootstrap 5 duyarlı font ayarı #

.fs-1 {
   font-size: calc(1.375rem + 1.5vw)!important;
}
.fs-2 {
   font-size: calc(1.325rem + .9vw)!important;
}
.fs-3 {
   font-size: calc(1.3rem + .6vw)!important;
}
.fs-4 {
   font-size: calc(1.275rem + .3vw)!important;
}
.fs-5 {
   font-size: 1.25rem!important;
}
.fs-6 {
   font-size: 1rem!important;
}

Tavsiye edilen tasarım dizayn ölçüleri

kaynak

kaynak

Tasarım dizaynda tipografi ölçüleri için Tasarım Sistemlerinde Tipografi adlı makaleye göz atmanızı tavsiye ederim.

Bu makalede ölçü birimleri ve tasarım dizaynın önemine değinmeye çalıştım. Umarım faydalı olmuştur, iyi çalışmalar dilerim.

Faydalandığım kaynaklar
— https://zellwk.com/blog/viewport-based-typography/

— https://www.sitepoint.com/css-viewport-units-quick-start/

— https://zellwk.com/blog/rem-vs-em/

— https://getbootstrap.com/docs/5.0/utilities/text/#font-size