Cara Menetapkan Skala Tipografi Modular

Mungkin pertanyaan tipografi paling jelas di tangan seorang desainer adalah "jenis-jenis huruf apa yang harus saya gunakan?" Pertanyaan kedua, yang jarang mendapat perhatian seperti itu, adalah "pada ukuran apa saya harus mengatur tipeku?" Menetapkan skala modular adalah cara terbaik untuk menentukan ukuran tipografi, pada kenyataannya, hal tersebut dapat membantu dengan meletakkan pengukuran dan proporsi di seluruh page layout Anda.

Selama sesi ini, kita telah melihat hierarki; bagaimana ukuran dan faktor lain dapat mempengaruhi hubungan visual elemen tipografi. Kita juga baru-baru ini melihat ritme vertikal, konsistensi visual jarak dan elemen pada halaman. Kemudian kita memiliki masalah pengaturan baseline grid, yang berhubungan dengan membangun ritme vertikal. Kita bahkan berbicara tentang menggunakan ems sebagai unit pengukuran, dua kali dalam kenyataannya. Semua aspek dari tipografi ini diikat bersama oleh keberadaan size fundamental, jadi bagaimana tepatnya Anda memutuskan seberapa besar elemen tipografi Anda seharusnya?

Memperkenalkan Skala Modular

Istilah Skala Modular mengacu pada serangkaian nilai yang harmonis. Menjadi skala, setiap nilai adalah faktor dari yang lain dan mungkin terlihat seperti ini:

Menerapkan skala ini ke beberapa tipografi CSS dasar, kita mungkin mendapatkan:

1

h1 { font-size: 36px }

2

h2 { font-size: 24px }

3

h3 { font-size: 18px }

4

h4 { font-size: 14px }

5

6

p { font-size: 11px }

7

8

small { font-size: 9px }

Anda mungkin mengenali nilai-nilai ini sebagai bagian dari skala modular klasik, diilustrasikan oleh Robert Bringhust dalam The Elements of Typographic Style.

Skala modular, seperti skala musik, adalah serangkaian proporsi harmonis yang sudah diatur sebelumnya.

Robert Bringhurst

Dengan mengikuti skala ini dan mengatur berbagai tipografi dan potongan tipografi Anda ke nilai yang ditampilkan, mereka akan mengambil keindahan yang melekat; proporsi yang telah bekerja untuk desainer tipografi selama berabad-abad.

Benar, berabad-abad.

Pada kenyataannya, asal-usul membangun skala tipografi berasal dari kebutuhan praktis sebagai penilaian estetika. Pada hari-hari menjijikkan penataan foundry metal, ketika setiap bentuk huruf dicetak sebagai blok logam (disebut semacam) itu tidak praktis, terlalu mahal, untuk memproduksi dan menyimpan set karakter keseluruhan dari setiap jenis huruf, di semua berbagai bobot, dalam segala kemungkinan ukuran.

Karena itu, Typesetters selalu, seiring berjalannya waktu, pada berbagai ukuran yang dapat digunakan untuk bekerja bersama secara harmonis.

Menetapkan Skala Modular Anda Sendiri

Mari buat skala sederhana, untuk digunakan dalam proyek kita sendiri.

Pilih Nomor

Kita harus memulai di suatu tempat, jadi kita akan mulai dengan angka dasar yang signifikan; ukuran font dasar. Saya terbiasa mulai dari apa pun yang ditentukan oleh browser sebagai default, jadi kita akan menggunakan 16px sebagai basis. Tim Brown menyarankan untuk memulai dengan ukuran font di mana jenis huruf Anda ditampilkan paling renyah - lebih sering daripada tidak, itu akan menjadi 16px untuk font yang dirancang dengan web dalam pikiran.

Saya Tahu Dia, Ho-Rasio

(Maaf, itu adalah satu-satunya kutipan yang bisa Saya pikirkan mengandung rasio.)

Jadi sekarang, kita perlu membuat rasio, nilai yang akan di gunakan untuk menggandakan secara eksponensial dan membagi nilai dasar. Rasio ini bisa menjadi apa pun yang Anda suka; jika Anda memiliki skala yang memiliki keindahan tertentu di mata Anda, itu bagus.

Anda mungkin, misalnya, pergi untuk bagian emas 1:1.61803398875. Rasio ini berakar pada struktur dunia di sekitar kita, dan telah digunakan oleh para perancang dan arsitek untuk membangun harmoni estetika sejak.. selamanya.

Untuk mengilustrasikan apa yang sedang terjadi dengan mudah, kami akan menggunakan 1: 2 (musik di antara Anda, yang bukan saya omong-omong, akan mengenali ini sebagai satu oktaf). Dimulai dengan 16, kita mendapatkan yang berikut:

1

16 * 2 = 32

2

32 * 2 = 64

3

64 * 2 = 128

Dan ini bisa berlanjut secara eksponensial. Untuk menetapkan skala ke bawah, kita membagi:

1

16 / 2 = 8

2

8 / 2 = 4

3

4 / 2 = 2

Ini memberi kita permulaan skala kita:

yang dapat diterapkan pada CSS tipografi sederhana seperti:

1

h1 { font-size: 256px }

2

h2 { font-size: 128px }

3

h3 { font-size: 64px }

4

h4 { font-size: 32px }

5

6

p { font-size: 16px }

7

8

small { font-size: 8px }

Kerja bagus sejauh ini!

Isi yang kosong

Skala ini cukup ekstrim. Ini berfungsi, tetapi untuk pengukuran pada halaman web itu cukup tak kenal ampun. Agar lebih fleksibel, mari kita beri lebih banyak pilihan dengan menambahkan dimensi kedua pada skala, sebuah proses yang digariskan oleh Tim Brown di artikel A List Apart-nya Tipografi Lebih Bermakna.

Pilih nomor lain. Berapa saja, asalkan memegang beberapa signifikansi untuk desain Anda. Kita telah menggunakan 16 karena itu ukuran font dasar, jadi mari kita memuji bahwa dengan menambahkan 95, lebar dari satu kolom yang akan saya gunakan dalam tata letak lebar 1.140px fiktif ini.

Menerapkan rasio 1:2 hingga 95, kita mendapatkan skala berikut:

1

11.875 / 2 = 5.938

2

23.75 / 2 = 11.875

3

47.5 / 2 = 23.75

4

95 / 2 = 47.5

5

95 * 1 = 95

6

95 * 2 = 190

7

190 * 2 = 380

8

380 * 2 = 760

Jadi sekarang kita memiliki dua skala, keduanya berdasarkan rasio yang sama, yang karenanya hidup berdampingan cukup baik:

Bahkan, kita bisa menggabungkannya, untuk memberi kita skala seperti ini:

1

760.000

2

512.000

3

380.000

4

256.000

5

190.000

6

128.000

7

95.000

8

64.000

9

47.500

10

32.000

11

23.750

12

16.000

13

11.875

14

8.000

15

5.938

16

4.000

17

2.969

18

2.000

19

1.485

Ini mengisi celah untuknya, buat skalanya terlihat jauh lebih lengkap.

Apa yang Saya Lakukan Dengan Nomor-nomor Ini?

Kita telah menyebutkan bagaimana kita dapat menerapkan skala ke elemen tipografi dasar, jadi mari perbarui itu.

1

h1 { font-size: 64px }

2

h2 { font-size: 47.5px }

3

h3 { font-size: 32px }

4

h4 { font-size: 23.75px }

5

6

p { font-size: 16px }

7

8

small { font-size: 8px }

Di sana kita pergi, tidak begitu kuat. Skala kita juga dapat meminjamkan diri ke fitur tipografi lainnya, seperti tinggi garis dan karena itu seluruh garis dasar grid:

1

p {

2

  font-size: 16px;

3

	line-height: 23.75px;

4

	margin: 0 0 16px 0;

5

}

Dan kita dapat meningkatkan ini semua dengan menggunakan ems juga, membuat hubungan dan proporsi menjadi lebih baik:

1

body {

2

	font-size: 100%;

3

}

4

5

p {

6

	font-size: 1em;

7

	line-height: 1.484;

8

	margin: 0 0 1em 0;

9

}

Jika Anda berjuang dengan perhitungan pada titik ini, lanjutkan ke Skala Modular Tim Brown. Kalkulatornya akan secara otomatis menghasilkan piksel dan nilai em untuk Anda.

Untuk referensi, inilah skala kita dalam hal ems (dengan kata lain, relatif terhadap ukuran font dasar):

1

64

2

47.5

3

32

4

23.75

5

16

6

11.875

7

8

8

5.938

9

4

10

2.969

11

2

12

1.484

13

1

14

0.742

15

0.5

16

0.371

17

0.25

18

0.186

19

0.125

20

0.093

Ukuran Grid Kita

Setelah menangani basic type elements dari halaman kita, mari perhatikan beberapa struktur. Setumpuk sederhana dari dua belas kolom dengan mudah ditata:

1

.column-1 	{	width: 95px };  	*

2

.column-2 	{	width: 190px };  	*

3

.column-3 	{	width: 285px };

4

.column-4 	{	width: 380px };		*

5

.column-5 	{	width: 475px };

6

.column-6 	{	width: 570px };

7

.column-7 	{	width: 665px };

8

.column-8 	{	width: 760px };		*

9

.column-9 	{	width: 855px };

10

.column-10 	{	width: 950px };

11

.column-11 	{	width: 1045px };

12

.column-12 	{	width: 1140px };

13

14

/* in a fluid grid, these would be converted to % values */

Anda akan mengenali nilai dengan tanda bintang di sampingnya sebagai yang ditampilkan dalam skala modular.

Setiap kolom perlu mengapung juga, plus, untuk membentuk talang, kita dapat menambahkan beberapa padding ke masing-masing 1em (16px, yang juga memiliki fitur dalam skala.)

1

/* apply a natural box layout model to all elements */

2

*, *:before, *:after {

3

  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

4

 }

5

6

.column {

7

	float: left;

8

	padding: 0 1em;

9

}

Sangat cepat kita telah meletakkan fondasi untuk kisi yang solid, plus tipografi, semua didasarkan pada skala yang harmonis.

Lebih Lanjut Lagi

Menggabungkan grid dengan tipografi dapat menjadi bisnis yang kompleks; menghitung kerukunan dapat terasa sangat tidak disengaja pada waktu tertentu! Setelah Anda memulai dengan beberapa landasan dasar, Anda akan menemukan bahwa Anda tidak dapat menata laman web tanpa semacam makna bagi hubungan di laman Anda.

Apa yang telah dilakukan sejauh ini adalah awal yang baik, tetapi masih banyak yang harus dilakukan dan banyak penyesuaian. Grid dasar, misalnya mungkin agak aneh untuk dibangun dari titik ini, jadi Anda mungkin menemukan beberapa nilai awal tidak berfungsi. Selain itu, mungkin ingin agar grid kita fleksibel, sehingga kolom tidak akan mempertahankan nilai tetap yang awalnya digunakan. Karena alasan ini, Anda mungkin menemukan nilai horizontal tidak selalu bekerja dengan pengukuran vertikal.

Ada skala dan kisi-kisi yang ditetapkan, dicoba dan diuji selama berabad-abad. Mengapa tidak mencoba menerapkan beberapa di antaranya ke pekerjaan Anda sendiri? Apakah Anda pernah menerapkan skala modular yang disengaja untuk pekerjaan Anda? Jika tidak, bagaimana Anda memutuskan ukuran tipografi Anda? Adakah masalah khusus yang Anda hadapi dengan timbangan? Mari dengarkan pendapat Anda di komentar!

Referensi yang Berguna

• Tipografi Lebih Bermakna oleh Tim Brown
• Modular skala dari Tim Brown
• Typeplate Tipografi starter kit
• Skala tipografi
• Skala & irama oleh Iain Lamb
• Definisi proporsi Modulor di Wikipedia
• Jangan menulis tanpa skala
• type-scale.com alat jenis oleh Jeremy gereja