Web2022 slide 6

BÀI 6:
TỶ LỆ & NHỊP ĐIỆU TRONG TYPOGRAPHY

NHẮC LẠI BÀI TRƯỚC
Tổng quan về việc sử dụng font trên web:
Lựa chọn font
Phân loại font family trong CSS
Định rõ kiểu chữ với CSS
Web font an toàn ( web safe font)
Liên kết font web
Dịch vụ liên kết font web văn phòng
Nhúng font web với javascript
Những giải pháp để sử dụng font trên web
Slide 6 - Tỷ lệ nhịp điệu trong Typography 2

MỤC TIÊU BÀI HỌC
Hệ thống đo lường web
Kích thước chữ và chiều cao dòng
Khoảng cách chữ
Căn lề văn bản
Casestudy

HỆ THỐNG ĐO LƯỜNG WEB
Khoảng cách dòng và căn lề
giúp người đọc hiểu rõ bố cục
cũng như độ dài của văn bản
Kích thước và khoảng cách tạo
nên kết cấu, sự trôi chảy cho
văn bản, nâng cao tính dễ
đọc, đồng thời làm rõ thêm
thông điệp muốn truyền tải

Pixel: Là phần tử thông tin
nhỏ nhất của ảnh được hiển
thị trên màn hình, sắp xếp
dưới dạng một chuỗi dấu
chấm hoặc hình chữ nhật
trong một ô lưới hai chiều
Các pixel kết hợp với nhau
theo màu đỏ, xanh lá cây và
xanh da trời ở cường độ khác
nhau để tạo ra hàng nghìn
hoặc hàng triệu màu sắc khác
nhau

Kiểu đơn vị tương đối và tuyệt đối:
Các đơn vị giá trị tuyệt đối
Các đơn vị giá trị tương đối

Các đơn vị giá trị tuyệt đối:
• Dùng để điều khiển kích thước chính xác,
• Bất biến, không phụ thuộc vào kích thước màn hình,
trình duyệt cũng như hệ điều hành sử dụng.
• Lưu ý, đơn vị tuyệt đối trên các máy tính có thể khác
nhau, thường do sự thiếu nhất quán giữa các hệ điều
hành.
• Ví dụ, kích thước point trong hệ điều hành Mac khác
với kích thước point trong hệ điều hành Windows

• Dùng để điều khiển kích thước chính xác
• Bất biến, không phụ thuộc vào kích thước màn hình,
trình duyệt cũng như hệ điều hành sử dụng.
• Lưu ý, đơn vị tuyệt đối trên các máy tính có thể khác
nhau, thường do sự thiếu nhất quán giữa các hệ điều
hành.
• Ví dụ, kích thước point trong hệ điều hành Mac khác
với kích thước point trong hệ điều hành Windows.

Các đơn vị giá trị tương đối:
• Không có kích thước cố định, kích thước đó được tính
toán tương đối so với một giá trị khác
• Tuy kém chính xác, giá trị tương đối có thể thay đổi
hoặc thu phóng nhanh chóng mà không cần phải tính
toán lại tất cả những giá trị phụ thuộc khác.
• Ví dụ, nếu sử dụng giá trị tương đối để thiết lập cỡ
font và chiều cao dòng hiển thị, bạn chỉ cần thay đổi
cỡ font, chiều cao dòng sẽ tự động thay đổi tương
ứng.

Các đơn vị giá trị tương đối:

Sử dụng đơn vị point trong in ấn
nhưng không sử dụng cho màn
hình:
Thiết lập độ phân giải màn hình
giữa Mac và Windows thiếu sự đồng
nhất.
Với hệ điều hành Mac, độ phân giải
màn hình được hiểu là 72 dpi,
tương đương với 72 point/inch
Hệ điều hành Windows, máy tính
hiểu độ phân giải màn hình là 96
dpi.

Sử dụng đơn vị pixel để
điều khiển độ chính xác,
nhưng đơn vị này lại hạn
chế điều khiển của người
dùng
Sử dụng đơn vị em và
phần trăm để thiết kế
trang web linh động

Phần mềm Em Calculator

KÍCH THƯỚC CHỮ VÀ CHIỀU CAO DÒNG

Trong thiết kế Web, kích thước chữ được thiết lập thông
qua hai thuộc tính CSS:
Font là cách rút gọn cho phép thiết lập cùng lúc một số giá
trị font khác nhau
font-size chỉ dùng để thiết lập kích thước.
Khoảng cách giữa các dòng trong một khối văn bản cũng
có thể được thiết lập trong thuộc tính font hoặc sử dụng
thuộc tính line-height

Chiều cao của một typeface được tính từ chiều cao đỉnh
(chiều cao của ký tự in hoa cao nhất) tới phần dưới

Độ rộng của một ký tự chỉ đơn giản là độ rộng hiển thị
cộng với các khoảng trống bên cạnh.
Khoảng trống của các ký tự có thể rất khác nhau và có
thể được kerned (giãn cách tự động)

Thiết lập cỡ font với từ khóa
absolute để đạt sự thống nhất và
tránh sử dụng từ khóa relative:
Các từ khóa kích thước tuyệt đốI
(absolute )—xx-small, x-small,
small, medium, large, x-large và
xx-large
Các từ khóa kích thước tương đốI
(relative)—smaller và larger

Thiết lập kích thước chữ bằng tỷ lệ trong typography
linh động:
Kích thước mặc định của văn bản trong trình duyệt Web
là medium hay 16px
Thay vì thiết lập riêng từng cỡ font, tốt hơn hết là thiết
lập một tỷ lệ.

Đặt kích thước cho tiêu đề và phần văn bản body để cải
thiện tính dễ đọc cùng khả năng đọc lướt:
Kích thước của các tiêu đề thường từ 18 tới 32 pixel
Một quy tắc thường được áp dụng là cỡ font lớn nhất cho phần
tiêu đề thường lớn hơn hoặc bằng hai lần so với cỡ font của
phần văn bản body

Chọn chiều cao dòng để phần văn bản body có khoảng
trống phù hợp:
chiều cao dòng không phải là khoảng trống giữa các
dòng văn bản
Đối với các phần văn bản body mở rộng, tỷ lệ cỡ font so
với chiều cao dòng nên là 2:3:

Chọn độ rộng cột để thu hút người đọc:
Một lưu ý quan trọng về tính dễ đọc của văn bản là độ
rộng cột
Độ rộng cột phù hợp có thể được suy ra dễ dàng từ cỡ
font cơ bản của trang Web

KHOẢNG CÁCH CHỮ
Letterspacing không phải là
kerning:
Kerning hiệu chỉnh khoảng cách tự
động giữa các ký tự trong một font tỷ
lệ;
khoảng cách này thay đổi tùy vào tổ
hợp của những cặp ký tự khác nhau,
sao cho cặp ký tự đó kết hợp với nhau
một cách tối ưu, dựa trên hệ tọa độ
của chính bộ font đó

Sử dụng letterspacing hoặc giãn cách từ để tạo hiệu
ứng, nhưng không nên lạm dụng:
Cả khoảng cách ký tự (letterspacing) và giãn cách từ
(word spacing) đều là các công cụ typography thô sơ để
thêm khoảng cách mà không quan tâm tới văn bản cụ thể

Thiết lập letterspacing cho các từ viết tắt in hoa và từ
tóm lược:
Một vị trí thường phải thiết lập letterspacing là trong từ
viết tắt và từ tóm lược

Sử dụng dấu lùi đầu dòng (indent) hoặc khoảng trống
giữa các đoạn văn, nhưng không phải cả hai:
Khi Web mới ra đời, không có cách nào để đặt indent cho
một đoạn văn bản, và nhiều khoảng trống được thu gọn
lại thành một khoảng trống duy nhất
CSS đã hỗ trợ tính năng indent cho đoạn văn

CĂN LỀ VĂN BẢN
Thiết lập căn lề văn bản cho phần body để hạn chế
chỗ trống và tối ưu hóa khả năng đọc lướt:
Căn lề vuông thường được xem là trang trọng và có
tính cấu trúc hơn
Căn lề vuông giúp củng cố cấu trúc ô lưới của trang
Web
Căn lề trái tạo ra khoảng trắng cho lề phải của người
đọc, làm giao diện của toàn bộ trang trông dịu mắt
hơn.

Sử dụng văn bản được căn giữa hoặc căn vuông
phải để tạo hiệu ứng và sự khác biệt:
Không căn phải hoặc căn giữa đối với các danh sách
được đánh thứ tự hoặc đánh dấu đầu dòng
Căn giữa cho các section hoặc các nhan đề/tiêu đề
nếu muốn trang Web trông khác biệt.
Căn lề phải cho văn bản ở cột bên trái của trang hoặc
bảng nếu điều đó giúp chỉ rõ mối quan hệ giữa các
phần tử trong những cột lân cận.

Tăng khoảng cách lề đối với những đoạn trích dẫn
dài hơn và định kiểu cho các lời trích dẫn:
Thẻ blogquote được sử dụng để thiết lập một khối
văn bản trích dẫn, thường bao gồm từ hai dòng văn
bản trở lên

Thiết lập các chú thích chân trang và ký hiệu khoa
học hay ký hiệu toán học bằng định vị ký tự thay vì
căn chỉnh dọc

Tỷ lệ nhịp điệu trong Typography 37

TỔNG KẾT
Pixel: Là phần tử thông tin nhỏ nhất của ảnh được hiển
thị trên màn hình
2 Kiểu đơn vị tương đối và tuyệt đối:
Các đơn vị giá trị tuyệt đối
Các đơn vị giá trị tương đối
Sử dụng đơn vị point trong in ấn nhưng không sử dụng
cho màn hình
Letterspacing không phải là kerning
Thiết lập căn lề văn bản cho phần body để hạn chế chỗ
trống và tối ưu hóa khả năng đọc lướt

Web2022 slide 6

More Related Content

What's hot (18)

Similar to Web2022 slide 6 (20)

More from tuanduongcntt (20)

Web2022 slide 6