{"id":1138,"date":"2015-06-18T08:15:42","date_gmt":"2015-06-18T01:15:42","guid":{"rendered":"https:\/\/toihocdohoa.com\/blog\/?p=1138"},"modified":"2015-08-30T11:35:23","modified_gmt":"2015-08-30T04:35:23","slug":"typography-phan-3-phan-biet-font-vs-typeface-cac-ho-typeface-co-ban","status":"publish","type":"post","link":"https:\/\/toihocdohoa.com\/blog\/typography-phan-3-phan-biet-font-vs-typeface-cac-ho-typeface-co-ban\/","title":{"rendered":"Typography c\u01a1 b\u1ea3n #3 – Type, Face, fFont …v\u00e0 g\u00ec n\u1eefa ?"},"content":{"rendered":"\n\n
\n \n
\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n<\/div>\n \n\n
\n 5\/5 - (8 votes) <\/div>\n <\/div>\n

Kho\u1ea3ng bao nhi\u00eau ng\u01b0\u1eddi tr\u00ean th\u1ebf gi\u1edbi \u0111ang s\u1eed d\u1ee5ng font ch\u1eef m\u1ed7i ng\u00e0y nh\u1ec9? R\u1ea5t nhi\u1ec1u \u0111\u00fang kh\u00f4ng. C\u00f2n b\u1ea1n th\u00ec sao ? N\u1ebfu s\u1eed d\u1ee5ng m\u1ed7i ng\u00e0y\u00a0th\u00ec\u00a0b\u1ea1n c\u00f3 hi\u1ec3u font ch\u1eef l\u00e0 g\u00ec kh\u00f4ng? N\u1ebfu b\u1ea1n l\u00e0 m\u1ed9t designer, m\u00ecnh tin ch\u1eafc s\u1ebd c\u00f3 l\u00fac b\u1ea1n nh\u1ea7m l\u1eabn font, type-face, type-style hay type-family … Ch\u1eb3ng sao c\u1ea3, r\u1ed3i b\u1ea1n s\u1ebd hi\u1ec3u ngay trong v\u00e0i ph\u00fat t\u1edbi \u0111\u00e2y th\u00f4i.<\/p>\n

\"type-all\"<\/p>\n

Type<\/h2>\n

Trong thi\u1ebft k\u1ebf type \u0111\u01b0\u1ee3c\u00a0hi\u1ec3u l\u00e0 con ch\u1eef<\/strong>. Giai \u0111o\u1ea1n s\u1eed d\u1ee5ng c\u00e1c ph\u01b0\u01a1ng ph\u00e1p in \u1ea5n b\u1eb1ng c\u00e1ch gh\u00e9p c\u00e1c khu\u00f4n ch\u1eef b\u1eb1ng kim lo\u1ea1i hay g\u1ed7, type \u0111\u01b0\u1ee3c hi\u1ec3u l\u00e0 c\u00e1c khu\u00f4n ch\u1eef \u0111\u00f3. Ng\u00e0y nay \u0111\u1ecbnh ngh\u0129a \u0111\u00f3 m\u1edf r\u1ed9ng l\u00ean c\u00e1c con ch\u1eef k\u1ef9 thu\u1eadt s\u1ed1 tr\u00ean m\u00e1y t\u00ednh.\u00a0B\u00e2y gi\u1edd ch\u00fang ta s\u1ebd c\u00f9ng nghi\u00ean c\u1ee9u v\u1ec1 c\u00e1c th\u00e0nh ph\u1ea7n li\u00ean quan \u0111\u1ebfn type.<\/p>\n

\"c\u00e1c
c\u00e1c type-style c\u01a1 b\u1ea3n<\/figcaption><\/figure>\n

Type-style<\/h2>\n

Type-style l\u00e0 c\u00e1c bi\u1ebfn th\u1ec3 kh\u00e1c nhau c\u1ee7a c\u00e1c type trong c\u00f9ng m\u1ed9t\u00a0type-face.<\/p>\n

V\u00ed d\u1ee5: 5\u00a0type-style c\u1ee7a arial-face l\u00e0 roman, italic, bold, bold italic.<\/p>\n

Character angle\u00a0–\u00a0\u0111\u1ed9 nghi\u00eang
\n<\/b>Type-style c\u01a1 b\u1ea3n nh\u1ea5t c\u1ee7a type-face l\u00e0 roman. M\u1ed9t type-style kh\u00e1c m\u00f4 t\u1ea3 \u0111\u1ed9 nghi\u00eang\u00a0ch\u00ednh l\u00e0 italic<\/strong>. C\u00f3 m\u1ed9t thu\u1eadt ng\u1eef kh\u00e1c th\u01b0\u1eddng th\u1ea5y\u00a0l\u00e0 Oblique<\/strong>. V\u1ec1 c\u01a1 b\u1ea3n th\u00ec 2 t\u1eeb n\u00e0y \u0111\u1ec1u ch\u1ec9 v\u1ec1 c\u00e1c type-style nghi\u00eang, tuy nhi\u00ean\u00a0s\u1ebd c\u00f3 m\u1ed9t ch\u00fat kh\u00e1c bi\u1ec7t. N\u1ebfu b\u1ea1n quan t\u00e2m th\u00ec ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u k\u1ef9 h\u01a1n \u1edf m\u1ed9t b\u00e0i vi\u1ebft kh\u00e1c.<\/p>\n

Character weight\u00a0–\u00a0\u0111\u1ed9 \u0111\u1eadm
\n<\/b>H\u1ea7u h\u1ebft c\u00e1c type-face \u0111\u1ec1u c\u00f3 type-style bold v\u00e0 bold italic. M\u1ed9t s\u1ed1 type-face bao g\u1ed3m\u00a0nhi\u1ec1u m\u1ee9c \u0111\u1ed9 \u0111\u1eadm kh\u00e1c nhau nh\u01b0: light, medium, semibold (demibold), extrabold hay black.<\/p>\n

Character width – \u0111\u1ed9 r\u1ed9ng ngang
\n<\/b>M\u1ed9t s\u1ed1 type-face c\u00f3 th\u00eam type-style\u00a0\u0111\u1ed9 r\u1ed9ng ngang \u0111\u01b0\u1ee3c \u0111\u1eb7t t\u00ean l\u00e0\u00a0condensed ho\u1eb7c extended.<\/p>\n

Font<\/h2>\n

Font l\u00e0 m\u1ed9t b\u1ed9 character b\u1eb1ng kim lo\u1ea1i ho\u1eb7c g\u1ed7 trong\u00a0m\u1ed9t type-face, c\u00f3 c\u00f9ng\u00a0type-style v\u00e0 c\u00f3\u00a01\u00a0k\u00edch th\u01b0\u1edbc\u00a0duy nh\u1ea5t<\/strong>. Tuy nhi\u00ean \u0111\u1ecbnh ngh\u0129a n\u00e0y ch\u1ec9 ph\u00f9 h\u1ee3p trong giai \u0111o\u1ea1n\u00a0in \u1ea5n ch\u1ebf b\u1ea3n th\u1ee7 c\u00f4ng.<\/p>\n

V\u00ed d\u1ee5: font-arial-8pt\u00a0v\u00e0 font-arial-10pt l\u00e0 hai font kh\u00e1c nhau, c\u0169ng nh\u01b0 arial-bold v\u00e0 arial-Italic c\u0169ng l\u00e0 hai font kh\u00e1c nhau.<\/p>\n

K\u1ef7 nguy\u00ean k\u1ef9 thu\u1eadt s\u1ed1 v\u1edbi s\u1ef1 ra \u0111\u1eddi c\u1ee7a font m\u00e1y t\u00ednh th\u00ec \u0111\u1ecbnh ngh\u0129a c\u1ee7a font c\u0169ng c\u00f3 ch\u00fat thay \u0111\u1ed5i.\u00a0Vi\u1ec7c thay \u0111\u1ed5i k\u00edch c\u1ee1 c\u1ee7a m\u1ed9t font\u00a0ch\u1eef tr\u00ean m\u00e1y t\u00ednh tr\u1edf n\u00ean r\u1ea5t \u0111\u01a1n gi\u1ea3n, c\u00e1c font l\u00e0m b\u1edfi \u0111\u1ecbnh d\u1ea1ng vector c\u00f3 th\u1ec3 ph\u00f3ng to thu nh\u1ecf tu\u1ef3 \u00fd. Ch\u00ednh v\u00ec v\u1eady, \u0111\u1ecbnh ngh\u0129a v\u1ec1 font thay \u0111\u1ed5i th\u00e0nh “font l\u00e0 m\u1ed9t\u00a0b\u1ed9 character trong\u00a0m\u1ed9t type-face, n\u00f3 c\u00f3 c\u00f9ng\u00a0type-style v\u00e0 g\u1ed3m nhi\u1ec1u k\u00edch th\u01b0\u1edbc<\/strong>“<\/strong>.<\/p>\n

V\u00ed d\u1ee5: font Arial 8pt\u00a0v\u00e0 Arial-10pt b\u00e2y gi\u1edd l\u00e0 thu\u1ed9c c\u00f9ng 1 font, v\u00e0\u00a0Arial Bold v\u00e0 Arial Italic s\u1ebd\u00a0l\u00e0 hai font kh\u00e1c nhau.<\/p>\n

\"M\u1ed9t
M\u1ed9t s\u1ed1 type-face th\u01b0\u1eddng s\u1eed d\u1ee5ng<\/figcaption><\/figure>\n

Type-face<\/h2>\n

Type-face l\u00e0 b\u1ed1 c\u1ee7a font, n\u00f3\u00a0bao g\u1ed3m nhi\u1ec1u font.<\/p>\n

V\u00ed d\u1ee5: type-face Arial s\u1ebd bao g\u1ed3m: font arial-bold, font arial-italic, font arial …<\/p>\n

 <\/p>\n

Type-family<\/h2>\n

Type-family l\u00e0 b\u1ed1 c\u1ee7a type-face.\u00a0M\u1ed9t type-family c\u00f3 th\u1ec3 ch\u1ee9a nhi\u1ec1u bi\u1ebfn th\u1ec3, nh\u01b0ng s\u1ebd lu\u00f4n lu\u00f4n c\u00f3 c\u00e1c d\u1ea5u hi\u1ec7u nh\u1eadn bi\u1ebft d\u1ef1a tr\u00ean nh\u1eefng \u0111\u1eb7c \u0111i\u1ec3m thi\u1ebft k\u1ebf chung. (V\u00ed d\u1ee5: Helvetica ch\u00ednh l\u00e0 m\u1ed9t type-family, Helvetica-family<\/a> bao g\u1ed3m nhi\u1ec1u type-face nh\u01b0\u00a0helvetica-neune, helvetica-LT, helvetica-rounded …)\u00a0<\/span>\u0110i\u1ec1u n\u00e0y cho ph\u00e9p c\u00e1c designer duy tr\u00ec s\u1ef1 \u0111\u1ed3ng nh\u1ea5t c\u1ee7a thi\u1ebft k\u1ebf typography tr\u00ean s\u1ea3n ph\u1ea9m nh\u01b0ng kh\u00f4ng b\u1ecb nh\u00e0m ch\u00e1n, b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng nhi\u1ec1u type-face\/type-style \u1edf c\u00f9ng m\u1ed9t b\u1ed9 type-family.<\/p>\n

Kh\u00e1i ni\u1ec7m Type-family \u0111\u01b0\u1ee3c l\u00e0m s\u00e1ng t\u1ecf khi b\u1ed9 Stone-family<\/a><\/strong>\u00a0ra \u0111\u1eddi v\u00e0o\u00a0th\u1eadp ni\u00ean 1980. Stone-family bao g\u1ed3m 3 type-face:<\/p>\n