Layout Theory

Layout Prespective
Typography & Visual Implementation for Layout

# 2 0 2 1 P R E S E N T T Y P I A N E S I A S T D
Basic tipografi
dalam layout
untuk desain
# 2 0 2 1 P R E S E N T

Double Point Size

Merupakan metode cara untuk mendapatkan kontras dan hierarki pada bait Headline,
Subheadline dan content body text.

Main
44pt 30pt
Main Headline
2x Headline 22pt Subheadline
22pt Subheadline Lorem ipsum dolor sit amet,
14pt
2x Lorem ipsum dolor sit amet, consectetuer adipiscing consectetuer adipiscing elit. Aenean
elit. Aenean commodo ligula eget dolor. Aenean
commodo ligula eget dolor. Aenean
11pt massa. Cum sociis natoque penatibus et magnis dis
massa. Cum sociis natoque penatibus et.
parturient montes, nascetur ridiculus mus.
# 2 0 2 1 P R E S E N T

Skip Weight
Mengatur weight (ketebalan sebuah font). Sebaiknya menggunakan beda tingkat agar terlihat
kontras dan hierarkinya terlihat.

Medium Main Bold Main

Headline Medium
Regular
3x
Headline
Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer
Reguler Light
adipiscing elit. Aenean commodo ligula eget adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, penatibus et magnis dis parturient montes,
nascetur ridiculus mus. nascetur ridiculus mus.
# 2 0 2 1 P R E S E N T

Aligment & Relasi

Layout memiliki komposisi elemen yang saling berelasi atau ter-aligment
satu sama lainnya

Text Here Text Here

Text Here

Aligment Aligment
Relasi Relasi
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aenean consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean commodo ligula eget dolor. Aenean
Text Here
massa. Cum sociis natoque massa. Cum sociis natoque

Text Here Text Here

# 2 0 2 1 P R E S E N T

Proporsi Whitespace
Usahakan pengaturan whitespace lebih lega, proporsional, konsisten dan
sesuai konsep, agar terkesan eyecathing.

Bigger Bigger
Headline Headline
Tittle Tittle
PROPOSAL WHITESPACE PROPOSAL WHITESPACE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

commodo ligula eget dolor. Aenean massa. Cum sociis natoque commodo ligula eget dolor. Aenean massa. Cum sociis natoque
# 2 0 2 1 P R E S E N T

Body Text Rata Kiri

Pada paragraf sebaiknya menggunakan rata kiri untuk faktor readability dan spasi antar huruf
yang lebih natural. Hindari “bad rag/bad river” dengan ritme yang terlalu berantakan/kontras.

Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet, consectetuer
consectetuer adipiscing elit. Aenean
adipiscing elit. Aenean commodo ligula eget
commodo ligula eget dolor. Aenean
dolor. Aenean massa. Cum sociis natoque
massa. Cum sociis natoque
penatibus et magnis dis parturient montes,
penatibus et magnis dis parturient
nascetur ridiculus mus. Aenean massa.
montes, nascetur ridiculus mus.
# 2 0 2 1 P R E S E N T

Orphan & Widows

Dalam paragraf, Anda ingin menghindari satu kata sebagai baris terakhir paragraf dan satu baris teks di
awal atau akhir kolom atau halaman. Satu kata yang sepi di akhir paragraf menciptakan gangguan visual
dalam aliran yang merusak fokus pembaca. Ini disebut “runt".
# 2 0 2 1 P R E S E N T

Penata Body Justify

Justify dimana bentuk teks lebih rapi namun spasi antar teks menjadi tidak konsisten dan
terkesan manipulatif, dibuktikan dengan adanya river (gap). Sehingga mengurangi readability.

Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet, consectetuer
consectetuer adipiscing elit. Aenean
adipiscing elit. Aenean commodo ligula eget
commodo ligula eget dolor. Aenean
dolor. Aenean massa. Cum sociis natoque
massa. Cum sociis natoque penatibus
penatibus et magnis dis parturient montes,
et magnis dis parturient montes,
nascetur ridiculus mus. Aenean massa.
nascetur ridiculus mus.
# 2 0 2 1 P R E S E N T

Grouping & Separating

Komposisi pengaturan paragraf/tipografi yang memiliki grouping dan separating (pemisahan) yang jelas.
Kita bisa mengatur dan melihat kembali hierarki dari tipografi yang memiliki weigh dan kontras.

Profile Profile
Amelia Campa Amelia Campa
Graphic designer Graphic designer

+001 2345 6789

+001 2345 6789
www.worksans.com www.worksans.com
@worksans
@worksans
Tips tipografi in
Interface design
# 2 0 2 1 P R E S E N T

Limit number of font in use

Batasi jumlah font yang anda gunakan pada setiap paragraph dan text
pada layout, Gunakan maksimal 3 font.

Montserrat Typography Title

Montserrat Published 2 days ago
Work Sans Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque
# 2 0 2 1 P R E S E N T

Use contrasting fonts

Gunakan font yang kontras antara Headline dan body text pada paragraphy dan
layout design. Biasanya penggunaan antara Sans-serif & Serif.

Poppins Typography Title

PT Serif Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
# 2 0 2 1 P R E S E N T

Choose the proper font sizes

Pilih ukuran font yang tepat seperti penggunaan ukuran font pada headline,
subheadline dan bodytext menggunakan ukuran yang berbeda

44pt
Main Headline
22pt Subheadline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
11pt
commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
# 2 0 2 1 P R E S E N T

Limit amount of characters

Batasi jumlah karakter pada paragraph dan pada layout

40 60 90

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
# 2 0 2 1 P R E S E N T

Justify longer texts to the left

Ratakan text ke kiri kalau paragraphnya terlalu panjang, metode ini agar tingkat
keterbacaannya lebih baik daripada rata tengah

Left
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem.
Center
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem.
# 2 0 2 1 P R E S E N T

Use bigger line height

Gunakan tinggi garis yang lebih besar, metode ini juga agar tingkat
keterbacaannya lebih baik agar tidak terlalu berdekatan

Lorem ipsum dolor sit amet, consectetuer adipiscing

elit. Aenean commodo ligula eget dolor. Aenean massa.
PT Serif . 14pt . 1.0 Cum sociis natoque penatibus et magnis dis parturient

Lorem ipsum dolor sit amet, consectetuer adipiscing

PT Serif . 14pt . 1.5 elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient

Lorem ipsum dolor sit amet, consectetuer adipiscing

PT Serif . 14pt . 2.0 elit. Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient

# 2 0 2 1 P R E S E N T

Work with letter tracking

Gunakan tracking yang rasional, jangan terlalu dekat dan jangan terlalu panjang

Tracking -10
TypographyTitle
Tracking 0 Typography Title
Tracking 6 Typography Title
# 2 0 2 1 P R E S E N T

Choose already proven fonts

Pilih font yang sudah terbukti dan cocok, selain itu pilih font yang licensinya jelas agar
menghindari permasalahan / melanggar licensi. Gunakan Google Font

Work Sans PT Serif

Typography Title Typography Title

Roboto Lora

Typography Title Typography Title

Montserrat Libre Baskerville

Typography Title Typography Title