কীভাবে ব্যবহার করবেন
- আপনার কাছে থাকা এককটি (pt, px, mm, em বা %) বেছে নিয়ে মাপ লিখুন।
- অন্য প্রতিটি একক একই সঙ্গে দেখানো হবে, ওই মাপের একটি প্রিভিউসহ।
- em, rem ও %-এর জন্য বেস ফন্ট সাইজ নির্ধারণ করুন — ব্রাউজারে ডিফল্ট 16 px।
অপশনগুলোর ব্যাখ্যা
- পয়েন্ট ও পিক্সেল
- এক পয়েন্ট 1/72 ইঞ্চি এবং CSS একটি পিক্সেলকে 1/96 ইঞ্চি হিসেবে সংজ্ঞায়িত করে, তাই 1 pt = 4/3 px এবং 12 pt = 16 px।
- মিলিমিটার
- 1 pt = 25.4 ÷ 72 ≈ 0.353 mm। এটি টাইপের বডির ভৌত মাপ এবং প্রিন্ট করার সময় প্রযোজ্য।
- em, rem ও শতাংশ
- বেস ফন্ট সাইজের একটি গুণিতক। 16 px বেসে, 1 em = 1 rem = 100% = 16 px = 12 pt।
- চীনা আকার (号)
- চীনা ওয়ার্ড প্রসেসর পয়েন্টের বদলে আকারের নাম ব্যবহার করে, 初号 (42 pt) থেকে 八号 (5 pt) পর্যন্ত। এগুলো থেকে এবং এগুলোতেও রূপান্তর করতে পারবেন।
সাধারণ মাপ
| pt | px | em (16 px বেস) |
|---|---|---|
| 9 | 12 | 0.75 |
| 10.5 | 14 | 0.875 |
| 12 | 16 | 1 |
| 14 | 18.67 | 1.1667 |
| 18 | 24 | 1.5 |
| 24 | 32 | 2 |
পিক্সেল, পয়েন্ট ও rem-এ ওয়েবের মাপ
ব্রাউজারের ডিফল্ট 16 px কে বেস ধরলে:
| পিক্সেল | পয়েন্ট | rem / em | সাধারণ ব্যবহার |
|---|---|---|---|
| 12 px | 9 pt | 0.75 rem | ক্যাপশন, ফুটনোট |
| 14 px | 10.5 pt | 0.875 rem | ছোট লেখা, লেবেল |
| 16 px | 12 pt | 1 rem | মূল লেখা |
| 18 px | 13.5 pt | 1.125 rem | বড় মূল লেখা, ভূমিকার অনুচ্ছেদ |
| 20 px | 15 pt | 1.25 rem | ছোট শিরোনাম |
| 24 px | 18 pt | 1.5 rem | শিরোনাম |
| 32 px | 24 pt | 2 rem | পেজের শিরোনাম |
কোন একক ব্যবহার করবেন
pt (পয়েন্ট) ছাপা ও ওয়ার্ড প্রসেসরের জন্য: 1 pt হলো এক ইঞ্চির 1/72, তাই 12 pt লেখা যেকোনো প্রিন্টারে একই বাস্তব মাপের হয়।
px (CSS পিক্সেল) স্ক্রিনের জন্য: স্বাভাবিক জুমে 1 px এর সংজ্ঞা 1/96 ইঞ্চি, ফলে 12 pt সমান 16 px।
rem ও em আপেক্ষিক। 1 rem হলো রুট ফন্ট সাইজ (সাধারণত 16 px); 1 em হলো প্যারেন্ট এলিমেন্টের ফন্ট সাইজ। লেখার জন্য rem ব্যবহার করলে যাঁরা ব্রাউজারে বড় ডিফল্ট ফন্ট সেট করেন তাঁরা সব জায়গায় বড় লেখা পান।
মিলিমিটার ছাপা নমুনা মেলাতে সাহায্য করে: বড় হাতের একটি অক্ষরের উচ্চতা মাপুন, মূল লেখার মাপ টাইপফেস অনুযায়ী তার প্রায় 1.4 গুণ।
সচরাচর জিজ্ঞাসিত প্রশ্ন
12 pt কত পিক্সেল?
16 px। CSS পিক্সেল পেতে পয়েন্টকে 4/3 দিয়ে গুণ করুন, অথবা পয়েন্ট পেতে পিক্সেলকে 0.75 দিয়ে গুণ করুন।
em ও rem-এর মধ্যে পার্থক্য কী?
rem মূল (html) ফন্ট সাইজের তুলনায় আপেক্ষিক; em মূল উপাদানের ফন্ট সাইজের তুলনায় আপেক্ষিক। কোথাও ফন্ট সাইজ নির্ধারণ করা না থাকলে দুটিই 16 px।
স্ক্রিনে মাপা টেক্সট রূপান্তরের সঙ্গে মেলে না কেন?
CSS পিক্সেল হলো 96 DPI-তে সংজ্ঞায়িত একটি যৌক্তিক একক। স্ক্রিনে প্রকৃত মাপ ডিসপ্লের পিক্সেল ঘনত্ব ও সিস্টেমের জুমের ওপর নির্ভর করে। পয়েন্ট ও মিলিমিটার শুধু প্রিন্টে সঠিক।
গোপনীয়তা
এই টুলটি পুরোপুরি আপনার ব্রাউজারে চলে। আপনার ফাইল ও লেখা আপনার ডিভাইসেই প্রসেস হয় এবং কখনো আমাদের সার্ভারে আপলোড হয় না।