Laman » UI / UX » Memahami Tipografi 10 Alat dan Sumber yang Berguna

    Memahami Tipografi 10 Alat dan Sumber yang Berguna

    Dalam artikel terakhir saya mengenai Memahami Tipografi, saya menulis tentang apa yang masuk ke reka bentuk tipografi dan bagaimana untuk memanipulasinya untuk memperbaiki tata letak laman web anda dan untuk meningkatkan pengalaman pengguna. Dalam artikel ini, saya menyenaraikan 10 alat kegemaran saya untuk tipografi di Web.

    Ini dapat membantu dengan membina grid grid dan kawasan kandungan, mencipta gaya CSS, menghasilkan nama font dan sekumpulan barangan sejuk yang lain. Lihat beberapa pautan di bawah dan pastikan kami tahu pemikiran anda di kawasan perbincangan pos.

    Bacaan yang disyorkan: Memahami Typography: Menulis Untuk Web

    Matriks fon

    Panduan dalam talian ini telah disiarkan oleh blog reka bentuk 24ways. Ia mempunyai jadual matriks semua fon web standard yang anda akan temukan secara lalai daripada pelbagai vendor perisian. Tajuk popular termasuk program Windows, Mac OS X, Microsoft Office dan Adobe Creative Suite.

    Pemeriksaan Kontras Warna

    Sebaliknya warna sering menjadi masalah apabila anda menceburkan diri di luar model hitam dan putih yang standard. Apabila anda mencari perlawanan, ia merasakan kesempurnaan reka bentuk. Namun pilihan kombo warna yang buruk kelihatan sangat buruk dan akan mempengaruhi reka bentuk keseluruhan secara negatif. Alat web kecil ini dapat membantu anda memilih satu set warna untuk menyesuaikan satu sama lain untuk susun atur gaya apa pun.

    HTML-Ipsum

    Adakah anda memerlukan alat Lorem Ipsum yang boleh melakukan lebih daripada sekadar teks output? Penjana HTML dalam talian ini akan membuat blok kod untuk elemen halaman yang paling biasa. Beberapa contoh termasuk senarai tanpa had, senarai takrif, borang web, jadual, dan banyak penyelesaian lain.

    Typechart

    Typechart adalah salah satu alat kegemaran saya sebagai pemaju CSS. Saya sering mencari untuk menyesuaikan fon tertentu pada sistem saya ke projek web, tetapi saya tidak mempunyai masa untuk membuang koleksi saya. Alat yang hebat ini membolehkan anda menapis pilihan keluarga font yang popular dan memuat turun kod CSS yang betul!

    PX-to-EM.com

    Kecuali anda menetapkan semula saiz teks penyemak imbas lalai, anda mungkin akan mempunyai masalah yang hampir sama dengan ems dengan piksel. Aplikasi dalam pelayar ini menyediakan jadual penukaran dan antara muka pengguna untuk px kepada em. Ia adalah alat yang sangat mudah untuk dipastikan, tetapi ia menawarkan panduan berguna dengan fungsi yang sangat mudah - dan anda tidak dapat mengalahkan harga harganya.

    Set Jenis CSS

    Saya tidak mengesyorkan melekat dengan Set Jenis CSS terlalu lama kerana ia benar-benar alat pemula. Ia membolehkan anda menjana kod CSS berdasarkan sifat font tertentu yang anda pilih. Walaupun sangat berguna pada mulanya, dari masa ke masa ia menjadi tongkat untuk bersandar. Dan anda tidak akan dapat memberi motivasi untuk menguasai sifat CSS sendiri. Tetapi jika anda perlu menjimatkan masa pada projek, alat ini tidak boleh diabaikan.

    membalik khas

    Berikut adalah contoh yang sangat unik dari perpustakaan pratonton fon. membalik tipikal termasuk beberapa fon yang asli kepada Sistem Pengendalian anda. Ia mengimbas auto direktori font anda untuk mengambil penyelesaian yang paling selamat dari web. Anda boleh membandingkannya secara bersebelahan dan mudah memilih antara pilihan kegemaran anda. Ini adalah satu lagi masa yang hebat untuk menjimatkan penanda buku dan jangan berfikir sehingga minit terakhir.

    Grid tipografi

    Terdapat banyak perbincangan mengenai reka bentuk di sekitar grid dalam HTML dan CSS. Anda mungkin memahami konsep bagaimana grid bekerja, dan mengukur laman web dalam piksel tidak berbeza. Tutorial grid oleh CSS-Tricks ini lebih seperti usaha berpandu untuk memperkenalkan asas tipografi untuk era digital. Ini topik yang lebih maju dalam bidang reka bentuk web. Tetapi jika anda mempunyai sedikit kesabaran, saya cadangkan untuk meneruskan butiran untuk melihat bagaimana sifat grid ini benar-benar boleh mempengaruhi susun atur halaman anda.

    WhatTheFont!

    Kita semua telah menemui logo atau imej dengan beberapa fon yang tidak dikenali yang sangat sejuk. WhatTheFont telah membuat pusingan di Internet selama beberapa tahun dan ia masih menjadi kegemaran saya. Anda memilih imej untuk dimuat naik dan skrip mereka akan menganalisis teks dalam gambar untuk menyesuaikan jenis huruf yang sama. Aplikasi ini akan menghubungkan anda ke produk luaran di mana anda boleh membeli setiap font pada kemudahan anda.

    Kalkulator Talian / Ketinggian Jalur

    Akhirnya alat yang sangat kuat untuk menjana ketinggian baris dan ciri irama. Hanya masukkan nilai untuk saiz fon asas dan ketinggian baris, atau masukkan kod CSS tersuai anda sendiri ke sisi. Aplikasi ini akan menghasilkan pratonton dalam beberapa gaya yang berbeza supaya anda boleh mendapatkan idea tentang bagaimana ciri-ciri ini akan kelihatan di laman web anda sendiri.