వెబ్ డిజైన్ లో లీడింగ్ గురించి నేర్చుకోవడం

గ్రాఫిక్ మరియు ముద్రణ రూపకల్పనల నుండి వెబ్ డిజైన్ ఎల్లప్పుడూ ప్రిన్సిపల్స్ మరియు నిర్వచనాలను స్వీకరించింది. ఇది వెబ్ టైపోగ్రఫీకి వచ్చినప్పుడు మరియు మన వెబ్ పుటలలో అక్షరరూపాలు పొందుతున్నప్పుడు ఇది ప్రత్యేకంగా వర్తిస్తుంది. ఈ సమాంతరాలు ఎప్పుడూ 1 నుండి 1 అనువాదాలు కాదు, కానీ ఒక క్రమశిక్షణ మరొకరికి ప్రభావితం చేసినట్లు మీరు ఖచ్చితంగా చూడవచ్చు. సంప్రదాయ టైపోగ్రఫీ పదం "ప్రముఖ" మరియు "లైన్-ఎత్తు" అని పిలిచే CSS ఆస్తి మధ్య సంబంధాన్ని మీరు పరిగణించినప్పుడు ఇది స్పష్టంగా తెలుస్తుంది.

ప్రముఖ ఉద్దేశ్యం

ముద్రిత పేజీ కోసం టైపోగ్రఫీని రూపొందించడానికి ప్రజలు చేతితో మెటల్ లేదా చెక్క అక్షరాలను ఉపయోగించినప్పుడు, ఆ రేఖల మధ్య అంతరాన్ని సృష్టించడం కోసం త్రిభుజం యొక్క అడ్డగీత పంక్తుల మధ్య ప్రధాన భాగాలను ఉంచారు. మీరు పెద్ద స్థలాన్ని కోరుకుంటే, మీరు పెద్ద పెద్ద భాగాలను చేర్చవచ్చు. ఈ పదం "ప్రముఖ" అనే పదాన్ని ఉపయోగించారు. మీరు టైపోగ్రఫిక్ డిజైన్ మరియు ప్రిన్సిపల్స్ గురించి పుస్తకంలో "ప్రముఖ" పదాన్ని చూస్తే, అది ఏదో ఒక ప్రభావాన్ని చదవగలదు - "వరుస వరుస రేఖల ఆధార రేఖల మధ్య దూరం."

వెబ్ డిజైన్ లో ప్రముఖ

డిజిటల్ రూపకల్పనలో, ప్రముఖ పదంగా ఇప్పటికీ టెక్స్ట్ యొక్క పంక్తుల మధ్య అంతరాన్ని సూచించడానికి ఉపయోగిస్తారు. అనేక కార్యక్రమాలు ఈ ఖచ్చితమైన పదాన్ని ఉపయోగిస్తాయి, అయినప్పటికీ వాస్తవ కార్యక్రమాలు ఈ కార్యక్రమాలలో స్పష్టంగా ఉపయోగించబడకపోయినా, ఈ సూత్రం యొక్క ఖచ్చితమైన అమలు మారినప్పటికీ, సాంప్రదాయికమైన వాటి నుండి రూపకల్పన రుణ ఆలోచనలు కొత్త రూపాల యొక్క గొప్ప ఉదాహరణ.

ఇది వెబ్ డిజైన్ విషయానికి వస్తే, "ప్రముఖ" కోసం CSS ఆస్తి లేదు. బదులుగా, టెక్స్ట్ యొక్క ఈ విజువల్ డిస్ప్లేని నిర్వహిస్తున్న CSS ఆస్తి లైను-ఎత్తు అని పిలుస్తారు. మీరు వచనం సమాంతర అక్షరాల మధ్య అదనపు ఖాళీని కలిగి ఉండాలని అనుకుంటే, మీరు ఈ ఆస్తిని ఉపయోగించాలి. ఉదాహరణకు, మీ సైట్ యొక్క

మూలకం లోపల అన్ని పేరాలకు లైన్-ఎత్తుని పెంచాలని మీరు కోరుకున్నారని అనుకొంటే, మీరు ఇలా చేయగలరు:

ప్రధాన p {లైన్-ఎత్తు: 1.5; }

ఇది ఇప్పుడు 1.5 రెట్లు సాధారణ లైన్ ఎత్తుగా ఉంటుంది, ఇది పేజీ యొక్క డిఫాల్ట్ ఫాంట్ పరిమాణంపై ఆధారపడి ఉంటుంది (ఇది సాధారణంగా 16px).

లైన్ ఎత్తు ఎప్పుడు ఉపయోగించాలో

పైన వివరించిన విధంగా, లైన్-ఎత్తు పేరాల్లో టెక్స్ట్ యొక్క పంక్తులు లేదా టెక్స్ట్ ఇతర బ్లాక్స్ స్పేస్ ఉపయోగించడానికి తగిన. పంక్తుల మధ్య చాలా తక్కువ స్థలం ఉంటే, టెక్స్ట్ మీ సైట్కు ప్రేక్షకులకు చదవడానికి కలగలిసిపోయింది మరియు కష్టం అవుతుంది. అదేవిధంగా, పంక్తులు పేజీలో చాలా దూరం దూరంగా ఉంటే, పఠనం యొక్క సాధారణ ప్రవాహం ఆటంకపరచబడుతుంది మరియు ఆ కారణంగా మీ పాఠంతో పాఠకులు ఇబ్బంది పడుతారు. మీరు ఉపయోగించిన లైన్-ఎత్తు అంతరాన్ని తగిన మొత్తంలో ఎందుకు గుర్తించాలనుకుంటున్నారు. పేజీ యొక్క చదవదగ్గ రీతిలో వారి ఫీడ్బ్యాక్ కొరకు వాస్తవిక వాడుకదారులతో మీ రూపకల్పనను పరీక్షించవచ్చు.

లైన్ ఎత్తు ఉపయోగించరాదు ఉన్నప్పుడు

మీ పేజీ యొక్క రూపానికి తెల్లని పావును లేదా అంచులు గల లైన్-ఎత్తుతో లైన్-ఎత్తు కంగారుపడకండి, ఇందులో శీర్షిక లేదా పేరాస్తో సహా. ఆ ఖాళీ అంతరం లేదు, అందువలన అది లైన్-ఎత్తుతో నిర్వహించబడదు.

మీరు కొంత వచన అంశాల్లో ఖాళీని జోడించాలనుకుంటే, మీరు అంచులు లేదా పాడింగ్లను ఉపయోగించాలి. మేము ఉపయోగించిన మునుపటి CSS ఉదాహరణకి తిరిగి వెళ్లడం, మేము దీన్ని జోడించాము:

ప్రధాన p {లైన్-ఎత్తు: 1.5; మార్జిన్-దిగువ: 24px; }

ఇది ఇప్పటికీ మా పేజీ యొక్క పేరాగ్రాఫ్ (

మూలకం లోపల ఉన్నది) కోసం టెక్స్ట్ యొక్క పంక్తుల మధ్య 1.5 లైన్ ఎత్తు ఉంటుంది. అదే పేరాల్లో కూడా వాటిలో ప్రతి ఒక్కటికి 24 పిక్సెల్స్ ఉంటాయి, వీటిని దృశ్య విరామాలకు అనుమతించడం ద్వారా పాఠకులు సులభంగా మరొక పేరాని గుర్తించి వెబ్ సైట్ పఠనం సులభంగా చేయవచ్చు. మీరు ఇక్కడ అంచుల స్థానంలో పాడింగ్ ఆస్తిని కూడా ఉపయోగించవచ్చు:

ప్రధాన p {లైన్-ఎత్తు: 1.5; padding-bottom: 24px; }

దాదాపు అన్ని సందర్భాల్లో, ఇది మునుపటి CSS వలె ప్రదర్శించబడుతుంది.

"సేవల-మెను" యొక్క తరగతితో ఉన్న జాబితాలోని అంశాల దిగువ అంతరాన్ని జోడించాలని మీరు అనుకుంటారని అనుకుందాం, మీరు అంచు లైన్ ఎత్తు లేకపోతే అంచులు లేదా పాడింగ్లను ఉపయోగించాలి. కాబట్టి ఇది సముచితం.

. సర్వీసెస్ మెనూ li { మీరు ప్రతి-బులెట్ పాయింట్ కోసం పలు పంక్తులను అమలు చేయగల టెక్స్ట్ యొక్క సుదీర్ఘ పరుగులు కలిగి ఉన్నాయని భావించి, జాబితా-అంశాల్లోని టెక్స్ట్ యొక్క ఖాళీని మీరు సెట్ చేయాలనుకుంటే ఇక్కడ లైన్-ఎత్తు మాత్రమే ఉపయోగించబడుతుంది.