Tipografi Cairan - Trik CSS | Cuplikan Kode 2025

Langsung ke kode, berikut adalah implementasi yang berfungsi:

html ( font-size: 16px; ) @media screen and (min-width: 320px) ( html ( font-size: calc(16px + 6 * ((100vw - 320px) / 680)); ) ) @media screen and (min-width: 1000px) ( html ( font-size: 22px; ) )

Layak untuk melihat posting terbaru kami Tipografi Cairan Sederhana untuk ukuran tipe praktis, dijepit, berbasis viewport.

Itu akan menskalakan font-sizedari minimal 16px (pada viewport 320px) hingga maksimum 22px (pada viewport 1000px). Berikut demo tentang itu, tetapi sebagai Sass @mixin (yang akan kita bahas nanti).

Lihat Contoh Dasar Pena Jenis Cairan w Sass oleh Chris Coyier (@chriscoyier) di CodePen.

Sass digunakan hanya untuk membuat keluaran itu sedikit lebih mudah untuk dihasilkan, dan fakta bahwa ada sedikit matematika yang terlibat. Mari lihat.

Menggunakan unit viewport dan calc(), kita dapat memiliki ukuran font (dan properti lainnya) menyesuaikan ukurannya berdasarkan ukuran layar. Jadi, alih-alih selalu berukuran sama, atau melompat dari satu ukuran ke ukuran berikutnya pada kueri media, ukurannya bisa berubah-ubah.

Inilah perhitungannya, kredit Mike Riethmuller:

body ( font-size: calc((minimum size) + ((maximum size) - (minimum size)) * ((100vw - (minimum viewport width)) / ((maximum viewport width) - (minimum viewport width)))); )

Alasan mengapa matematika sedikit rumit adalah karena kami mencoba menghindari jenis menjadi lebih kecil dari minimum kami atau lebih besar dari maksimum kami, yang sangat mudah dilakukan dengan unit viewport.

Misalnya, jika kita ingin ukuran font kita dalam kisaran di mana 14pxukuran minimum pada lebar viewport terkecil 300pxdan di mana 26pxukuran maksimum pada lebar viewport terbesar 1600px, maka persamaan kita akan terlihat seperti ini:

body ( font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); )

Teks berubah dengan mulus ke lebar viewport

Lihat Pen JEVevK oleh CSS-Tricks (@ css-trick) di CodePen.

Untuk mengunci ukuran minimum dan maksimum tersebut, menggunakan matematika ini dalam kueri media membantu. Ini beberapa Sass untuk membantu…

Di Sass

Anda bisa membuat mixin (cukup kuat), seperti ini:

@function strip-unit($value) ( @return $value / ($value * 0 + 1); ) @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) ( $u1: unit($min-vw); $u2: unit($max-vw); $u3: unit($min-font-size); $u4: unit($max-font-size); @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 ( & ( font-size: $min-font-size; @media screen and (min-width: $min-vw) ( font-size: calc(#($min-font-size) + #(strip-unit($max-font-size - $min-font-size)) * ((100vw - #($min-vw)) / #(strip-unit($max-vw - $min-vw)))); ) @media screen and (min-width: $max-vw) ( font-size: $max-font-size; ) ) ) )

Yang Anda gunakan seperti ini:

$min_width: 320px; $max_width: 1200px; $min_font: 16px; $max_font: 24px; html ( @include fluid-type($min_width, $max_width, $min_font, $max_font); )

Inilah contoh Mike lainnya, mendapatkan ritme yang lancar:

Memperluas Ide ke Header dengan Skala Modular

Skala modular, artinya semakin banyak ruang yang tersedia, semakin dramatis perbedaan ukurannya. Mungkin pada viewport terbesar dengan, setiap header ke atas, hierarki 1,4x lebih besar dari yang berikutnya, tetapi paling kecil, hanya 1,05x.

Lihat tampilan:

“Jenis Cairan” i̶n̶s̶p̶i̶r̶e̶d̶ yang dicuri dari @MikeRiethmuller sekarang tersedia di blog @CodePen. Termasuk “Skala Modular Cairan!” pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27 Oktober 2016

Dengan mixin Sass kami, itu terlihat seperti:

$mod_1: 1.2; // mobile $mod_2: 1.5; // desktop h1 ( font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h2 ( font-size: $mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h3 ( font-size: $mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font); )