#typography

I still like writing websites by hand

Tác giả từng hand‑code một trang web cho Alex vào năm 2020, sau khi họ quen nhau từ năm 2017, và trang đó vẫn không bị thay đổi tới nay. Ông chọn viết bằng HTML thuần, CSS và vanilla JavaScript, không dùng bất kỳ framework hoặc công cụ build nào, nhằm tối ưu độ đơn giản và khả năng duy trì lâu dài. Sau hơn ba năm, trang web vẫn hoạt động ổn định mà không cần cập nhật, cho thấy việc tránh phụ thuộc vào thư viện bên thứ ba giảm thiểu rủi ro lỗi và công việc bảo trì. Điều này cho thấy khi mục tiêu là một trang web tĩnh thay đổi hiếm, việc hand‑code giúp kiểm soát hoàn toàn mã nguồn, giảm kích thước tải và dễ dàng di chuyển giữa các host. Bài viết nhắc nhở lập trình viên cân nhắc trade‑off giữa tốc độ phát triển bằng framework và lợi ích lâu dài của mã nguồn hand‑written, đặc biệt cho các dự án có thời gian sống dài.

Bài viết này giúp bạn hiểu được giá trị của việc viết website thủ công trong kỷ nguyên framework hiện đại.

Death to px, long live ch!

Bài viết chỉ ra rằng khái niệm pixel trong CSS không phản ánh thực tế vì màn hình hiện đại không có lưới vuông hoàn hảo và 1px có thể bao gồm nhiều điểm vật lý trên màn hình độ phân giải cao. Tuy nhiên, vì 1px được định nghĩa là một góc nhìn cụ thể (1/96 inch) và đượcScale theo độ phân thiết bị, nó không luôn tương ứng với một điểm vật lý, dẫn đến sự sai lệch khi thiết kế “pixel perfect”. Tác giả khuyên thay vì dựa vào px, nhà phát triển nên sử dụng đơn vị dựa trên ký tự như ch (chiều rộng của ký tự “0”) vì nó thay đổi theo font-size và cung cấp kích thước liên quan đến nội dung thực tế. Ví dụ, trên màn hình Retina, 1px có thể chiếm 2-4 điểm vật lý, trong khi 1cm trong CSS cũng không chính xác bằng một centimet SI vì trình duyệt áp dụng hệ số thay đổi dựa trên dpi của thiết bị. Bài học chính là khi thiết kế giao diện responsive, ưu tiên các đơn vị tương đối (em, rem, ch, vw) thay vì px để tránh phụ thuộc vào độ phân giải phần cứng và duy nhất nhất quán trên các thiết bị khác nhau.

Bài này giúp lập trình viên hiểu bản chất thực sự của đơn vị pixel trong CSS để tránh những ảo tưởng thiết kế.

Understanding CSS Text-Box: Simplifying Padding Solutions

Tính năng CSS text-box giúp đơn giản hóa việc điều chỉnh padding cho các button mà không cần dùng đến magic numbers. Các lập trình viên thường gặp vấn đề khi căn giữa nội dung trong button với padding khác nhau, nhưng text-box giải quyết hiệu quả vấn đề này bằng cách sử dụng text-box-trim và text-box-edge property. Công nghệ này đặc biệt hữu ích cho các component có text-align center và padding không đồng đều theo các cạnh. Tính năng này đang được hỗ trợ trong Chrome 117 và Edge 117, mang lại trải nghiệm phát triển mượt mà hơn.

Tìm hiểu CSS text-box giúp bạn đơn giản hóa việc điều chỉnh padding cho button mà không cần dùng đến những con số ma thuật.

7 Practical Tips for Cheating at Design

Các lập trình viên web thường phải đưa ra quyết định thiết kế visual khi công ty thiếu designer full-time. Bài viết chia sẻ 7 mẹo thực tế để "lừa" design, bao gồm tận dụng CSS frameworks như Tailwind CSS và component libraries như Material UI. Các kỹ thuật như sử dụng CSS Grid và Flexbox giúp tạo layout phức tạp dễ dàng hơn mà không cần kiến thức thiết kế sâu. Những mẹo này giúp tiết kiệm thời gian và tạo ra giao diện chuyên nghiệp ngay cả khi không có background design.

Bài viết này giúp lập trình viên áp dụng những thủ thuật thiết kế thực tế để cải thiện giao diện web mà không cần kiến thức chuyên sâu về thiết kế.

5 CSS Properties You Should Know for Better Text Designs – Master.dev Blog

CSS cung cấp năm thuộc tính quan trọng giúp cải thiện thiết kế văn bản: background-clip để che phủ nền, vertical-align để căn chỉnh phần tử, box-decoration-break để duy trì kiểu dáng cạnh nhất quán, letter-spacing để điều chỉnh khoảng cách chữ, và text-combine-upright cho bố cục văn bản theo chiều dọc.

Nếu bạn muốn nâng cao chất lượng thiết kế văn bản trên trang web bằng CSS với những tính năng hiện đại như cắt nền, align chính xác hoặc chữ dọc, bài này sẽ cung cấp những công cụ thiết yếu mà nhiều lập trình viên bỏ qua.

Six Labors : Fitting Type to the Pixel Grid

Bài viết giải thích khái niệm hinting của phông chữ và vai trò của nó trong việc đưa đường viền ký tự vào lưới pixel để hiển thị sắc nét ở kích thước nhỏ. Nó so sánh cách TrueType và CFF thực hiện hinting khác nhau, nêu rõ TrueType sử dụng chương trình hint dựa trên bytecode trong khi CFF dựa trên các hướng dẫn PostScript và không có vòng lặp. Do sự khác biệt này, các bộ render truyền thống thường phải chọn một phương pháp hoặc thực hiện chuyển đổi phức tạp, dẫn đến chất lượng hiển thị không đồng nhất giữa hai định dạng. SixLabors.Fonts phiên bản 3.1 đưa ra một bộ grid‑fit chung có thể xử lý cả hai định dạng, áp dụng các quy tắc hinting của TrueType và mô phỏng hướng dẫn CFF trên cùng một pipeline rasterizer. Kết quả là văn bản nhỏ được hiển thị nét hơn và nhất quán trên các thiết bị khác nhau, cho thấy lợi ích của việc thống nhất quá trình hinting thay vì dựa vào các giải pháp riêng cho từng định dạng.

Bài viết này giúp lập trình viên hiểu rõ về font hinting và cách SixLabors.Fonts tối ưu hiển thị chữ sắc nét trên màn hình.

Reminder that `system-ui` is well supported, when you use it on macOS you get San Francisco which is a variable font, which is fun, and the fallbacks are pretty good. – Master.dev Blog

Hệ thống phông chữ system-ui được hỗ trợ rộng rãi, đặc biệt trên macOS sẽ sử dụng San Francisco (một variable font) cùng các fallbacks hiệu quả.

Lập trình viên nên đọc bài này để khám phá cách tối ưu hóa giao diện người dùng bằng font hệ thống macOS (San Francisco) và các fallback hiệu quả, giúp ứng dụng của bạn có thiết kế chuyên nghiệp, nhanh chóng và tiết kiệm tài nguyên.

Why your numbers look wrong

Fix wobbling dashboard numbers and misaligned table columns in CSS with font-variant-numeric: tabular-nums, old-style figures, fractions, and small caps.

xkcd-font: The xkcd font

xkcd-font là một font chữ được tạo ra cho dự án IPython, mang phong cách tranh biếm họa đặc trưng của trang web xkcd.com. Font chữ này sử dụng thiết kế tay với nét vẽ không đều, tạo cảm giác thân mật và hài hước khi hiển thị văn bản. Dự án có sẵn trên GitHub với khoảng 1.000 commit, cho thấy cộng đồng đã tích cực đóng góp để hoàn thiện font chữ. Bạn có thể tích hợp xkcd-font vào các dự án Jupyter Notebook hoặc website để mang lại phong cách khoa học vui nhộn, phù hợp cho tài liệu giáo dục hoặc bài thuyết trình không cần tính nghiêm túc.

Nội dung này giúp lập trình viên biết cách sử dụng font xkcd cho các dự án phát triển và thiết kế.

The Index: Issue #197

The Index #197 tổng hợp các bài viết công nghệ đáng chú ý trong tuần. Các bài viết nổi bật bao gồm phân tích về hiệu năng của React 18, giải pháp tối ưu hóa Webpack bundle size, và hướng dẫn implement AI trong ứng dụng web. Số liệu cho thấy các kỹ thuật tối ưu hóa JavaScript có thể giảm tới 40% thời gian tải trang. Bài viết cũng đề cập đến các công cụ mới như Vite và SvelteKit đang thay đổi cách xây dựng ứng dụng frontend hiện đại.

Bài viết tổng hợp những liên kết chất lượng và cập nhật xu hướng công nghệ giúp lập trình viên mở rộng kiến thức và nâng cao kỹ năng.

Typography Artist Celebrates 180K Followers with 200+ Free Fonts

Nhà thiết kế chữ Yuta ONE đã kỷ niệm cột mốc 180K followers bằng việc tung bộ sưu tập 200+ font chữ miễn phí. Đây là đợt phát hành font có hạn thời gian, chỉ trong thời gian ngắn. Bộ font này bao gồm các kiểu chữ đa dạng với chất lượng cao được thiết kế chuyên nghiệp. Điều này cho thấy giá trị của việc xây dựng cộng đồng và khuyến khích sáng tạo trong lĩnh vực typography. Bạn có thể tận dụng cơ hội này để bổ sung thêm font chất lượng cho dự án mà không tốn chi phí.

Lập trình viên nên đọc bài này để tải miễn phí 200+ font chất lượng cao cho dự án của mình trong thời gian giới hạn.

The Instagram Redesign Everyone Missed While Arguing Over Three Letters

The Instagram Redesign Everyone Missed While Arguing Over Three Letters Instagram changed how the whole app reads last week. People only noticed the logo. Last Thursday, Instagram changed the word …

TypeStax: A type scale generator that feels like vintage audio hardware

TypeStax là công cụ tạo bảng tỷ lệ kiểu chữ (type scale) với giao diện điều khiển analog mô phỏng phần cứng âm thanh cũ, hỗ trợ chỉnh sửa từng yếu tố, tích hợp Google Fonts, xem trước trực tiếp và xuất sang Figma.

Là người phát triển thiết kế UI/UX, bạn có thể khám phá cách TypeStax giúp tạo ra các thang âm kiểu cổ điển cho font chữ, kết hợp với giao diện tương tự máy âm thanh, từ đó nâng cao trải nghiệm thiết kế và tạo ra các dự án đẹp hơn với sự kết hợp giữa kỹ thuật số và cảm giác vật lý.

10 UI/UX Mistakes That Make Websites Look Unprofessional

Ấn tượng đầu tiên rất quan trọng khi người dùng đánh giá website trong vài giây. Thiết kế sạch sẽ, trực quan và tránh 10 lỗi UI/UX phổ biến sẽ giúp website trông chuyên nghiệp hơn.

Lập trình viên nên đọc bài này để tránh những sai lầm UI/UX cơ bản gây mất uy tín cho dự án, từ đó tối ưu hóa trải nghiệm người dùng và cải thiện hiệu suất chuyển đổi.

Uncovering the Undocumented avoidsOrphans

SwiftUI's Text tự động đẩy từ cuối dòng xuống dòng mới để tránh "orphans" (từ đơn lẻ ở cuối đoạn), nhưng không thể tắt tính năng này. Bài viết hướng dẫn cách sử dụng API ẩn avoidsOrphans để khôi phục quyền kiểm soát ngắt dòng.

Lập trình viên SwiftUI cần đọc bài này để khám phá cách sử dụng API avoidsOrphans chưa được công bố, giúp họ tự do điều chỉnh cách phân đoạn văn bản trong giao diện để tránh các trường hợp không mong muốn mà SwiftUI mặc định không cho phép thay đổi.

The Title Cards in Blade Runner Are Fucking Amazing

Bài viết ca ngợi thiết kế typography trong thẻ tiêu đề (title cards) của phim Blade Runner, nhấn mạnh vai trò tinh tế của kiểu chữ trong việc nâng tầm trải nghiệm thị giác và đọc hiểu.

Một lập trình viên nên đọc bài này để khám phá cách thiết kế chữ in không chỉ là nghệ thuật mà còn là một công cụ thiết yếu trong giao diện người dùng, ảnh hưởng đến trải nghiệm người dùng và hiệu suất đọc dữ liệu trên các ứng dụng kỹ thuật số của mình.

The Hidden Details in Every Font

Mỗi phông chữ chứa đựng những quyết định tinh tế vô hình, và những hình thức chữ cái tốt được thiết kế để trở nên vô hình trong quá trình sử dụng. Bạn đã đọc hàng trăm ký tự để đến được câu này.

Lập trình viên nên đọc bài này để hiểu cách thiết kế giao diện người dùng (UI) hiệu quả hơn, từ kiến thức về font và letterform để tối ưu hóa trải nghiệm người dùng trong các ứng dụng số.