Do theme mới chưa tối ưu các bài viết cũ nên sẽ lỗi hiển thị, quản trị viên đang sửa lỗi, mong bạn đọc thông cảm!

Câu chuyện thay phông chữ cho Median UI

Mình là một người rất cầu toàn trong việc thiết kế nói riêng và trong cuộc sống nói chung. Nên ngay từ khi lấy Median UI làm visual cho blog, mình...

Mình là một người rất cầu toàn trong việc thiết kế nói riêng và trong cuộc sống nói chung. Nên ngay từ khi lấy Median UI làm visual cho blog, mình đã rất thích template này vì nhìn đơn giản, và nó tập trung rất tốt cho việc đọc!

Nhưng có một điều mình vẫn chưa ưng ý lắm ở template này, đó là ở vẫn phông chữ. Hai phông chữ gốc của Median là Noto SansPoppins, phông chữ cho phần code là Fira Mono! Các phông chữ này cơ bản đã hỗ trợ tiếng Việt nhưng chưa ra cái chất riêng được và nó quá là phổ biến rồi cho nên mình muốn đổi gió một chút! Nhất là mình muốn thay đổi mạnh nhất là ở phần title cho theme vì nhìn nó quá đơn giản, title phải đặc biệt nhấn mạnh và khác với body thì mình tạo ra hiệu ứng thị giác được, title và body giống nhau đến mức nhàm chán!

Work San & Source Code Pro

Lựa chọn đầu tiên mà mình thay đổi là Work SansSource Code Pro. Cơ duyên cho việc lựa chọn phông này là ở web CSS Gradient, lúc đó mình đang đi dạo kiếm tools cho blog, ngồi fake tools mãi Blogspot không nhận nên view-source chôm cái phông chữ về, cũng may là người anh em này có trên Google Fonts nên việc nhúng vào Blogspot đã dễ hơi mười mươi. Work Sans sẽ đảm nhiệm phần lớn việc hiển thị nội dung và Source Code Pro sẽ hiển thị phần code.

Mình lựa chọn Work Sans vì một yếu tố là phông này có độ đậm nhạt từ Thin cho đến Black, rất là đa dạng trong việc hiển thị các yếu tố từ Heading cho đến body, các ký tự cũng dễ dàng mạch lạc, mình có giai đoạn sử dụng chính Work Sans làm body-text và title-heading nhưng vẫn chưa ưng nó lắm! Đối với mình nếu như không gặp các phông khác thì chắc mình cũng sẽ không đổi. Tuy nhiên phần lớn cũng ở phần hiển thị, mình testing trên một số trình duyệt thì cảm giác đôi lúc phông sẽ bị lệch Base Line, có nghĩa là phông sẽ lên xuống và không đều nhau mặc dù kích thước các con chữ đều bằng nhau!

Đây là văn bản mẫu cho phông chữ Work Sans!

Còn về Source Code Pro thì chắc không xa lạ gì mấy, đây là phông chữ mono best choice của mình khi sử dụng các trình soạn thảo, đặc biệt là về dòng lệnh như Text Sublime. Hỗ trợ tiếng Việt, x-Height các chữ cái rất đều, dễ dàng đọc code trên phông chữ này!

Đây là văn bản mẫu cho phông chữ Source Code Pro!

Sau đó mình chuyển qua Be Vietnam Pro trước khi đến với Inter.

Inter & Lora

Cơ duyên để thay đổi sang Inter là web của DigitalOcean, lúc này đang đi kiếm cách dịch ngược các đoạn mã JavaScript. Cái đầu tiên đập vào mắt đó là sự tinh giản của phông chữ, nhìn rất thanh toán, mình đúng nghĩa là kết từ cái nhìn đầu tiên. Rất may mắn khi phông này có hỗ trợ tiếng Việt, nhưng một điều cùi bắp ở đây là phông chữ không hề có italic, tức là chữ nghiêng. Bởi vì không có Độ nghiêng, khi hiển thị nó sẽ fake italic nên rất khó chịu. Đây là lý do khiến mình quay lại Be Vietnam Pro!

Đây là văn bản mẫu cho phông chữ Inter!

Nếu so sánh bạn sẽ thấy chiều cao của Work Sans, sẽ ngắn hơn Inter! Nếu lựa chọn để đọc thì mình sẽ chọn Inter vì Work Sans x-Height ngắn khiến cho trải nghiệm của mình không tốt! Không biết các bạn như thế nào!

Nhưng mà vẫn chưa giải quyết được bài toán title của Median, đến nước này mình phải đi cầu cứu Google và bài viết này đập vào mắt.

Lora

Một phông chữ hệ serif rất đẹp, nhưng để hiển thị title mình vẫn còn cảm thấy chưa ưng ý lắm, nhưng mà vì đã giải quyết được vấn đề trên, nên mình sẽ tạm thời để nó hoạt động cho đến khi tìm được người yêu mới thay thế!

Be Vietnam Pro

Tự hào hai chữ Việt Nam. Phông chữ này dạo gần đây gây bão mạng xã hội cho nên mình không phải giới thiệu quá nhiều. Nếu chưa biết bạn có thể xem ở bài này.

Hiện tại blog đang chạy trên 3 phông chính, đó là: Be Vietnam Pro (body-text), Lora (title-heading), Source Code Pro (code). Nếu bạn cần thay đổi phông cho Median thì hãy đọc bài viết này!

Trên đây là một số nhận định cá nhân, hoàn toàn không có ý định áp đặt cho nên nếu bài viết không đáp ứng được nhu cầu trải nghiệm xin vui lòng góp ý dưới comment, mình sẽ trả lời và tiếp thu để viết các nội dung khác hay hơn nhé!

Cập nhật 24/0/2022: Hiện tại blog hoạt động hoàn toàn trên phông Be Vietnam Pro!

Just a ordinary man...

Đăng nhận xét

© 2020 - Chun Productions. Giữ toàn quyền.
Nội dung được bảo hộ bởi DMCA.
Nghiên cấm sao chép dưới mọi hình thức!


Đang tính thời gian tải trang...