Hiểu về typography 10 Công cụ và Tài nguyên hữu ích

Trong bài viết cuối cùng của tôi về Tìm hiểu về typography, tôi đã viết về những gì đi vào thiết kế kiểu chữ và cách thao tác để cải thiện bố cục trang web của bạn và nâng cao trải nghiệm người dùng. Trong bài viết này, tôi đang liệt kê 10 công cụ yêu thích của tôi cho kiểu chữ trên mạng.

Chúng có thể giúp xây dựng các lưới HTML và các khu vực nội dung, tạo các kiểu CSS, tạo tên phông chữ và một loạt các nội dung thú vị khác. Kiểm tra một số liên kết dưới đây và chắc chắn cho chúng tôi biết suy nghĩ của bạn trong khu vực thảo luận bài.

Đề nghị đọc: Hiểu về typography: Viết cho Web

Ma trận phông chữ

Hướng dẫn trực tuyến này được đăng bởi blog thiết kế 24ways. Nó có một bảng ma trận của tất cả các phông chữ web tiêu chuẩn mà bạn sẽ tìm thấy theo mặc định từ các nhà cung cấp phần mềm khác nhau. Các tiêu đề phổ biến bao gồm Windows, Mac OS X, Microsoft Office và các chương trình Adobe Creative Suite.

Kiểm tra độ tương phản màu

Độ tương phản màu thường là một vấn đề khi bạn mạo hiểm bên ngoài mô hình đen trắng tiêu chuẩn. Khi bạn tìm thấy một trận đấu, nó cảm thấy như sự hoàn hảo trong thiết kế. Tuy nhiên, một sự lựa chọn kết hợp màu sắc kém có vẻ rất xấu và sẽ ảnh hưởng tiêu cực đến thiết kế tổng thể. Công cụ web nhỏ này có thể giúp bạn chọn ra một bộ màu sắc phù hợp với nhau cho bất kỳ bố cục kiểu nào.

HTML-Ipsum

Bạn có cần một công cụ Lorem Ipsum có thể làm nhiều hơn là chỉ xuất văn bản không? Trình tạo HTML trực tuyến này sẽ tạo các khối mã cho các thành phần trang phổ biến nhất. Một số ví dụ bao gồm danh sách không có thứ tự, danh sách định nghĩa, biểu mẫu web, bảng và nhiều giải pháp khác.

Máy đánh chữ

Máy đánh chữ là một trong những công cụ yêu thích của tôi với tư cách là nhà phát triển CSS. Tôi thường tìm cách ghép một phông chữ cụ thể trên hệ thống của mình với một dự án web, nhưng tôi không có thời gian để lướt qua toàn bộ bộ sưu tập của mình. Công cụ tuyệt vời này cho phép bạn chọn lọc các lựa chọn phổ biến của các họ phông chữ và thậm chí tải xuống mã CSS thích hợp!

PX-to-EM.com

Trừ khi bạn đặt lại kích thước văn bản trình duyệt mặc định, bạn sẽ có thể gặp sự cố khớp với các pixel với pixel. Ứng dụng trong trình duyệt này cung cấp cả bảng chuyển đổi và giao diện người dùng cho px sang em. Đó là một công cụ rất đơn giản, nhưng nó cung cấp một hướng dẫn tiện dụng với chức năng thực sự đơn giản - và bạn không thể đánh bại thẻ giá miễn phí.

Bộ loại CSS

Tôi không khuyên bạn nên gắn bó với CSS Type Set quá lâu vì đây thực sự là một công cụ dành cho người mới bắt đầu. Nó cho phép bạn tạo mã CSS dựa trên các thuộc tính phông chữ cụ thể mà bạn chọn. Mặc dù ban đầu rất hữu ích, theo thời gian, nó trở thành một cái nạng để dựa vào. Và bạn sẽ không thể tự mình làm chủ các thuộc tính CSS. Nhưng nếu bạn cần tiết kiệm thời gian cho một dự án, công cụ này không thể bị bỏ qua.

lật điển hình

Đây là một ví dụ thực sự độc đáo của một thư viện xem trước phông chữ. lật điển hình bao gồm một số phông chữ có nguồn gốc từ Hệ điều hành của bạn. Nó tự động quét thư mục phông chữ của bạn để chọn các giải pháp an toàn nhất cho web. Bạn có thể so sánh chúng cạnh nhau và dễ dàng lựa chọn giữa các tùy chọn yêu thích của bạn. Đây là một trình tiết kiệm thời gian tuyệt vời khác mà bạn đánh dấu và đừng suy nghĩ cho đến phút cuối cùng.

Lưới đánh máy

Có rất nhiều thảo luận về thiết kế xung quanh lưới trong HTML và CSS. Bạn có thể hiểu khái niệm về cách thức hoạt động của lưới và việc đo trang web bằng pixel cũng không khác. Hướng dẫn lưới này của CSS-Tricks giống như một nỗ lực được hướng dẫn để giới thiệu những điều cơ bản về kiểu chữ cho kỷ nguyên số. Đây là một chủ đề nâng cao hơn nhiều trong lĩnh vực thiết kế web. Nhưng nếu bạn có một chút kiên nhẫn, tôi khuyên bạn nên tìm hiểu chi tiết để xem các thuộc tính lưới này thực sự có thể ảnh hưởng đến bố cục trang của bạn như thế nào.

Phông là gì!

Tất cả chúng ta đã tìm thấy một logo hoặc hình ảnh với một số phông chữ không thể xác định thực sự mát mẻ. WhatTheFont đã thực hiện các vòng trên Internet trong một vài năm và nó vẫn là một mục yêu thích của tôi. Bạn chọn một hình ảnh để tải lên và tập lệnh của họ sẽ phân tích văn bản trong ảnh để khớp với bất kỳ kiểu chữ tương tự nào. Ứng dụng thậm chí sẽ liên kết bạn với các sản phẩm bên ngoài nơi bạn có thể mua từng phông chữ một cách thuận tiện.

Máy tính đường cơ sở / đường cao

Cuối cùng, một công cụ thực sự mạnh mẽ để tạo các thuộc tính chiều cao và nhịp điệu của dòng. Chỉ cần nhập các giá trị cho kích thước phông chữ cơ sở và chiều cao dòng hoặc bao gồm mã CSS tùy chỉnh của riêng bạn sang một bên. Ứng dụng sẽ tạo các bản xem trước theo một vài kiểu khác nhau để bạn có thể biết được các thuộc tính này trông như thế nào trên trang web của riêng bạn.