random
أخبار ساخنة

دليل شامل لتنسيق الخطوط في CSS بطريقة احترافية

Samouel Ghaly
الصفحة الرئيسية

الدَّلِيلُ الشَّامِلُ لِتَنْسِيقِ الخُطُوطِ فِي CSS بِطَرِيقَةٍ احْتِرَافِيَّةٍ

إِنَّ هَنْدَسَةَ الخُطُوطِ (Typography) لَيْسَتْ مُجَرَّدَ اخْتِيَارِ شَكْلٍ جَمِيلٍ لِلْكَلِمَاتِ، بَلْ هِيَ العِلْمُ الَّذِي يُحَدِّدُ كَيْفِيَّةَ قِرَاءَةِ المُسْتَخْدِمِ لِلْمُحْتَوَى، وَمَدَى بَقَائِهِ دَاخِلَ المَوْقِعِ. تَمْنَحُنَا لُغَةُ CSS تَرْسَانَةً مِنَ الخَصَائِصِ لِتَشْكِيلِ الخُطُوطِ وَفْقَ أَعْلَى مَعَايِيرِ الجَوْدَةِ البَصَرِيَّةِ. فِي هَذَا الدَّلِيلِ الشَّامِلِ، سَنَجْمَعُ كُلَّ مَا تَحْتَاجُهُ لِتَنْسِيقِ خُطُوطِ مَوْقِعِكَ كَالمُحْتَرِفِينَ.

1. مَنْظُومَةُ أَبْعَادِ الخُطُوطِ: font-size وَالوَحَدَاتُ الذَّكِيَّةُ

تَحْدِيدُ حَجْمِ النَّصِّ عَبْرَ خَاصِّيَّةِ font-size يُمَثِّلُ خَطْوَةً حَرِجَةً. التَّوَجُّهُ الحَدِيثُ فِي تَصْمِيمِ الوَيْبِ يَبْتَعِدُ تَمَامًا عَنْ وِحْدَةِ البِكْسِل (px) الثَّابِتَةِ، وَيَعْتَمِدُ عَلَى الوَحَدَاتِ المَرِنَةِ:

  • rem: وِحْدَةٌ نِسْبِيَّةٌ تَعْتَمِدُ عَلَى حَجْمِ الخَطِّ الاِفْتِرَاضِيِّ لِلْمُتَصَفِّحِ (غَالِبًا 1rem = 16px). هِيَ الأَفْضَلُ لِأَنَّهَا تَحْتَرِمُ إِعْدَادَاتِ المُسْتَخْدِمِينَ ذَوِي الِاحْتِيَاجَاتِ البَصَرِيَّةِ خَاصَّةً عِنْدَ تَكْبِيرِ الخَطِّ مِنَ النِّظَامِ.
  • em: وِحْدَةٌ نِسْبِيَّةٌ تَعْتَمِدُ عَلَى حَجْمِ خَطِّ العُنْصُرِ الأَبِ النِّسْبِيِّ. مُمْتَازَةٌ لِتَنْسِيقِ الهَوَامِشِ الدَّاخِلِيَّةِ بِحَيْثُ تَتَنَاسَبُ طَرْدِيًّا مَعَ تَغَيُّرِ حَجْمِ النَّصِّ.

مِثَالٌ لِلْكِتَابَةِ المَرِنَةِ:

html {
    font-size: 16px; /* التَّعْيِينُ الاِفْتِرَاضِيُّ */
}
h1 {
    font-size: 2.5rem; /* يُعَادِلُ 40 بِكْسِل وَلَكِنَّهُ مَرِنٌ */
}
p {
    font-size: 1rem;   /* يُعَادِلُ 16 بِكْسِل */
}

2. أَوْزَانُ وَأَنْمَاطُ الخُطُوطِ: font-weight وَ font-style

لِإِيجَادِ تَبَايُنٍ بَصَرِيٍّ وَاضِحٍ (Visual Hierarchy) يُمَكِّنُ القَارِئَ مِنْ تَمْيِيزِ العَنَاوِينِ عَنِ الفَقَرَاتِ، نَسْتَخْدَمُ خَصَائِصَ تَعْدِيلِ بِنْيَةِ الحَرْفِ:

أ- سُمْكُ الخَطِّ: font-weight

يُمْكِنُ اسْتِخْدَامُ الكَلِمَاتِ المَحْجُوزَةِ مِثْلَ normal أَوْ bold، لَكِنَّ الاِحْتِرَافِيَّةَ تَكْمُنُ فِي اسْتِخْدَامِ القِيَمِ الرَّقَمِيَّةِ الدَّقِيقَةِ (مِنْ 100 إِلَى 900) حَسَبَ الأَوْزَانِ المُسْتَوْرَدَةِ مَعَ الخَطِّ:

  • 400: لِلنَّصِّ العَادِيِّ وَالقِرَاءَةِ الطَّوِيلَةِ (Regular).
  • 700: لِلْعَنَاوِينِ البَارِزَةِ (Bold).
  • 300: لِلْمَظْهَرِ الرَّفِيعِ الأَنِيقِ فِي العَنَاوِينِ الكَبِيرَةِ جَدًّا (Light).

ب- مَيَلَانُ الخَطِّ: font-style

تُسْتَخْدَمُ القِيمَةُ italic لِجَعْلِ النَّصِّ مَائِلًا، وَهُوَ أَمْرٌ جَوْهَرِيٌّ عِنْدَ كِتَابَةِ الاِقْتِبَاسَاتِ أَوْ المَصْطَلَحَاتِ العِلْمِيَّةِ.

3. الخَاصِّيَّةُ المُخْتَصَرَةُ السِّحْرِيَّةُ: font Shorthand

بَدَلًا مِنْ كِتَابَةِ خَمْسَةِ أَسْطُرٍ لِتَعْيِينِ خَصَائِصِ الخَطِّ، تُتِيحُ لَنَا CSS جَمْعَهَا كُلَّهَا فِي سَطْرٍ وَاحِدٍ مُخْتَصَرٍ عَبْرَ خَاصِّيَّةِ font. وَلَكِنْ حَذَارِ! يَجِبُ الِالْتِزَامُ بِالتَّرْتِيبِ الصَّارِمِ لِكَيْ يَقْبَلَهَا المُتَصَفِّحُ: 

font: [style] [variant] [weight] [size]/[line-height] [family];

مِثَالٌ تَطْبِيقِيٌّ جَامِعٌ:

.article-preview {
    /* مَائِل، سَمِيك (700)، حَجْم 1.2rem، ارْتِفَاع سَطْر 1.6، خَط Cairo */
    font: italic bold 1.2rem/1.6 'Cairo', sans-serif;
}

4. الخَاصِّيَّةُ المُتَقَدِّمَةُ: font-display (تَسْرِيعُ عَرْضِ الخُطُوطِ)

عِنْدَمَا تَسْتَخْدَمُ خُطُوطًا خَارِجِيَّةً (مِثْلَ Google Fonts)، قَدْ يَحْدُثُ تَأْخِيرٌ فِي تَحْمِيلِ الخَطِّ، مِمَّا يَجْعَلُ النَّصَّ يَخْتَفِي لِأَجْزَاءٍ مِنْ ثَانِيَةٍ قَبْلَ أَنْ يَظْهَرَ فَجْأَةً. لِحَلِّ هَذِهِ المُشْكِلَةِ، نَسْتَخْدَمُ خَاصِّيَّةَ font-display دَاخِلَ قَاعِدَةِ @font-face:

القِيمَةُ طَرِيقَةُ العَمَلِ وَالأَثَرُ عَلَى المَوْقِعِ
swap (يُنْصَحُ بِهَا) يَعْرِضُ المُتَصَفِّحُ خَطَّ النِّظَامِ الاِفْتِرَاضِيِّ فَوْرًا، وَبِمُجَرَّدِ اكْتِمَالِ تَحْمِيلِ الخَطِّ الخَارِجِيِّ يَقُومُ بِاسْتِبْدَالِهِ تِلْقَائِيًّا. هَذَا يَمْنَعُ اخْتِفَاءَ النَّصِّ تمامًا.
block يَقُومُ المُتَصَفِّحُ بِإِخْفَاءِ النَّصِّ تَمَامًا لِفَتْرَةٍ قَصِيرَةٍ (تَصِلُ لِثَلَاثِ ثَوَانٍ) اِنْتِظَارًا لِتَحْمِيلِ الخَطِّ، مِمَّا قَدْ يُزْعِجُ الزَّائِرَ.
optional يَمْنَحُ الخَطَّ فُرْصَةً جِدًّا قَصِيرَةً لِلتَّحْمِيلِ، فَإِذَا تَأَخَّرَ، يَعْتَمِدُ خَطَّ النِّظَامِ لِتِلْكَ الجَلْسَةِ تَمَامًا لِحِمَايَةِ سُرْعَةِ الأَدَاءِ.

5. مِثَالٌ عَمَلِيٌّ لِتَهْيِئَةِ مَلَفِّ خُطُوطٍ مَحَلِّيٍّ احترافي

إِذَا كُنْتَ تَمْتَلِكُ مَلَفَّ الخَطِّ دَاخِلَ خَادِمِكَ وَتُرِيدُ اسْتِدْعَاءَهُ بِأَعْلَى كَفَاءَةٍ مُمْكِنَةٍ، إِلَيْكَ الهَيْكَلَ النَّمُوذَجِيَّ لِذَلِكَ: 

/* تَعْرِيفُ الخَطِّ الأَسَاسِيِّ دَاخِلَ CSS */
@font-face {
    font-family: 'CustomArabic';
    src: url('fonts/CustomArabic-Regular.woff2') format('woff2'), /* الصِّيغَة الأَحْدَث والأَصْغَر حَجْمًا */
         url('fonts/CustomArabic-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* مَنْعُ ظَاهِرَةِ النَّصِّ المَخْفِيِّ */
}

/* تَطْبِيقُ الخَطِّ عَلَى العَنَاصِرِ */
body {
    font-family: 'CustomArabic', Tahoma, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
}
💡 نَصِيحَةُ الخُبَرَاءِ لِأَعْلَى مُسْتَوَيَاتِ الِاحْتِرَافِ: عِنْدَ تَنْسِيقِ النُّصُوصِ، اِجْعَلْ هُنَاكَ نِسْبَةً ثَابِتَةً لِلْأَحْجَامِ تُسَمَّى (Modular Scale). مِثَالٌ: إِذَا كَانَ خَطُّ المَقَالِ 1rem، اِجْعَلِ العُنْوَانَ الفَرْعِيَّ 1.5rem، وَالعُنْوَانَ الرَّئِيسِيَّ 2.25rem. هَذِهِ التَّنَاسُبَاتُ الهَنْدَسِيَّةُ الرَّاقِيَةُ مَعَ ارْتِفَاعِ سَطْرٍ مُرِيحٍ (مِثْلَ 1.7 لِلْعَرَبِيَّةِ) تَمْنَحُ مَوْقِعَكَ طَابَعًا مَطْبُوعًا فَخْمًا يُشْبِهُ المَجَلَّاتِ العَالَمِيَّةَ.
google-playkhamsatmostaqltradent