Blog

CSS Typography Kya Hoti Hai – Font Properties & Text Properties in CSS

Font Properties & Text Properties

CSS (Cascading Style Sheets) ka use web pages ko style dene ke liye hota hai. Fonts aur text properties CSS ka ek important part hain jo content ko readable aur attractive banata hai.

1. Font Properties (Font se related styling options):

Font properties ka use text ke appearance ko control karne ke liye hota hai, jaise ki kaunsa font use hoga, size kya hoga, weight kaisa hoga, etc.

a. font-family:

Ye property define karti hai ki web page pe kaunsa font use hoga. Multiple fonts ko ek list me specify kar sakte hain, taki agar pehla font available na ho to doosra font use ho sake.

p {
  font-family: Arial, Helvetica, sans-serif;
}

Yahaan pe agar Arial available hai to use hoga, agar nahi hai to Helvetica, aur agar woh bhi nahi hai to koi bhi sans-serif font automatically apply ho jayega.

b. font-size:

Is property ka use text ka size set karne ke liye hota hai. Values pixels (px), em, rem, %, ya predefined sizes (small, medium, large) me di ja sakti hai.

h1 {
  font-size: 24px;
}

c. font-weight:

Ye property text ka weight ya boldness define karti hai.
Values: normal, bold, lighter, bolder, ya numeric values (100 se 900 tak).

p {
  font-weight: bold;
}

d. font-style:

Ye property text ko normal, italic ya oblique banane ke liye use hoti hai.

p {
  font-style: italic;
}

e. font-variant:

font-variant ek CSS property hai jo text ke small caps format ko control karti hai. Yeh property specify karti hai ki text normal dikhai dega ya phir small-caps format me.

p {
  font-variant: small-caps;
}

f. Font Shorthand Property:

Ek hi line me font-family, size, weight, style ko define karne ka shortcut hai.

selector {
  font: font-style font-weight font-size font-family;
}

Example:

p {
  font: italic bold 16px "Times New Roman", serif;
}

Isme text italic hoga, bold hoga, 16px size hoga aur “Times New Roman” font lagega.

2. Text Properties (Text ko Style Dene ke Options):

Text properties ka use text ka color, spacing, alignment, aur decoration set karne ke liye hota hai. Yeh properties CSS me styling aur readability ko improve karne ke liye bahut important hoti hain.

(a) Color

Ye property text ka color set karti hai. Iska use headings, paragraphs, aur links ko visually enhance karne ke liye hota hai.

Values:

Color names: red, blue, green, yellow, cyan, magenta, black, white

HEX codes: #ff0000, #00ff00, #0000ff, #ffff00, #ff00ff, #000000, #ffffff

RGB: rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)

RGBA: rgba(255, 0, 0, 0.5) (alpha transparency ke saath)

HSL: hsl(0, 100%, 50%)

h1 {
    color: blue;
}

Contrast ka dhyan rakhein: Light background ke saath dark text aur dark background ke saath light text use karein.

Accessibility par focus karein: High contrast colors visually impaired users ke liye better hote hain.

(b) Letter-Spacing

Is property se letters ke beech ki spacing set hoti hai. Large headings aur banners me iska use readability improve karne ke liye hota hai.

p {
    letter-spacing: 2px;
}

Small text ke liye kam spacing rakhein, large text ke liye zyada.

Capital letters wale text ke liye slightly more spacing use karein.

(c) Word-Spacing

Ye property words ke beech ki space badhane ya kam karne ke liye hoti hai. Paragraph readability enhance karne ke liye iska use hota hai.

p {
    word-spacing: 5px;
}

Zyada word-spacing readability ko impact kar sakti hai, moderate values use karein.

Long paragraphs me slightly increased spacing readability improve karti hai.

(d) Line-Height

Ye property lines ke beech ki space define karti hai. Yeh paragraphs aur headings ki readability improve karne ke liye bahut zaroori hai.

p {
    line-height: 1.5;
}

Paragraphs ke liye 1.5 ya 2 ka line-height best hota hai.

Headings me 1.2 ya 1.3 ka line-height better hota hai.

(e) Text-Align

Ye property text ka alignment set karti hai. Text alignment ka use layouts aur design ko structured banane ke liye hota hai.

Values:

left, right, center, justify

p {
    text-align: center;
}

Articles ke liye justify use karein, taaki text evenly aligned ho.

Headlines aur banners ke liye center alignment best hota hai.

(f) Text-Decoration

Is property se text pe underline, overline, ya line-through apply hota hai. Links aur highlighted text ke liye iska use hota hai.

a {
    text-decoration: none;
}

Links ke liye underline use karein taaki users ko clickable element pata chale.

Headings aur emphasis ke liye overline ya line-through use karein.

(g) Text-Transform

Ye property text ko uppercase, lowercase ya capitalize karne ke liye hoti hai. Iska use uniform text formatting ke liye hota hai.

p {
    text-transform: uppercase;
}

Headings ke liye uppercase use karein.

First letter capitalize karne ke liye capitalize use karein.

(h) Text-Shadow

Is property se text ke peeche shadow add kiya jata hai. Iska use design elements me attractive headings banane ke liye hota hai.

h1 {
    text-shadow: 2px 2px 5px gray;
}

Dark backgrounds ke saath light shadow aur light backgrounds ke saath dark shadow use karein.

Minimal shadow values readability ke liye better hote hain.

(i) Text-Overflow

Is property ka use jab text box me fit nahi hota tab hota hai. Ye overflow text ko manage karne me madad karti hai.

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Long text ke liye ellipsis use karein taaki content neatly truncate ho jaye.

Responsive design me proper text wrapping ka dhyan rakhein.

Quiz: Test Your Knowledge on CSS Typography

Bonus: Practical Application!

Aaj hi apne webpage par CSS Typography ka istemal karke dekhein!

CSS Typography ko sahi tareeke se samajhne ke liye different properties jaise font-family, font-size, font-weight, line-height, letter-spacing, aur text-align ka upayog karein aur apne webpage ke text styling ko aur bhi effective banayein.

Leave a Reply