Web2022 slide 4

BÀI 4
KÝ TỰ VÀ BIỂU TƯỢNG TRONG TYPOGRAPHY

NHẮC LẠI BÀI TRƯỚC
Khái niệm về Typography:
Typography cho thiết kế graphic
Typography trên web
Sự khác biệt
Màu sắc & màu sắc trên web
Bố cục trong thiết kế web
Khái niệm chống răng cưa
Nguyên tắc chọn & sử dụng kiểu chữ
Slide 4 - Ký tự và biểu tượng trong Typography 2

MỤC TIÊU BÀI HỌC
Bản chất của ký tự (character)
Các kiểu chữ
Ký tự và font chữ mã hóa (encoding) trên web
Cách sử dụng symbol (biểu tượng)
Các ký tự đặc biệt trong HTML

BẢN CHẤT CỦA KÝ TỰ
(CHARACTER)

Là biểu diễn thị giác của một ký tự hoặc biểu tượng
trong một bộ font, phân biệt với tất cả các ký tự
khác trong cùng bộ đó.
Văn bản được tạo ra từ các ký tự riêng lẻ, mỗi ký tự
này có hình dạng và ý nghĩa riêng.
Mọi ký tự và biểu tượng trong danh mục ký tự của
một typeface (kiểu chữ) cụ thể luôn là duy nhất
Kiểu chữ (Typeface) luôn có những đặc tính giống
nhau, có thể dùng để mô tả và tìm hiểu về cách
thức hoạt động của chúng.

Ký tự
(Character)
X-height
baseline
Cap
height
Các thành phần trong ký tự

Baseline (đường cơ sở):
Tất cả các kiểu chữ đều được căn trên 1 đường
thẳng.
Baseline thường là đường thẳng ngang cắt ngang bề
mặt hiển thị
Có thể là đường thẳng hoặc đường cong
Baseline dạng đường thẳng

Cap height:
Chiều cao tính từ điểm cao nhất của chữ in hoa tới
đường baseline
Cap height

X-height:
Chiều cao của ký tự chữ in thường
Thường được sử dụng để định nghĩa đường trung
tuyến (mean line)
X-height

Tất cả các ký tự đều rất đa dạng về kiểu mẫu
Các thành phần mở rộng của kiểu ký tự:
Ascender: nằm trên đường trung tuyến (mean line)
của ký tự in thường
Descender: nằm dưới đường cơ sở (baseline) của ký
tự in thường
Spur, terminal, tail, bowl,…

Sự thể hiện mặc định của kiểu chữ là kiểu chữ bình
thường (regular)
Các kiểu biến đổi của kiểu chữ:
Kiểu chữ bình thường (regular)
Kiểu in đậm (weight)
Kiểu in nghiêng (italic & obliques)
KIỂU IN HOA (SMALL CAPS)

CÁC KIỂU CHỮ (TYPEFACE)
Kiểu chữ
Monospace/
proportional
Serif/ San-
serif
Kiểu họa
tiết
(dingbats)

CÁC KIỂU CHỮ
Phương pháp tốt nhất để phân loại typeface là dựa
vào cách sử dụng của chúng trong thiết kế. Kiểu
chữ được phân chia thành ba nhóm chính―hiển thị
nội dung, trình bày và trang trí.:
Hiển thị nội dung: kiểu chữ thường được sử dụng để
hiển thị độ lớn cần thiết để đọc
Trình bày: sử dụng font hiển thị để gây chú ý cho
người duyệt nội dung
Trang trí: thường được sử dụng để trang trí thêm cho
kiểu chữ. Trong CSS, thường được sử dụng lệnh
fantasy hoặc cursive

CÁC KIỂU CHỮ
Kiểu monospace/proportional:
Monospace hay còn gọi là cố định chiều dài (fixed-
width): các ký tự chiếm hầu hết không gian chiều
ngang, khoảng không gian giữa các ký tự không thay
đổi
Proportional: các ký tự chiếm gần hết không gian
hiển thị, khoảng không gian giữa các ký tự sẽ thay
đổi để tối ưu nhất cho việc dễ đọc

CÁC KIỂU CHỮ
Kiểu serif/sans-serif:
Serif: đường gạch chân, là họa tiết nhỏ trang trí phía
dưới ký tự
Font Sans-serif: không sử dụng nét gạch để trang trí
Một số kiểu họa tiết chân serif

CÁC KIỂU CHỮ
Kiểu họa tiết (dingbat): một số font có chứa kiểu
họa tiết

KÝ TỰ VÀ FONT CHỮ MÃ HÓA (ENCODING)
TRÊN WEB

Trong máy tính, ký tự là 1 dải bit hiển thị ra màn
hình/ máy in/các thiết bị output khác
Ký tự mã hóa (encoding)/font mã hóa (encoding) là
hệ thống ký tự mà máy tính cần để hiển thị
Khi thiết kế web cần chắc chắn rằng font mà bạn
chọn chứa các ký tự để hiển thị nội dung

Unicode vs ISO Latin-1:
Ký tự mã hóa (encoding) được phát triển từ mã
ASCII, Mac OS Roman
Đối với web, hệ thống mã hóa (encoding) là định
dạng Unicode (phù hợp với cả Tiếng Việt). Định dạng
Unicode thường sử dụng hiện nay là UTF-8
Cài đặt font ISO Latin-1:
Cài đặt font mã hóa (encoding) cho web:
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>

CÁCH SỬ DỤNG SYMBOL (BIỂU TƯỢNG)

CÁCH SỬ DỤNG SYMBOL
Một số biểu tượng ẩn, phải sử dụng thông qua các
phím Shift, Ctrl, Option (máy Mac) trên bàn phím
Trên hệ điều hành có bao gồm chương trình duyệt
ký tự giúp bạn có thể xem trước ký tự/biểu tượng
để chèn, đó là chương trình Character Viewer

CÁCH SỬ DỤNG SYMBOL
Có rất nhiều biểu tượng được chèn trong file HTML,
được viết giữa dấu & và dấu ; - ví dụ như: —

KÝ TỰ ĐẶC BIỆT TRONG HTML

Trong HTML có thể sử dụng những ký tự đặc biệt để
thể hiện tên hoặc số,…
Cần chú ý lựa chọn biểu tượng đúng, phù hợp với
công việc

Một số biểu tượng thường sử dụng trong mã HTML:

TỔNG KẾT
Các thành phần quan trọng trong bản chất của ký
tự: baseline, cap height, x-height
Các kiểu thể hiện của ký tự thường làm việc:
Kiểu chữ bình thường (regular)
Kiểu in đậm (weight)
Kiểu in nghiêng (italic & obliques)
KIỂU IN HOA (SMALL CAPS)
Sử dụng hệ thống font Unicode định dạng UTF-8 để
viết Tiếng Việt trên web
Nắm bắt cách sử dụng biểu tượng đặc biệt trong mã
HTML

Web2022 slide 4

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to Web2022 slide 4 (13)

More from tuanduongcntt (20)

Web2022 slide 4