Một cái nhìn vào kiểu chữ tốt hơn cho các trang web hiện đại

Văn bản kỹ thuật số có thể được định dạng trong rất nhiều hương vị. Với sự tiến bộ hơn nữa của phông chữ web và tập lệnh trình duyệt, chúng tôi đã thấy mã dự án mới cho các nhà phát triển sử dụng. Các nhà thiết kế web cũng đang tìm kiếm chiến lược tốt nhất để mã hóa trang web của họ và xây dựng một kiểu chữ thống nhất giữa tất cả các trang của họ.

Rất nhiều nhà thiết kế web chuyên nghiệp đã viết về chủ đề này bao gồm các tính năng và dịch vụ cập nhật. Bạn phải xem mỗi trang web là một tài liệu đơn lẻ phá vỡ thiết kế bố trí gốc của bạn. Theo quan điểm này, thật dễ dàng để xem làm thế nào kiểu chữ có thể chảy từ trang này sang trang khác và cung cấp một lối thoát độc đáo cho sự sáng tạo. Và điều này trở nên đặc biệt rõ ràng khi xây dựng các lớp duy nhất cho đoạn văn và tiêu đề của bạn.

Dưới đây tôi sẽ đi vào một số ý tưởng tuyệt vời cho các nhà thiết kế kiểu chữ đầy tham vọng quan tâm đến việc xây dựng web. Blog, mạng xã hội và doanh nghiệp luôn tìm cách cập nhật trang web hiện tại của họ. Và các kiểu CSS cho kiểu chữ web cung cấp một nguồn tuyệt vời để bắt đầu làm mới các trang của bạn.

Sự khác biệt trong Internet ngày nay

Web hiện đại đã phát triển vượt bậc kể từ đầu năm 2000. Có vô số tính năng mới cho các nhà thiết kế web để tạo ra các tác phẩm tuyệt vời về thiết kế đồ họa, logo, biểu ngữ và thực tế là bất cứ thứ gì khác. Việc phát hành các thông số kỹ thuật của HTML5 và CSS3 cũng đã ảnh hưởng đến cách xây dựng phông chữ web cũ.

Bây giờ hoàn toàn có thể bao gồm các phông chữ của riêng bạn với CSS @mặt chữ bất động sản. Bạn có thể sử dụng bất kỳ Đúng kiểu(.ttf) hoặc Mở loại(.otf) tập tin và lưu trữ một bản sao cục bộ trên máy chủ của bạn. Sau đó, với một số phép thuật CSS3 bao gồm gia đình ở bất cứ đâu trên trang web của bạn!

Theo kỹ thuật này, có thể thấy Internet hiện đại của chúng ta đã phát triển như thế nào.

Và với việc jQuery ngày càng phổ biến mỗi ngày, không có gì ngạc nhiên khi chúng ta có thể xây dựng các hiệu ứng hoạt hình đáng kinh ngạc cùng với các phông chữ tùy chỉnh. Thay thế cho phương pháp trên plugin TTFGen cho jQuery cho phép bạn đưa bất kỳ phông chữ TrueType nào vào trang web của mình.

Phương pháp này đáng tin cậy hơn một chút vì bạn không cần một trình duyệt hiện đại hỗ trợ các tiêu chuẩn CSS3 để làm cho nó hoạt động. Nhưng tất nhiên các trình duyệt cũ như Internet Explorer 6 sẽ đấu tranh để hiển thị đúng.

Nhưng cảm ơn chúa, hầu hết người dùng đã chuyển sang phần mềm duyệt mới hơn hỗ trợ các tiêu chuẩn này! Và khi bạn đang phát triển cho web, bạn nên xem xét chính xác thị trường của bạn dành cho ai. Bạn không thể làm hài lòng tất cả mọi người mọi lúc, nhưng bạn có thể chắc chắn cố gắng đến gần đủ.

Mục đích của kiểu chữ kỹ thuật số

Sắp xếp một ý tưởng lạ để xem xét, nhưng mục đích thực sự của văn bản kỹ thuật số là gì? Để truyền đạt thông tin, chia sẻ nguồn và đưa ra ý kiến ​​của bạn với thế giới người dùng Internet. Văn bản là hình thức truyền thông đơn giản nhất để chia sẻ suy nghĩ và ý tưởng. Nhưng nó cũng rất phức tạp và chứa các chi tiết chính mà ảnh / video không thể sử dụng.

Khách truy cập của bạn có thể tìm thấy trang web của bạn dựa trên các từ khóa trong văn bản hoặc tiêu đề của bạn - chỉ là một lý do khác để chú ý cẩn thận đến bản sao web của bạn. Và một khi bạn đã chú ý đến trang web của mình, bạn cần giữ sự tập trung của họ. Điều này được thực hiện dễ dàng nhất với các tiêu đề đậm và văn bản trang cách đều nhau.

Nếu bạn đang viết một bài báo hoặc hướng dẫn thì bạn cần sử dụng ngôn ngữ rõ ràng. nó là quan trọng không kém là văn bản trang của bạn trông như thế nào và chất lượng nội dung của bạn. Văn bản của bạn xuất hiện càng lớn thì càng dễ đọc và quét các từ khóa. Và vì các đoạn văn sẽ chứa phần lớn nội dung của bạn, bạn nên dành nhiều thời gian để tạo mẫu cho phù hợp. Đoạn văn được sử dụng để truyền tải thông điệp của bạn trong các đoạn có kích thước bit được chia thành các câu. Hiểu cách bạn viết và lên kế hoạch trước để có bố cục trang phù hợp.

Ngoài ra với văn bản trang của bạn đi kèm phương tiện truyền thông và nội dung thứ cấp. Nếu đoạn văn của bạn chứa thông tin chính, có thể bạn có biểu đồ hoặc hình ảnh để thêm gia vị cho trang. Những điểm nhấn này chỉ là cảm ứng phù hợp giúp người dùng di chuyển qua trang web của bạn.

Video và hình ảnh có thể phá vỡ nội dung của bạn và làm cho nó có vẻ như người đọc đang di chuyển nhanh hơn thông qua bài viết của bạn. Nhưng hãy sử dụng những mục này một cách tiết kiệm và đừng để bất cứ điều gì lấn át thông điệp cốt lõi của bạn. Người dùng (hầu hết) đến trang web của bạn để biết thông tin và không muốn có quá nhiều phiền nhiễu.

Tất cả các tùy chọn định dạng khác được sử dụng để chỉ định chức năng hoặc mục đích. Ví dụ: văn bản siêu liên kết thường có màu khác với phần còn lại để nổi bật như “có thể nhấp”. Bạn có thể làm việc với các từ in đậm hoặc in nghiêng thêm điểm nhấn vào câu của bạn. Và việc sử dụng blockquote hoặc văn bản được định dạng trước có thể giúp phân định các câu lệnh cơ bản hoặc mã web, tương ứng.

Tiêu đề trang web

Một trong những tài sản quan trọng nhất đối với kiểu chữ web của bạn là thẻ tiêu đề. Nếu bạn không quen thuộc với các tiêu đề HTML từ

đến

với cái trước giữ tầm quan trọng nhất và cái sau ít nhất. Đánh dấu này rất hữu ích để hiểu vì Google cũng xếp hạng tên miền và trang web của bạn dựa trên cấu trúc nội dung. Do đó, cuối cùng bạn có quyền kiểm soát những từ khóa bạn sử dụng và loại tiêu đề bạn sẽ yêu cầu.

Mặc dù đặc tả HTML5 tiêu chuẩn bao gồm tối đa 6 kiểu tiêu đề khác nhau, tôi vẫn khuyên bạn nên sử dụng từ 3-4. Không cần thiết phải bao gồm tất cả chúng trong các trang của bạn. Và nó cũng rất khó có thể bạn sẽ tìm thấy việc sử dụng cho 6 tiêu đề khác nhau. Khi lần đầu tiên ngồi xuống để xây dựng phong cách của bạn, hãy thử phác thảo một vài ví dụ cho các tiêu đề để xem những gì bạn thích.

Photoshop là tuyệt vời cho kịch bản này. Bạn cũng có thể thử mã hóa các tiêu đề khác nhau trong HTML để xem chúng trông như thế nào trong trình duyệt. Điều quan trọng là làm việc với dòng trang của bạn và tiêu đề thiết kế theo thứ hạng của chúng.

Ví dụ:

các thẻ nên nổi bật nhất trong số tất cả các tiêu đề trang của bạn.

và

là các thẻ phổ biến nhất và được Google khuyên dùng để thu thập nội dung trang. Sử dụng các hiệu ứng thiết kế như phông chữ đậm, gạch chân, viền đứt hoặc các màu khác nhau sẽ giúp tiêu đề của bạn nhảy ra khỏi trang.

Khoảng cách cũng rất quan trọng khi nói đến tiêu đề, hoặc bất kỳ phần nội dung nào của bạn cho vấn đề đó. Đảm bảo bạn thêm các lề bổ sung giữa các tiêu đề và khu vực nội dung chính. Nếu bạn đã làm cho phông chữ của mình đủ lớn, mỗi tiêu đề sẽ nổi bật như là khối cốt lõi của chính nó. Giao diện này rất lý tưởng nếu bạn muốn thu hút sự chú ý của độc giả bằng một thông điệp rõ ràng.

Xây dựng siêu liên kết độc đáo

Có rất nhiều điều để nói về chủ đề liên kết trang. Bằng cách này hay cách khác bạn sẽ phải sử dụng các siêu liên kết trong mã của mình. Chúng cực kỳ quan trọng vì giao diện điều hướng chính giữa các trang khác nhau trên trang web của bạn. Bạn cũng có thể liên kết đến các blog khác hoặc thậm chí các bài đăng trên blog được lưu trữ của bạn để tham khảo vào một ngày sau đó.

Bạn nên chọn văn bản giữ cho liên kết của bạn rất cẩn thận. Đây là nội dung cụ thể sẽ được nhấn bởi kiểu liên kết. Ví dụ: "bấm vào đây" rất phổ biến và được sử dụng để tải xuống trực tiếp hầu hết thời gian. Cố gắng tránh cách tiếp cận có hệ thống này và thay vào đó hãy sáng tạo một chút với văn bản siêu liên kết của bạn. Khách truy cập của bạn có nhiều khả năng nhấp vào một liên kết nếu họ cũng có thể nhận ra ngữ cảnh và có thể tìm ra trang mới sẽ chứa những gì.

Khi đi đến phong cách liên kết của bạn, bạn nên xem xét những điều sau đây - những thay đổi sẽ như thế nào trong thiết lập trang của bạn, bạn đang làm việc với loại màu nền nào, và văn bản tương phản màu gì?

Các liên kết sẽ xuất hiện một cách trắng trợn trên trang dưới dạng các mục có thể nhấp - sau tất cả, đó là chức năng của chúng. Đây là lý do tại sao màu xanh cũ với hiệu ứng văn bản gạch chân hoạt động rất tốt. Nhưng nếu bạn thấy rằng một màu thay thế hoạt động tốt hơn, bạn nên thử nó. Không có giải pháp một kích cỡ phù hợp cho tất cả các thiết kế liên kết. Chỉ cần duyệt web một chút và chắc chắn bạn sẽ kết hợp được một thứ gì đó nổi bật.

Một điểm đáng chú ý là một vài tính năng bạn nên thử tránh. Những việc như thay đổi họ phông chữ hoặc cỡ chữ có thể rất khó chịu. Điều này sẽ khiến văn bản bị biến dạng và di chuyển, có thể đặt con trỏ chuột ra khỏi vùng liên kết. Theo cách tương tự, bạn nên tránh thêm các lề / phần đệm thêm vào các liên kết hoặc hiệu ứng di chuột. Những công việc này tốt hơn nhiều khi bạn giữ đơn giản. Thay đổi màu hoặc thêm gạch chân đi một chặng đường dài trong trải nghiệm người dùng.

Xây dựng danh sách theo kiểu

Rất có thể bạn cũng sẽ phải làm việc với danh sách tại một số điểm. Bao gồm cả danh sách có thứ tự và không có thứ tự trong HTML. Đây là hoàn hảo để cung cấp một bộ sưu tập nhỏ các ý tưởng, sản phẩm, con người hoặc liên kết trực tuyến trong một không gian rất nhỏ. Kiểu dáng không khác gì so với đoạn văn hoặc tiêu đề, hoặc.

Khách truy cập của bạn nên hiểu ngay rằng họ đang xem danh sách các mặt hàng. Giữ mỗi mục danh sách riêng biệt và nằm trên một dòng mới trong trang của bạn. Thêm một số không gian thêm giữa chúng, nếu có thể. Điều này sẽ cung cấp cho một số phòng thở và xuất hiện như một sự chia tay tốt đẹp cho văn bản bài viết. Nếu bạn muốn, bạn thậm chí có thể in đậm phông chữ hoặc thụt lề một chút để tránh xa lề bố cục tiêu chuẩn.

Thêm các tính năng bổ sung để giúp danh sách của bạn nổi bật không phải là một yêu cầu. Nhưng nếu bạn thích phong cách bố trí khối thì nó thực sự tập trung vào danh sách của bạn. Bạn có thể thử thêm một nền sáng hoặc biểu tượng. A List Apart có một bài viết tuyệt vời về các danh sách thuần hóa mà tôi nghĩ bao gồm một số thông tin kiến ​​thức rất mạnh mẽ. Nhưng nếu bạn giữ tuyến tính nội dung trang và chỉ sử dụng các khối danh sách khi cần, bạn không nên chạy vào bất kỳ thất bại thiết kế nào.

Cách tạo báo giá trong trang

Sự xuất hiện của trích dẫn và trích dẫn rất hạn chế những ngày này. Trong trang web ban đầu, bạn sẽ không thấy nhiều yếu tố này được sử dụng. Có lẽ trong các bài xã luận, bài tiểu luận, hoặc các bài báo giáo dục. Nhưng HTML5 chắc chắn đã cập nhật các quy tắc một chút, giúp việc trích dẫn các chuỗi khối dễ dàng hơn rất nhiều.

Trang web HTML5 Doctor bao gồm một tài nguyên hấp dẫn để thảo luận về chủ đề chính xác này. Họ thảo luận về việc sử dụng nội dung bên trong các chuỗi khối như xuất hiện bên trong cấu trúc tài liệu. Vì vậy, bạn có thể bao gồm các tiêu đề, đoạn văn, và thậm chí cả danh sách và chân trang, quá. Công dụng chính của