Có thể bài “Hướng dẫn Typography” với Siêng mất vài ngày để viết nhưng với rất nhiều bạn mới bắt đầu thì đó là kiến thức mà cần vài năm mày mò, vài năm làm sai, vài năm rút kinh nghiệm đúc kết như chính con đường mà Siêng đã trải qua. Dù biết rằng ai rồi cũng phải đi qua những đoạn đường khó, những tháng ngày chim non tập bay nhưng nếu ban đầu lĩnh hội một nền tảng chuẩn mực, một hệ thống các nguyên tắc căn bản (như bảng cửu chương) thì ngày tháng trở thành đại bàn sẽ nhanh và sớm sải cánh vươn cao. Hy vọng, tài liệu này sẽ giúp mọi người có cách làm tốt hơn với Typography
Typography là từ ghép bởi “Typo” “và graphic” để mô tả nghệ thuật sắp đặt và kỹ thuật ghép chữ trong in ấn. Typography là sự kết hợp khéo léo nghệ thuật giữa typefaces, point size, line length, leading (line spacing), letter-spacing (tracking). Nhằm đem lại cho người xem cảm giác dễ đọc nhất, nổi bật nội dung, và truyền tải được ý đồ của người thiết kế tới người đọc. (Nguồn: idesign). Typography còn là bất cứ thứ gì mà chúng ta “đọc” được nên việc nắm các nguyên tắc cơ bản sẽ giúp bạn viết content và design hình ảnh hiệu quả hơn rất rất nhiều.
Vậy hãy cùng Siêng học Typography với hình ảnh dễ hiểu bên dưới nhá
1. Typography Facebook, Instagram
Viết hoa trong văn bản
![Viết hoa trong văn bản bài viết trên Facebook](https://d1a5qa30unwvcp.cloudfront.net/2021/5/576a77a0-c1c7-11eb-bd24-35e9adabf8c8.png)
Ký tự, biểu tượng (icon) trong bài đăng
![](https://d1a5qa30unwvcp.cloudfront.net/2021/5/57bcb650-c1c7-11eb-bd24-35e9adabf8c8.png)
![Có thể là hình ảnh về văn bản](https://scontent-hkg4-1.xx.fbcdn.net/v/t1.6435-9/186535775_1697792290431126_400776753609758829_n.png?_nc_cat=108&ccb=1-3&_nc_sid=0debeb&_nc_ohc=AwhdaqzOeC0AX8hvgQ2&_nc_ht=scontent-hkg4-1.xx&oh=241cb6f2ab4dbbd77af840f59597ab87&oe=60DA7675)
Sử dụng công cụ hiệu ứng chữ
![Sử dụng công cụ hiệu ứng chữ](https://d1a5qa30unwvcp.cloudfront.net/2021/5/57e6ac80-c1c7-11eb-bd24-35e9adabf8c8.png)
Hashtag trong văn bản bài viết
![Hashtag trong văn bản bài viết trên Facebook, Instagram](https://d1a5qa30unwvcp.cloudfront.net/2021/5/588d73d0-c1c7-11eb-bd24-35e9adabf8c8.png)
![hashtag Không có khoảng cách phân biệt, rối mắt](https://d1a5qa30unwvcp.cloudfront.net/2021/5/58d15aa0-c1c7-11eb-bd24-35e9adabf8c8.png)
![](https://d1a5qa30unwvcp.cloudfront.net/2021/5/59418190-c1c7-11eb-bd24-35e9adabf8c8.png)
2. Typography cho web
Chiều cao giữa các dòng
![Chiều cao giữa các dòng khi viết contrent trên web](https://d1a5qa30unwvcp.cloudfront.net/2021/6/45efa540-c352-11eb-bd24-35e9adabf8c8.png)
Tiêu đề đoạn văn
![Tiêu đề đoạn văn trên web và Group Facebook](https://d1a5qa30unwvcp.cloudfront.net/2021/5/59ff0530-c1c7-11eb-bd24-35e9adabf8c8.png)
![Tiêu đề đoạn văn trên web và Group Facebook](https://d1a5qa30unwvcp.cloudfront.net/2021/6/c5fae1a0-c352-11eb-bd24-35e9adabf8c8.png)
Kiểu font trên web mobile
![Kiểu font trên web mobile có chân (Serif) và không chân (San-serif)](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5a90bde0-c1c7-11eb-bd24-35e9adabf8c8.png)
Căn chỉnh (Align) trái, phải và đều 2 bên
![Căn chỉnh (Align) trái, phải và canh đều 2 bên của nội dung chi tết](https://d1a5qa30unwvcp.cloudfront.net/2021/5/11cee530-c1e7-11eb-bd24-35e9adabf8c8.png)
![Căn chỉnh (Align) trái, phải và canh đều khi viết content trên web](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5b161a80-c1c7-11eb-bd24-35e9adabf8c8.png)
Khoảng Trắng (whitespace)
![Khoảng Trắng (whitespace) khi viết content trên website](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5b63c550-c1c7-11eb-bd24-35e9adabf8c8.png)
In đậm chữ (bold)
![In đậm chữ (bold) khi viết content trên web](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5baeff20-c1c7-11eb-bd24-35e9adabf8c8.png)
Màu sắc (color)
![Màu sắc (color)](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5be7c260-c1c7-11eb-bd24-35e9adabf8c8.png)
Chú thích hình ảnh
![Chú thích hình ảnh Màu và kích thướt của chú thích ảnh](https://d1a5qa30unwvcp.cloudfront.net/2021/6/ef89c450-c352-11eb-bd24-35e9adabf8c8.png)
![Chú thích hình ảnh Vị trí của chú thích hình ảnh nên đặt](https://d1a5qa30unwvcp.cloudfront.net/2021/6/efa33fc0-c352-11eb-bd24-35e9adabf8c8.png)
![](https://d1a5qa30unwvcp.cloudfront.net/2021/6/efe15a30-c352-11eb-bd24-35e9adabf8c8.png)
Định dạng chữ của bài viết
![Định dạng chữ của bài viết](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5c1e14a0-c1c7-11eb-bd24-35e9adabf8c8.png)
3. Typography khi design ảnh
Độ tương phản của chữ
![Độ tương phản của chữ khi thiết kế hình ảnh](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5c5ea010-c1c7-11eb-bd24-35e9adabf8c8.png)
![](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5d73b990-c1c7-11eb-bd24-35e9adabf8c8.png)
Vị trí của chữ
![Độ tương phản của chữ khi thiết kế hình ảnh](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5d5c6100-c1c7-11eb-bd24-35e9adabf8c8.png)
Tỷ lệ chữ
![Tỷ lệ chữ khi thiết kế hình ảnh](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5e1e0350-c1c7-11eb-bd24-35e9adabf8c8.png)
Số lượng Kiểu chữ
![Số lượng Kiểu chữ khi thiết kế hình ảnh](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5e1e0350-c1c7-11eb-bd24-35e9adabf8c8.png)
Khoảng trắng và khoảng cách chữ
![Khoảng trắng và khoảng cách chữ khi thiết kế hình ảnh](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5e93f6a0-c1c7-11eb-bd24-35e9adabf8c8.png)
![](https://d1a5qa30unwvcp.cloudfront.net/2021/5/5e999bf0-c1c7-11eb-bd24-35e9adabf8c8.png)
————————–
P.s: Tài liệu này được viết bởi team Brandee với lòng nhiệt thành và cái tâm mong muốn giúp ích cộng đồng nhưng chỉ vài con người thì vẫn không bao quát hết, thậm chí vẫn sẽ có sự thiếu sót ngoài mong muốn. Nếu có điều gì chưa tốt mong nhận được góp ý và bổ sung chân thành từ bạn đọc. Để tài liệu này sẽ là nguồn tham khảo vô giá cho một thế hệ trẻ sau này vững vàng hơn bao giờ hết.
Xin chân thành cảm ơn!