Typography
The style guide provides to change stylistic for your design site.
Details
Helvetica (Headline)
Download Font: https://font.download/font/helvetica-255
Inter (Body)
Download Font:https://fonts.google.com/specimen/Inter
Basic Guideline
Pahami dan hormati content hierarchy
Contoh sempurna dari hierarki yang bersih dan lugas: judul, teks isi, dan keterangan gambar. Dan saran terbaik adalah mencoba untuk tidak melewatkan level heading.
Bertemanlah dengan white space
Contoh yang indah dari penggunaan white space baik adalah ketika white space dan hierarki saling bekerja sama untuk menciptakan komposisi yang bersih dan lapang (tidak terlalu berdekatan)
Jangan terlalu banyak menggunakan jenis fonts dan styles
Jika Anda membutuhkan font yang lebih dari satu tipe, pastikan untuk membatasi tipe font Anda dengan 2 sampai 3 tipografi saja. Gunakan satu font dan ukuran untuk isi, satu lagi untuk header, dan satu lagi untuk subjudul.
Alignment adalah konsep penting dalam tipografi
Gunakan gaya paragraf left-aligned dan/atau centered tergantung pada faktor visual/spasial yang ada.
Pilih font sekunder yang sangat baik untuk dipasangkan
Saat Anda memiliki heading dan subhead, gunakan dua tipografi berbeda yang saling melengkapi untuk membentuk hierarki visual.
Utamakan readability
Apa pun yang Anda desain, pastikan orang dapat dengan mudah membaca pesan Anda.
Based on Refference
Heading
Heading 1
heading 1 / Bold / 96px / Line-Hight 112
Heading 2
heading 2 / Bold / 80px / Line-Hight 96
Heading 3
heading 3 / Bold /64px / Line-Hight 80
Heading 4
heading 4 / Bold / 48px / Line-Hight 64
Heading 5
heading 5 / Bold / 32px / Line-Hight 40
Heading 6
Heading 6 / Bold / 24px / Line-Hight 32
Heading 1
heading 1 / Semibold / 96px / Line-Hight 112
Heading 2
heading 2 / Semibold / 80px / Line-Hight 96
Heading 3
heading 3 / Semibold / 64px / Line-Hight 80
Heading 4
heading 4 / Semibold / 48px / Line-Hight 64
Heading 5
heading 5 / Semibold / 32px / Line-Hight 40
Heading 6
Heading 6 / Semibold / 24px / Line-Hight 32
Heading 1
heading 1 / Semibold / 96px / Line-Hight 112
Heading 2
heading 2 / Semibold / 80px / Line-Hight 96
Heading 3
heading 3 / Regular / 64px / Line-Hight 80
Heading 4
heading 4 / Regular / 48px / Line-Hight 64
Heading 5
heading 5 / Regular / 32px / Line-Hight 40
Heading 6
Heading 6 / Semibold / 24px / Line-Hight 32
Subtitle
Subtitle 1
subtitle 1 / Bold / 20px / Line-Hight 28
Subtitle 2
subtitle 2 / Bold / 18px / Line-Hight 26
Subtitle 1
subtitle 1 / Semibold / 20px / Line-Hight 28
Subtitle 2
subtitle 2 / Semibold / 18px / Line-Hight 26
Subtitle 1
subtitle 1 / Regular / 20px / Line-Hight 28
Subtitle 2
subtitle 2 / Regular / 18px / Line-Hight 26
Body
Body 1
body 1 / Semibold / 16px / Line-Hight 24
Body 2
body / Regular / 16px / Line-Hight 24
Body 1
body 1 / Semibold / 14px / Line-Hight 22
Body 2
body / Regular / 14px / Line-Hight 22
Button
Button 1
Button 1 / Semibold / 16px / Line-Hight 24
Button 2
body 1 / Semibold / 16px / Line-Hight 24
Caption
Caption 1
Caption / Semibold / 12px / Line-Hight 20
Caption 2
Caption / Regular / 12px / Line-Hight 20
Overline 1
body 1 / Semibold / 10px / Line-Hight 18
Overline 2
body 1 / Regular / 10px / Line-Hight 18