ذمہ دار ویب نوع ٹائپ کے قواعد

ذمہ دار ویب نوع ٹائپ مشکل ہے - آپ کو دونوں ڈیزائن چپس اور تکنیکی معلومات دونوں کی ضرورت ہے. لیکن تاہم یہ مشکل ہو سکتا ہے، یہ غلط ہو رہا ہے ایک اختیار نہیں ہے، کیونکہ نوع ٹائپ ویب ڈیزائن کی بنیاد ہے.

آپ ڈیزائن اور کوڈ دونوں کو کیسے حاصل کرتے ہیں؟ آپ کے ڈویلپرز پکسل دھکا ڈیزائنرز کے ساتھ کس طرح بات چیت کرتے ہیں؟ آپ کے ڈیزائنرز کس طرح نوع ٹائپ کے بارے میں ناچالنٹ ڈویلپرز کی دیکھ بھال کر سکتے ہیں؟ تیز ترین اور سب سے آسان طریقہ یہ ہے کہ آپ کے ڈیزائنرز اور ڈویلپرز کو اسی زبان سے بات کرنے کے لۓ، ان کے دستکاری کے لئے ایک دوسرے کا احترام کریں، اور ویب نوع ٹائپ کی اصولوں اور حدود کو سمجھنے کی کوشش کریں.

یہ مضمون یہ ہے کہ ڈیزائنرز اور ڈویلپرز دونوں کو بنیاد کے ساتھ فراہم کرنا چاہتے ہیں جس سے نوع ٹائپ کے موضوع پر مواصلات شروع کرنا ہے. ہم ضروری ڈیزائن کے اصولوں کو پورا کریں گے اور عملی حل کے لئے تلاش کریں گے قبول نوع ٹائپ .

اچھا نوع ٹائپ کیا ہے؟

'اچھا' ہمیشہ ذہنی ہے؛ یہ ایک مقررہ لنگر نہیں ہے کہ ہم اس مواصلات کو کر سکتے ہیں. ڈیزائنرز اور ڈویلپرز کے لئے مؤثر طریقے سے بات چیت کرنے کے لئے، ہمیں ایک عام ڈومینٹر کے بارے میں بات کرکے شروع کرنا ہوگا کہ دونوں اطراف سمجھ سکتے ہیں. یہ ڈومینٹر نوع ٹائپ کا مقصد ہے.

نوع ٹائپ متن کی ظاہری شکل ہے؛ ہم متن ڈریسنگ کر رہے ہیں. ڈریسنگ کا مقصد یہ ہے کہ پہننے والے کو ایک بات چیت کو اپنی طرف متوجہ کرنے کے لئے کافی اپیل کرنا ہے، لیکن اتنا توجہ نہیں رکھتا کہ دوسری پارٹی بات چیت سے مشغول ہوجائے.

اسی طرح، نوع ٹائپ کا مقصد یہ ہے کہ قارئین کو متن کے مواد میں توجہ مرکوز اور خود کو خارج کر دیں. اچھی نوع ٹائپ، تعریف کی طرف سے، نوع ٹائپ ہے جو متن میں مواصلات کے اس مقصد کو پورا کرنے میں مدد کرتا ہے.

قارئین کے لئے دو چیزوں کو متن میں توجہ مرکوز کرنے اور خود کو خارج کرنے کے لئے ہونا ضروری ہے. سب سے پہلے، نوع ٹائپ مناسب (اگر کسی بھی) جذبات کو پہنچانا ضروری ہے. دوسرا، متن پڑھنے کے لئے آسان ہونا ضروری ہے. یہ ہمیں چار ضروری خصوصیات کو لاتا ہے جو آپ کو حق حاصل کرنے کی ضرورت ہے.

• فونٹ خاندان
• حرف کا سائز
• لائن اونچائی (بھی معروف کہا جاتا ہے)
• ٹیکسٹ چوڑائی (ٹیکسٹ پیمائش بھی کہا جاتا ہے)

صحیح فونٹ خاندان کو حاصل کرنے کے ذریعے متن کی چمک کے بنیادی جذبات میں مدد ملتی ہے. دیگر تین خصوصیات حاصل کرنے کا حق یہ یقینی بناتا ہے کہ آپ کا متن پڑھنے کے لئے آسان ہے. سب سے زیادہ حصہ کے لئے، ڈیزائنرز صحیح فونٹ خاندان کو تلاش کرنے میں بہترین ہیں. لہذا، اس مضمون کے باقیوں کے لئے ہم دوسرے تین عوامل پر توجہ مرکوز کریں گے.

پڑھنے کے قابل متن کی فن

کسی بھی منصوبے میں پہلا قدم مقرر کرنا ہے حرف کا سائز ، لکیر کی اونچائی اور چوڑائی آپ کے جسم کا متن. یہ عمل اقسام کو بلایا جاتا ہے. ایک ایسے صفحے کے ساتھ ٹائپ کرنے کی طرف سے شروع کریں جس میں معلومات کو صارف کی ضرورت ہوتی ہے. جتنا ممکن ہو، اس صفحے میں H1، H2، H3، جسم متن اور کیپشنز جیسے ایک سے زیادہ عناصر پر مشتمل ہونا چاہئے، جس کے لئے آپ کو آپ کے ڈیزائن کے لئے کام کرنے کے لۓ ایک شعور کا انتخاب کرنا ہوگا. زیادہ عناصر آپ کے صفحے پر مشتمل ہے، آپ کو بورڈ بھر میں کام کرتا ہے ایک قسم کی منصوبہ بندی کی ترتیب کے امکانات بہتر ہے.

جب آپ منتخب کرتے ہیں حرف کا سائز ، لکیر کی اونچائی اور آپ کے جسم کے متن کے لئے پیمائش کریں، اس بات کو یقینی بنائیں کہ آپ حقیقی مواد استعمال کرتے ہیں. اگر آپ کے پاس اصل مواد نہیں ہے تو، Lorem Ipsum کے بجائے وکیپیڈیا سے متن کا استعمال کریں.

آپ کو اپنے آپ کو اسی صورت حال میں ڈالنے کی بھی ضرورت ہے جو آپ کے لئے قسم کی قسمیں ہیں، کیونکہ قارئین کی آنکھوں اور اسکرین کے درمیان فاصلہ مختلف آلات کے لئے مختلف ہے. اگر آپ موبائل ڈیوائس کے لئے قسم کی ترتیب دے رہے ہیں تو، آپ کے آؤٹ پٹ کو فون کے ذریعہ نظر آتے ہیں. اگر آپ ایک لیپ ٹاپ کے لئے ٹائپ کر رہے ہیں تو، آپ کے ڈیسک ٹاپ کے ساتھ آپ کی میز پر بیٹھتے ہیں، اور اسی طرح.

ایک بار جب آپ نے اپنے آپ کو صحیح ماحول میں آباد کیا ہے تو، آپ کے اقسام کے عمل کو پہلے منتخب کرکے شروع کریں حرف کا سائز ، اس کے بعد پیمائش اور آخر میں لکیر کی اونچائی . ذہن میں رکھو کہ کوئی کامل مجموعہ نہیں ہے - صرف دوسرے صفحات پر نظر آتے ہیں جو آپ کو اچھا نوع ٹائپ ہے اور آپ دیکھیں گے کہ ان میں سے کوئی بھی اس کا استعمال نہیں کرتا حرف کا سائز ، لکیر کی اونچائی اور پیمائش تو، آپ کیا مقصد کے لئے صرف ایک متن ہے جو پڑھنے کے لئے آسان ہے.

صحیح سائز کی ترتیب لکھنے میں وضاحت کرنے کے لئے مشکل ہے، لہذا میں نے آپ کے ساتھ مدد کرنے کے لئے کچھ ویڈیوز بنائے ہیں حرف کا سائز ، پیمائش اور قیادت .

یہاں آپ کی مدد کرنے کے لئے کچھ فوری ہدایات موجود ہیں کہ آپ کو ایک اچھا فونٹ کا سائز، معروف اور پیمائش ہے.

اگر آپ کا فونٹ بہت چھوٹا ہے تو:

• آپ کو متن پڑھنے کے لئے توجہ مرکوز کرنا ہے
• تمہیں اپنی آنکھوں کو ختم کرنا ہوگا
• آپ کو زوم کرنے کی خواہش ہے

اگر آپ کا فونٹ بہت بڑا ہے تو:

• آپ مواد کو پڑھنے کے بجائے خطوط کو نظر انداز کرتے ہیں
• آپ صرف ایک وقت میں ایک سے تین الفاظ پڑھ سکتے ہیں
• آپ کو زوم باہر کرنے کی خواہش ہے

اگر آپ کا متن پیمائش بہت لمبا ہے تو:

• آپ کو متن پڑھنے کے لئے اپنا سر تبدیل کرنا ہوگا
• آپ حراستی مڈ وے کے ذریعے کھو دیتے ہیں

اگر آپ کا متن پیمائش بہت مختصر ہے تو:

• جب متن اگلے لائن پر ٹوٹ جاتا ہے تو آپ کو جلدی محسوس ہوتا ہے
• آپ کی آنکھیں بائیں اور دائیں تیزی سے شیخی سے تھکے ہوئے ہیں

اگر آپ کا معروف بہت تنگ ہے تو:

• متن گھنے اور زبردست محسوس ہوتا ہے
• آپ غلطی سے متن کی غلط لائن پڑھتے ہیں

اگر آپ کا معروف بہت بڑا ہے تو:

• آپ الفاظ کے قطاروں کے درمیان سفید جگہ کی طرف سے پریشان ہو جاتے ہیں

ہمیشہ اچھی نوع ٹائپ کی تعریف کو یاد رکھیں: آپ کو کمال کے بعد نہیں ہیں، آپ صرف متن کے لئے گنہگار ہیں جو پڑھنے کے لئے آسان ہے. ایسا کرنے کے دوران، آپ اپنے اقسام کے انتخاب کے انتخاب کے لۓ اپنے ناظرین کے ساتھ انتخاب کرنا چاہتے ہیں (دوست اور شریک کارکنوں کو بھی بہت اچھا امتحان بنائے گا) اس بات کا یقین کرنے کے لئے کہ آپ صحیح ہو. صرف دوسرے عناصر کے سائز کو ترتیب دینے کے لۓ جب آپ نے جسم کے متن کو ٹائپ کرنے کی کوشش کی ہے.

دیگر عناصر کی قسم

بہت سے ڈیزائنرز اور ڈویلپرز نے انتخاب کیا حرف کا سائز H1 اور H2 جیسے عناصر کے لئے نظریاتی طور پر، اور صرف امید ہے کہ یہ جادو نمبر ان کے ڈیزائن میں اچھی طرح سے کام کرتے ہیں. لیکن پتلی ہوا سے باہر نمبروں کو صرف ھیںچو کرنے کی ضرورت نہیں ہے؛ ٹائپگرافس نے اس کے ساتھ مدد کرنے کے لئے صدیوں کے لئے نوع ٹائپ ترازو کا استعمال کیا ہے. آپ کیا کرتے ہیں آپ کے عنصر کے سائز کے طور پر نوع ٹائپ پیمانے سے ایک نمبر منتخب کرنا ہے. بدقسمتی سے، یہ ترازو براہ راست ویب کے لئے استعمال نہیں کیا جا سکتا کیونکہ وہ پرنٹ ڈیزائن کے لئے تعمیر کر رہے ہیں.

ٹائم براؤن، نوع ٹائپ کے میدان میں ایک ماہر، ایک ماڈیولر پیمانے پر ایک حل کے ساتھ آیا. یہ ایک نوع ٹائپ کی پیمائش کی طرح بالکل افعال کرتا ہے، بلکہ آپ کو جسم کے متن کے ساتھ ماڈیولر پیمانے کی تعمیر کے علاوہ آپ نے فیصلہ کیا ہے.

ماڈیولر پیمانے کو بنانے کے لئے، آپ جسم کا متن لے لو حرف کا سائز (بیس فونٹ سائز بھی کہا جاتا ہے) اور آپ کو پیمانے پر جب تک ایک تناسب سے متعدد بار تناسب کی طرف سے ضرب کریں. اکثر، آپ کے استعمال کا تناسب موسیقی سے حاصل کیا جاتا ہے (چونکہ موسیقی ہم آہنگی میں جڑیں ہے). اوپر کی مدد سے پیدا ہونے والی پیمانے پر ایک مثال ہے ماڈیولر پیمانے پر کیلکولیٹر .

جب آپ ماڈیولر پیمانے پر تعمیر کر رہے ہیں تو، آپ اپنے باقی عناصر کو ترتیب دینے کے لۓ منتقل کر سکتے ہیں، آپ کے طور پر پیمانے سے ایک نمبر اٹھا سکتے ہیں حرف کا سائز . اس کے بعد آپ کو پڑھنے کے قابل عناصر کا ایک اچھا توازن حاصل کرنے تک اسی عمل کے ساتھ معروف اور پیمائش مقرر کریں.

عمودی تال

اگلے مرحلے میں انفرادی عناصر کو عمودی تال کے نام سے ایک ٹیکنالوجی کا استعمال کرتے ہوئے مل کر انفرادی عناصر کی مدد کرنا ہے. ایک عنصر کے لئے اگلے میں ہم آہنگی سے بہاؤ کے لئے، ہمیں اس چیز کو ٹیوٹ کرنے کی ضرورت ہے جو ان میں شامل ہو: سفید جگہ. یہ سفید جگہ کافی بڑا ہونا ضروری ہے کہ اگلے واضح طور پر ایک عنصر کو مختلف کرنے کے لئے کافی بڑا ہونا ضروری ہے، لیکن یہ یقینی بنانے کے لئے کافی چھوٹا ہونا ضروری ہے کہ بہاؤ ٹوٹ نہ جائے.

آپ کو کتنا سفید جگہ استعمال کرنا چاہئے؟ بہت سے ڈیزائنرز ایک شخص کی طرح 10px کا انتخاب کرتے ہیں جو ان کے ارد گرد ڈیزائن کرنے کے لئے آسان ہے. دوسری طرف، بہت سے ڈویلپرز، کسی اور گرڈ کے نظام یا کسی آرٹیکل سے کسی بھی مضمون سے بے ترتیب نمبر (جیسے 6 پی ایکس) کو نکالتا ہے. کوئی تعجب نہیں کہ یہ دونوں بات چیت نہیں کر سکتے ہیں.

جیسا کہ آپ تصور کر سکتے ہیں، سفید جگہ کے لئے ایک جادو نمبر پر انحصار کرنے کی کوئی ضرورت نہیں ہے؛ ہم ایک سے زیادہ استعمال کر سکتے ہیں لکیر کی اونچائی ہمارے جسم کے متن کی قیمت. یہی وجہ ہے کہ ہم متن کے اندر سفید خلائی پیٹرن کو تسلیم کرتے ہیں. مضبوط پیٹرن، ہمارا احساس ہے، اور یہ آسان ہے کہ ہم اپنے دماغ کو مواد میں گھومنے دیں.

عمودی تال استعمال کرنے کے لئے، آپ سب کرتے ہیں:

1. عناصر کے درمیان ایک سے زیادہ بیس بیس کے درمیان سفید جگہ مقرر کریں لکیر کی اونچائی
2. مقرر لکیر کی اونچائی دیگر تمام عناصر کی بنیاد پر ایک سے زیادہ لکیر کی اونچائی

سوال میں ایک سے زیادہ سوال کی ضرورت نہیں ہے. آپ قیمتوں میں 0.5x اور 1.25X کی بنیادوں کا استعمال کرسکتے ہیں لکیر کی اونچائی مزید لچکدار کے ساتھ فراہم کرنے کے لئے. یہ اقدار کام کرتے ہیں کیونکہ عمودی تال کی تکرار کے اصول کا استعمال کرتا ہے.

بیس لائن گرڈ یا نہیں؟

جب بھی ہم عمودی تال کا ذکر کرتے ہیں تو، ایک بیس لائن گرڈ کا تصور ناگزیر طور پر تصویر میں آتا ہے. اگرچہ بیس لائن گرڈ ممکنہ طور پر مددگار ثابت ہوسکتا ہے، یہ زیادہ تر ایک ٹرین کی چوٹی ہے کیونکہ beginners (یا پر) بیس لائنوں کے درمیان متن بنانے پر بہت زیادہ توانائی توجہ مرکوز کرتا ہے کہ وہ عمودی تال کو حاصل کرنے کے لئے ناممکن محسوس کرتے ہیں.

ایمانداری سے، آپ کو کبھی بھی ویب پر مکمل طور پر کام کرنے کے لئے بیس لائن گرڈ نہیں ملے گی کیونکہ نوع ٹائپ میں ریاضی ہمیشہ ذیلی پکسلز (جیسے 24.8 پی ایکس) پر مشتمل ہوتے ہیں، اور تمام براؤزر مختلف طور پر ذیلی صفحات کو سنبھالتے ہیں. مثال کے طور پر، کچھ براؤزر ہر عنصر کو صفحے پر 1px سے دور کرنے کا سبب بنتی ہیں. یہ 1px غلطیاں جمع اور کسی بھی عناصر کو اس صفحے کو کم کر دیا جارہا ہے جو بھی گرڈ سے زیادہ ہے. نتیجے کے طور پر، میں ایک بیس لائن گرڈ کا استعمال کرنے کے خلاف سفارش کرتا ہوں.

منتقل، چلو ذمہ دار طریقوں کے دائرے میں قدم اور ایک سے زیادہ اسکرینوں کے لئے ڈیزائن.

ایک سے زیادہ اسکرینز کے لئے نوع ٹائپ

ایک سے زیادہ اسکرینز کے لئے ڈیزائننگ نوع ٹائپ کوئی مطلب نہیں ہے. تین چیزیں ہیں جو ہمیں ڈیزائن کے نقطہ نظر سے کرنے کی ضرورت ہے.

سب سے پہلے، صارف کی آنکھوں اور ان کی اسکرین کے درمیان فاصلے پر انحصار کرتا ہے کہ وہ کس قسم کے آلے کا استعمال کرتے ہیں. عام طور پر، ایک بڑی سکرین کا استعمال کرتے وقت صارف آلہ کو مزید دور کرے گا. یہ رجحان کا مطلب یہ ہے کہ آپ کو اپنے فونٹ کے سائز کو بڑھانے کی ضرورت ہے جیسے آلہ چوڑائی میں اضافہ ہوتا ہے.

دوسرا، ہم جسم کے متن اور دیگر عناصر کے درمیان تناسب کو برقرار رکھنا چاہتے ہیں. اس کا مطلب یہ ہے کہ ہمیں تمام عناصر کے سائز میں اضافہ کرنا ہوگا جیسا کہ ہم جسم کے متن کے سائز میں اضافہ کرتے ہیں.

تیسری، مخصوص وقفے پر ہم اس میں اضافہ کرنا چاہتے ہیں حرف کا سائز مخصوص عناصر (جیسے H1 کی طرح) ماڈیولر پیمانے سے مختلف نمبروں کو منتخب کرکے. ایسا کرنے کے لئے ہمیں بصری تنظیمی ڈھانچے کو کنٹرول کرنے کی اجازت دیتا ہے اور اس بات کو یقینی بناتا ہے کہ عناصر کو پڑھنے کے لئے صارف کو ھیںچنے کے لئے صرف کافی توجہ دیتی ہے.

ذمہ دار نوع ٹائپ کے لئے کوڈنگ

ہم جانتے ہیں کہ ہمیں اپنے متن کے سائز کو تناسب میں اضافہ کرنے کی ضرورت ہے. ایسا کرنے کا سب سے آسان طریقہ بڑھانا ہے حرف کا سائز کے اندر ایچ ٹی ایم ایل منتخب کنندہ. ہم صارف کے احترام کے لئے رشتہ دار یونٹس بھی استعمال کرنا چاہتے ہیں حرف کا سائز ترجیحات.

 ایچ ٹی ایم ایل {فونٹ سائز: 100٪؛}
media (مائن چوڑائی: 40em) {
 ایچ ٹی ایم ایل {فونٹ سائز: 112.5٪؛}
} 

ہم دوسرے عناصر کے لئے ایک رشتہ دار یونٹ استعمال کرنا چاہتے ہیں، لہذا وہ ایچ ٹی ایم ایل کے مطابق پیمانے پر حرف کا سائز ( H2. مندرجہ ذیل مثال میں). اگر آپ کو تبدیل کرنے کی ضرورت ہے حرف کا سائز ماڈیولر پیمانے میں ایک مختلف نمبر پر، آپ سب کچھ تبدیل کر رہے ہیں حرف کا سائز اس کے مطابق ( H1. ذیل میں).

 H1 {فونٹ سائز: 2.369em؛}
media (مائن چوڑائی: 40em) {
 ایچ ٹی ایم ایل {فونٹ سائز: 3.147em؛}
}

H2 {فونٹ سائز: 1.777em؛} 

اگرچہ یہ عمل سادہ لگ رہا ہے، اگرچہ ریاضی میں ملوث ہونے کی وجہ سے نئے ڈویلپرز ایک ٹن سر درد کا سامنا کرسکتے ہیں، لہذا میں مدد کرنے کے لئے افعال اور مکسز استعمال کرنے کی سفارش کرتا ہوں. میں اکثر استعمال کرتا ہوں MS() سے ماڈیولر پیمانے لائبریری . اس کے ساتھ، آپ لکھ سکتے ہیں محترمہ (4) بجائے 3.157em. اور محترمہ (3) بجائے 2.369em. .

ایک فنکشن کا ایک مثال جو عمودی تال کا حساب کرنے کے بوجھ کو کم کرسکتا ہے: