BÀI 4 Ký tự và biểu tượng trong TYPOGRAPHY - Giáo trình FPT

BÀI 4KÝ 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ế graphicTypography trên webSự khác biệt

Màu sắc & màu sắc trên webBố cục trong thiết kế webKhái niệm chống răng cưaNguyên tắc chọn & sử dụng kiểu chữ

Khái niệm về Typography:Typography cho thiết kế graphicTypography trên webSự khác biệt

Màu sắc & màu sắc trên webBố cục trong thiết kế webKhái niệm chống răng cưaNguyê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 webCá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)Các kiểu chữKý tự và font chữ mã hóa (encoding) trên webCá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)

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

Là biểu diễn thị giác của một ký tự hoặc biểu tượngtrong 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ủamột typeface (kiểu chữ) cụ thể luôn là duy nhấtKiểu chữ (Typeface) luôn có những đặc tính giốngnhau, có thể dùng để mô tả và tìm hiểu về cáchthức hoạt động của chúng.

Là biểu diễn thị giác của một ký tự hoặc biểu tượngtrong 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ủamột typeface (kiểu chữ) cụ thể luôn là duy nhấtKiểu chữ (Typeface) luôn có những đặc tính giốngnhau, có thể dùng để mô tả và tìm hiểu về cáchthức hoạt động của chúng.



X-height

Các thành phần trong ký tự

Ký tự(Character)

baselineCapheight


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 đườngthẳ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 (đường cơ sở):Tất cả các kiểu chữ đều được căn trên 1 đườngthẳ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ườngThường được sử dụng để định nghĩa đường trungtuyến (mean line)

X-height



Tất cả các ký tự đều rất đa dạng về kiểu mẫuCá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ườngDescender: nằm dưới đường cơ sở (baseline) của kýtự in thườngSpur, terminal, tail, bowl,…


Tất cả các ký tự đều rất đa dạng về kiểu mẫuCá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ườngDescender: nằm dưới đường cơ sở (baseline) của kýtự in thườngSpur, terminal, tail, bowl,…




Sự thể hiện mặc định của kiểu chữ là kiểu chữ bìnhthườ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)

Sự thể hiện mặc định của kiểu chữ là kiểu chữ bìnhthường (regular)Các kiểu biến đổi của kiểu chữ:



CÁC KIỂU CHỮ (TYPEFACE)

Monospace/proportional

Kiểu chữ

Serif/ San-serif

Kiểu họatiết

(dingbats)

CÁC KIỂU CHỮ

Phương pháp tốt nhất để phân loại typeface là dựavào cách sử dụng của chúng trong thiết kế. Kiểuchữ đượ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 để đọcTrình bày: sử dụng font hiển thị để gây chú ý chongười duyệt nội dungTrang trí: thường được sử dụng để trang trí thêm chokiểu chữ. Trong CSS, thường được sử dụng lệnhfantasy hoặc cursive

Phương pháp tốt nhất để phân loại typeface là dựavào cách sử dụng của chúng trong thiết kế. Kiểuchữ đượ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 để đọcTrình bày: sử dụng font hiển thị để gây chú ý chongười duyệt nội dungTrang trí: thường được sử dụng để trang trí thêm chokiểu chữ. Trong CSS, thường được sử dụng lệnhfantasy 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ềungang, khoảng không gian giữa các ký tự không thayđổiProportional: các ký tự chiếm gần hết không gianhiể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

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ềungang, khoảng không gian giữa các ký tự không thayđổiProportional: các ký tự chiếm gần hết không gianhiể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íadướ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

Kiểu serif/sans-serif:Serif: đường gạch chân, là họa tiết nhỏ trang trí phíadướ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ểuhọa tiết


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

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

Trong máy tính, ký tự là 1 dải bit hiển thị ra mànhình/ máy in/các thiết bị output khácKý 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ạnchọn chứa các ký tự để hiển thị nội dung

Trong máy tính, ký tự là 1 dải bit hiển thị ra mànhình/ máy in/các thiết bị output khácKý 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ạnchọn chứa các ký tự để hiển thị nội dung


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

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à địnhdạng Unicode (phù hợp với cả Tiếng Việt). Định dạngUnicode 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:

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à địnhdạng Unicode (phù hợp với cả Tiếng Việt). Định dạngUnicode 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ácphím Shift, Ctrl, Option (máy Mac) trên bàn phímTrên hệ điều hành có bao gồm chương trình duyệtký 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ớicông việc

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ớicô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-heightCác kiểu thể hiện của ký tự thường làm việc:


Sử dụng hệ thống font Unicode định dạng UTF-8 đểviết Tiếng Việt trên webNắm bắt cách sử dụng biểu tượng đặc biệt trong mãHTML

Các thành phần quan trọng trong bản chất của kýtự: baseline, cap height, x-heightCác kiểu thể hiện của ký tự thường làm việc:


Sử dụng hệ thống font Unicode định dạng UTF-8 đểviết Tiếng Việt trên webNắm bắt cách sử dụng biểu tượng đặc biệt trong mãHTML


Documents

BÀI 4 Ký tự và biểu tượng trong TYPOGRAPHY - Giáo trình FPT