Rumus untuk Ukuran Font Responsif

 (jameshfisher.com)
28 poin oleh xguru 2024-03-22 | 3 komentar | Bagikan ke WhatsApp
  • Banyak situs web seperti New York Times, Medium, dan Substack menggunakan breakpoint (seperti 768px) lalu mengubah ukuran font berdasarkan titik itu (1.125rem dan 1.25rem)
  • Dengan calc di CSS, kita bisa menulis nilai yang mirip seperti ini: calc(1.0625rem + 0.2604vw)
  • Jika dibulatkan, ini bisa ditulis sebagai 1rem + 0.25vw. Jadi sekarang saya memakai CSS berikut di sebagian besar situs web
:root {  
  font-size: calc(1rem + 0.25vw);  
}

Bacaan terkait

3 komentar

 
yanggitak 2024-03-25

Kalau ingin mengimplementasikan persis seperti desain di PC, sepertinya variabel CSS yang mengecualikan lebar scrollbar juga perlu dimasukkan ke dalam rumus. Setahu saya, unit vw dihitung berdasarkan lebar yang termasuk lebar scrollbar juga.

Jika seperti gambar utuh, margin elemen di sekitarnya juga perlu bertambah dan berkurang dengan rasio yang sama, mungkin cara pengaturan font di situs berikut juga layak dijadikan referensi. Untuk Galaxy Fold (320px) atau monitor beresolusi tinggi, sepertinya tidak masalah juga kalau diberi batas yang sesuai dengan breakpoint.
https://amerimnos.github.io/coding-playground/reponsive-css-trick-vw/
 
cometkim 2024-03-22

Ini memang pendekatan kasar yang berguna, tetapi sulit untuk sepenuhnya menggantikan breakpoint yang benar-benar dipakai dalam Fluid Typography.

Biasanya clamp(min_rem, calc_relative_vw, max_rem) diterapkan berbeda-beda di tiap breakpoint tergantung keterbacaan konten dan bentuk kontainer, dan jika ditangani dengan satu rumus saja maka akan sulit mengakomodasi form factor yang tidak umum.

Misalnya lingkungan seperti jendela pop-up Android, monitor 21:9, atau HMD.
 
nemorize 2024-03-23

Saya kurang paham soal popup Android atau hal seperti HMD..
Untuk yang seperti 21:9, bukankah akan cukup oke kalau vh juga dipakai bersama?
Kurang lebih seperti calc(1rem + min(1vw, 1vh) * 0.25).