Web sitelerinin ve uygulamalar\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131ndan biri metinlerdir. Kullan\u0131c\u0131lar\u0131n bir web sayfas\u0131n\u0131 ziyaret ettiklerinde ilk etkile\u015fime girdikleri ve bilgi edindikleri en \u00f6nemli unsurlardan biri olan metinler, sadece i\u00e7erik sunmakla kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini, marka kimli\u011fini ve genel esteti\u011fi de b\u00fcy\u00fck \u00f6l\u00e7\u00fcde etkiler. Metinlerin do\u011fru bir \u015fekilde \u015fekillendirilmesi, okunabilirli\u011fi art\u0131r\u0131r, g\u00f6rsel hiyerar\u015fiyi sa\u011flar ve kullan\u0131c\u0131lar\u0131n sayfada rahat\u00e7a gezinmesine yard\u0131mc\u0131 olur. CSS (Cascading Style Sheets), web sayfalar\u0131ndaki metin elemanlar\u0131n\u0131n yaz\u0131 tipi, boyutu, rengi ve di\u011fer bir\u00e7ok g\u00f6rsel \u00f6zelli\u011fini kontrol etmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir stil dilidir.<\/p>\n
Bu makalede, CSS kullanarak metin elemanlar\u0131n\u0131 nas\u0131l etkili bir \u015fekilde \u015fekillendirebilece\u011finizi ayr\u0131nt\u0131l\u0131 olarak inceleyece\u011fiz. Yaz\u0131 tipi se\u00e7imi ve y\u00f6netimi, boyutland\u0131rma teknikleri, renk paletlerinin uygulanmas\u0131 ve di\u011fer \u00f6nemli metin stil \u00f6zellikleri \u00fczerine odaklanaca\u011f\u0131z. Ayr\u0131ca, eri\u015filebilirlik, duyarl\u0131l\u0131k ve performans gibi modern web geli\u015ftirme prensiplerini de g\u00f6z \u00f6n\u00fcnde bulundurarak en iyi uygulamalar\u0131 ve ipu\u00e7lar\u0131n\u0131 payla\u015faca\u011f\u0131z. Metin \u015fekillendirme sadece estetik bir tercih de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 dostu ve i\u015flevsel bir web sitesi olu\u015fturman\u0131n temel bir par\u00e7as\u0131d\u0131r.<\/p>\n
Yaz\u0131 tipi, bir metnin karakterlerinin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc belirleyen temel \u00f6zelliktir. Do\u011fru yaz\u0131 tipi se\u00e7imi, markan\u0131z\u0131n ki\u015fili\u011fini yans\u0131tabilir, okunabilirli\u011fi art\u0131rabilir ve kullan\u0131c\u0131ya ho\u015f bir g\u00f6rsel deneyim sunabilir. CSS, Yukar\u0131daki \u00f6rnekte, taray\u0131c\u0131 s\u0131ras\u0131yla “Helvetica Neue”, “Helvetica”, “Arial” yaz\u0131 tiplerini aramaya ba\u015flar. E\u011fer bu fontlardan hi\u00e7biri kullan\u0131c\u0131n\u0131n sisteminde bulunamazsa, taray\u0131c\u0131 son olarak CSS’te be\u015f genel yaz\u0131 tipi ailesi bulunur ve bunlar her zaman bir Her kullan\u0131c\u0131n\u0131n sisteminde ayn\u0131 fontlar\u0131n y\u00fckl\u00fc olmamas\u0131 nedeniyle, “web g\u00fcvenli” fontlar olarak adland\u0131r\u0131lan ve \u00e7o\u011fu i\u015fletim sisteminde yayg\u0131n olarak bulunan fontlar\u0131 kullanmak, \u00f6zel font y\u00fcklemesi yapmadan tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm elde etmenin bir yoludur. Arial, Verdana, Georgia, Times New Roman, Courier New gibi fontlar bu kategoriye girer.<\/p>\n Web sitenizde belirli bir marka kimli\u011fini yans\u0131tmak veya benzersiz bir tasar\u0131m olu\u015fturmak istedi\u011finizde, kullan\u0131c\u0131n\u0131n sisteminde bulunmayan \u00f6zel fontlar\u0131 dahil etmeniz gerekebilir. * \u00d6zel fontlar\u0131 kendiniz bar\u0131nd\u0131rmak yerine, Google Fonts, Adobe Fonts gibi servisleri kullanarak fontlar\u0131 kolayca sitenize entegre edebilirsiniz. Bu servisler, genellikle CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) \u00fczerinden fontlar\u0131 sunarak daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve geni\u015f bir font k\u00fct\u00fcphanesi sunar.<\/p>\n Ard\u0131ndan CSS’inizde bu fontu kullanabilirsiniz:<\/p>\n Birden fazla font \u00f6zelli\u011fini tek bir deklarasyonda ayarlamak i\u00e7in k\u0131salt\u0131lm\u0131\u015f Bu \u00f6rnekte, metin italik, k\u00fc\u00e7\u00fck b\u00fcy\u00fck harfli, kal\u0131n, 16 piksel boyutunda, 1.5 sat\u0131r y\u00fcksekli\u011fine sahip ve “Georgia” veya serif ailesinden bir fontla g\u00f6r\u00fcnt\u00fclenecektir.<\/p>\n Metin boyutu, okunabilirlik ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn genel esteti\u011fi i\u00e7in kritik bir fakt\u00f6rd\u00fcr. CSS’te Mutlak birimler, \u00e7\u0131kt\u0131n\u0131n fiziksel boyutuna g\u00f6re metin boyutunu tan\u0131mlar ve genellikle ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcnden veya kullan\u0131c\u0131n\u0131n taray\u0131c\u0131 ayarlar\u0131ndan etkilenmezler. G\u00f6receli birimler, ba\u015fka bir \u00f6\u011fenin boyutuna veya g\u00f6r\u00fcnt\u00fc alan\u0131 boyutuna g\u00f6re metin boyutunu tan\u0131mlar. Bu birimler, duyarl\u0131 tasar\u0131m ve eri\u015filebilirlik i\u00e7in \u00e7ok daha esnektir. * * K\u00f6k Font Boyutu<\/strong>: Metin rengi, okunabilirlik, marka kimli\u011fi ve g\u00f6rsel \u00e7ekicilik i\u00e7in hayati \u00f6neme sahiptir. CSS’te Metin rengini tan\u0131mlamak i\u00e7in \u00e7e\u015fitli formatlar mevcuttur:<\/p>\n CSS, “red”, “blue”, “green”, “black”, “white” gibi \u00f6nceden tan\u0131mlanm\u0131\u015f bir\u00e7ok renk ismini destekler. Kolay anla\u015f\u0131l\u0131r olsalar da, hassas renk se\u00e7imi i\u00e7in s\u0131n\u0131rl\u0131d\u0131rlar.<\/p>\n HEX kodlar\u0131, alt\u0131 haneli onalt\u0131l\u0131k bir say\u0131 (veya \u00fc\u00e7 haneli k\u0131saltma) kullanarak renkleri tan\u0131mlar. Her iki hane, s\u0131ras\u0131yla k\u0131rm\u0131z\u0131 (Red), ye\u015fil (Green) ve mavi (Blue) renk bile\u015fenlerinin yo\u011funlu\u011funu temsil eder. \u00c7ok yayg\u0131n ve hassas renk se\u00e7imi sa\u011flar.<\/p>\n RGB de\u011ferleri, 0 ile 255 aras\u0131ndaki \u00fc\u00e7 say\u0131 kullanarak k\u0131rm\u0131z\u0131, ye\u015fil ve mavi renk bile\u015fenlerinin yo\u011funlu\u011funu belirtir.<\/p>\n RGBA, RGB’ye ek olarak bir alfa (\u015feffafl\u0131k) kanal\u0131 i\u00e7erir. Alfa de\u011feri 0 (tamamen \u015feffaf) ile 1 (tamamen opak) aras\u0131nda bir say\u0131d\u0131r.<\/p>\n HSL (Hue, Saturation, Lightness), renkleri insan alg\u0131s\u0131na daha yak\u0131n bir \u015fekilde tan\u0131mlar. HSLA, HSL’ye ek olarak bir alfa (\u015feffafl\u0131k) kanal\u0131 i\u00e7erir.<\/p>\n Metin rengi ve arka plan rengi aras\u0131ndaki kontrast, okunabilirlik ve eri\u015filebilirlik a\u00e7\u0131s\u0131ndan hayati \u00f6neme sahiptir. Yetersiz kontrast, \u00f6zellikle g\u00f6rme engelli veya renk k\u00f6r\u00fc kullan\u0131c\u0131lar i\u00e7in metnin okunmas\u0131n\u0131 imkans\u0131z hale getirebilir.<\/p>\n * WCAG (Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri)<\/strong>: WCAG 2.1 y\u00f6nergeleri, metin ve arka plan aras\u0131ndaki minimum kontrast oranlar\u0131n\u0131 belirtir. Normal metin i\u00e7in en az 4.5:1, b\u00fcy\u00fck metinler i\u00e7in ise 3:1 oran\u0131 \u00f6nerilir. CSS, yaz\u0131 tipi, boyut ve rengin \u00f6tesinde metinlerin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc kontrol etmek i\u00e7in bir\u00e7ok ba\u015fka \u00f6zellik sunar.<\/p>\n Bu \u00f6zellikler, s\u0131ras\u0131yla harfler ve kelimeler aras\u0131ndaki bo\u015flu\u011fu ayarlar. Okunabilirli\u011fi etkileyebilir, \u00f6zellikle ba\u015fl\u0131klar i\u00e7in dekoratif ama\u00e7larla kullan\u0131labilir.<\/p>\nfont-family<\/code> \u00f6zelli\u011fi ba\u015fta olmak \u00fczere bir\u00e7ok \u00f6zellikle yaz\u0131 tipi y\u00f6netimini sa\u011flar.<\/p>\nfont-family<\/code> \u00d6zelli\u011fi<\/h4>\nfont-family<\/code> \u00f6zelli\u011fi, bir metin eleman\u0131 i\u00e7in tercih edilen yaz\u0131 tipini veya yaz\u0131 tipi ailesini belirtir. Birden fazla yaz\u0131 tipi belirtmek, taray\u0131c\u0131n\u0131n ilk tercihi y\u00fckleyememesi durumunda yedek (fallback) fontlar kullanmas\u0131n\u0131 sa\u011flar. Bu, web sitenizin farkl\u0131 cihazlarda ve taray\u0131c\u0131larda tutarl\u0131 g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\np {\n font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n}<\/code><\/pre>\nsans-serif<\/code> genel yaz\u0131 tipi ailesinden uygun bir fontu se\u00e7ecektir.<\/p>\nGenel Yaz\u0131 Tipi Aileleri (Generic Font Families)<\/h5>\n
font-family<\/code> listesinin sonunda yedek olarak kullan\u0131lmal\u0131d\u0131r:
\n* serif<\/code><\/strong>: T\u0131rnakl\u0131 (kuyruklu) yaz\u0131 tipleri (\u00f6rn: Times New Roman, Georgia). Genellikle bas\u0131l\u0131 materyallerde daha resmi ve geleneksel bir hava i\u00e7in tercih edilir.
\n* sans-serif<\/code><\/strong>: T\u0131rnaks\u0131z yaz\u0131 tipleri (\u00f6rn: Arial, Helvetica, Verdana). Ekranlarda daha modern ve okunabilir kabul edilir.
\n* monospace<\/code><\/strong>: T\u00fcm karakterlerin ayn\u0131 geni\u015fli\u011fe sahip oldu\u011fu yaz\u0131 tipleri (\u00f6rn: Courier New, Consolas). Genellikle kod bloklar\u0131 veya veri tablolar\u0131nda kullan\u0131l\u0131r.
\n* cursive<\/code><\/strong>: El yaz\u0131s\u0131 veya f\u0131r\u00e7a darbesi g\u00f6r\u00fcn\u00fcm\u00fcne sahip yaz\u0131 tipleri (\u00f6rn: Brush Script MT). Genellikle ba\u015fl\u0131klar veya dekoratif ama\u00e7lar i\u00e7in kullan\u0131l\u0131r.
\n* fantasy<\/code><\/strong>: Dekoratif ve benzersiz g\u00f6r\u00fcn\u00fcml\u00fc yaz\u0131 tipleri (\u00f6rn: Impact, Comic Sans MS). Genellikle ba\u015fl\u0131klar veya \u00f6zel efektler i\u00e7in kullan\u0131l\u0131r.<\/p>\nWeb G\u00fcvenli Fontlar<\/h5>\n
@font-face<\/code> Kural\u0131 ile \u00d6zel Fontlar<\/h4>\n@font-face<\/code> CSS kural\u0131, \u00f6zel font dosyalar\u0131n\u0131 web sitenize y\u00fcklemenizi sa\u011flar.<\/p>\n@font-face {\n font-family: 'MyCustomFont';\n src: url('fonts\/mycustomfont.woff2') format('woff2'),\n url('fonts\/mycustomfont.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n font-display: swap; \/ Performans i\u00e7in \u00f6nemli <\/em>\/\n}\n\nh1 {\n font-family: 'MyCustomFont', sans-serif;\n}<\/code><\/pre>\nfont-family<\/code><\/strong>: Bu kural i\u00e7in tan\u0131mlad\u0131\u011f\u0131n\u0131z \u00f6zel fontun ad\u0131d\u0131r. Bu ad\u0131 daha sonra CSS kurallar\u0131n\u0131zda kullanacaks\u0131n\u0131z.
\n* src<\/code><\/strong>: Font dosyas\u0131n\u0131n yolunu ve format\u0131n\u0131 belirtir. Taray\u0131c\u0131lar farkl\u0131 font formatlar\u0131n\u0131 destekledi\u011fi i\u00e7in, birden fazla format sa\u011flamak iyi bir uygulamad\u0131r. woff2<\/code> ve woff<\/code> modern taray\u0131c\u0131lar i\u00e7in en yayg\u0131n ve optimize edilmi\u015f formatlard\u0131r.
\n* font-weight<\/code> ve font-style<\/code><\/strong>: Bu fontun hangi kal\u0131nl\u0131k veya stil i\u00e7in ge\u00e7erli oldu\u011funu belirtir. Farkl\u0131 kal\u0131nl\u0131k ve stiller i\u00e7in ayr\u0131 @font-face<\/code> kurallar\u0131 tan\u0131mlanabilir.
\n* font-display<\/code><\/strong>: Fontun y\u00fcklenmesi s\u0131ras\u0131nda metnin nas\u0131l g\u00f6r\u00fcnt\u00fclenece\u011fini kontrol eder. swap<\/code> de\u011feri, font y\u00fcklenene kadar yedek bir fontun kullan\u0131lmas\u0131n\u0131 sa\u011flar ve y\u00fckleme tamamland\u0131\u011f\u0131nda \u00f6zel font ile de\u011fi\u015ftirilir. Bu, FOUT (Flash of Unstyled Text) sorununu y\u00f6netmek ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in \u00f6nemlidir.<\/p>\nGoogle Fonts ve Di\u011fer Font Servisleri<\/h4>\n
\n<\/code><\/pre>\nbody {\n font-family: 'Roboto', sans-serif;\n}<\/code><\/pre>\nfont-weight<\/code> \u00d6zelli\u011fi<\/h4>\nfont-weight<\/code> \u00f6zelli\u011fi, metnin kal\u0131nl\u0131\u011f\u0131n\u0131 ayarlar.
\n* Anahtar Kelimeler<\/strong>: normal<\/code> (400), bold<\/code> (700), lighter<\/code>, bolder<\/code>.
\n* Say\u0131sal De\u011ferler<\/strong>: 100’den 900’e kadar (100’\u00fcn katlar\u0131). T\u00fcm fontlar bu de\u011ferlerin hepsini desteklemeyebilir.<\/p>\nh2 {\n font-weight: bold; \/ veya font-weight: 700; <\/em>\/\n}\n\n.light-text {\n font-weight: 300;\n}<\/code><\/pre>\nfont-style<\/code> \u00d6zelli\u011fi<\/h4>\nfont-style<\/code> \u00f6zelli\u011fi, metnin stilini (normal, italik, e\u011fik) ayarlar.
\n* normal<\/code>: Metin normal stilindedir.
\n* italic<\/code>: Metin italik olarak g\u00f6r\u00fcnt\u00fclenir (fontun kendi italik versiyonu varsa).
\n* oblique<\/code>: Metin e\u011fik olarak g\u00f6r\u00fcnt\u00fclenir (fontun italik versiyonu yoksa, taray\u0131c\u0131 metni e\u011febilir).<\/p>\nem {\n font-style: italic;\n}<\/code><\/pre>\nfont-variant<\/code> \u00d6zelli\u011fi<\/h4>\nfont-variant<\/code> \u00f6zelli\u011fi, metnin k\u00fc\u00e7\u00fck harflerini b\u00fcy\u00fck harf karakterlerinin k\u00fc\u00e7\u00fck versiyonlar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. En yayg\u0131n kullan\u0131lan de\u011feri small-caps<\/code>‘tir.<\/p>\n.small-caps {\n font-variant: small-caps;\n}<\/code><\/pre>\nK\u0131salt\u0131lm\u0131\u015f
font<\/code> \u00d6zelli\u011fi<\/h4>\nfont<\/code> \u00f6zelli\u011fini kullanabilirsiniz. Bu, kodu daha d\u00fczenli hale getirir. S\u0131ra \u00f6nemlidir: font-style<\/code> font-variant<\/code> font-weight<\/code> font-size<\/code>\/line-height<\/code> font-family<\/code>.<\/p>\np {\n font: italic small-caps bold 16px\/1.5 \"Georgia\", serif;\n}<\/code><\/pre>\nMetin Boyutland\u0131rma (Font Size)<\/h3>\n
font-size<\/code> \u00f6zelli\u011fi ile metin boyutunu ayarlayabilirsiniz. Boyutland\u0131rma i\u00e7in mutlak ve g\u00f6receli birimler kullan\u0131l\u0131r.<\/p>\nfont-size<\/code> \u00d6zelli\u011fi<\/h4>\nMutlak Birimler<\/h5>\n
\n* px<\/code> (piksel)<\/strong>: Ekran \u00fczerindeki bir pikseli temsil eder. En yayg\u0131n kullan\u0131lan birimdir. Kesin kontrol sa\u011flar ancak eri\u015filebilirlik a\u00e7\u0131s\u0131ndan dezavantajlar\u0131 vard\u0131r, \u00e7\u00fcnk\u00fc kullan\u0131c\u0131lar taray\u0131c\u0131 ayarlar\u0131ndan metin boyutunu kolayca de\u011fi\u015ftiremezler.
\n* pt<\/code> (point), cm<\/code> (santimetre), in<\/code> (in\u00e7), mm<\/code> (milimetre), pc<\/code> (pica): Genellikle bas\u0131l\u0131 medyada kullan\u0131l\u0131r ve web i\u00e7in \u00f6nerilmez.<\/p>\nh1 {\n font-size: 32px; \/ Kesin bir boyut <\/em>\/\n}<\/code><\/pre>\nG\u00f6receli Birimler<\/h5>\n
\n* em<\/code><\/strong>: Mevcut eleman\u0131n font-size<\/code> de\u011ferine g\u00f6re g\u00f6recelidir. E\u011fer mevcut eleman\u0131n font-size<\/code> de\u011feri tan\u0131mlanmam\u0131\u015fsa, \u00fcst eleman\u0131n font-size<\/code> de\u011ferini miras al\u0131r. Bu durum, i\u00e7 i\u00e7e elemanlarda beklenen boyutun hesaplanmas\u0131n\u0131 zorla\u015ft\u0131rabilir. \u00d6rne\u011fin, 1em<\/code> = \u00fcst eleman\u0131n font boyutu.
\n* rem<\/code> (root em)<\/strong>: K\u00f6k eleman\u0131n (html<\/code>) font-size<\/code> de\u011ferine g\u00f6re g\u00f6recelidir. Bu, em<\/code>‘in karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 ortadan kald\u0131r\u0131r, \u00e7\u00fcnk\u00fc t\u00fcm boyutlar tek bir k\u00f6k de\u011fere referans verir. 1rem<\/code> = html<\/code> eleman\u0131n\u0131n font boyutu. Duyarl\u0131 tasar\u0131m ve eri\u015filebilirlik i\u00e7in \u015fiddetle tavsiye edilir.<\/p>\nhtml {\n font-size: 16px; \/ K\u00f6k font boyutu <\/em>\/\n}\n\nbody {\n font-size: 1rem; \/ 16px <\/em>\/\n}\n\nh2 {\n font-size: 2rem; \/ 32px <\/em>\/\n}\n\n.card p {\n font-size: 0.9rem; \/ 14.4px <\/em>\/\n}<\/code><\/pre>\n%<\/code> (y\u00fczde)<\/strong>: \u00dcst eleman\u0131n font-size<\/code> de\u011ferine g\u00f6re y\u00fczde cinsinden boyutland\u0131rma yapar. em<\/code> ile benzer davran\u0131\u015f g\u00f6sterir.
\n* vw<\/code> (viewport width)<\/strong>: G\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n geni\u015fli\u011finin %1’ine e\u015fittir. \u00d6rne\u011fin, 1vw<\/code> = g\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n geni\u015fli\u011finin %1’i. Duyarl\u0131 tipografi i\u00e7in kullan\u0131labilir, metnin ekran geni\u015fli\u011fine g\u00f6re ak\u0131\u015fkan bir \u015fekilde boyutlanmas\u0131n\u0131 sa\u011flar.
\n* vh<\/code> (viewport height)<\/strong>: G\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n y\u00fcksekli\u011finin %1’ine e\u015fittir.
\n* vmin<\/code> \/ vmax<\/code><\/strong>: G\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n daha k\u00fc\u00e7\u00fck\/b\u00fcy\u00fck boyutunun %1’ine e\u015fittir.<\/p>\n.responsive-heading {\n font-size: 5vw; \/ Ekran geni\u015fledik\u00e7e ba\u015fl\u0131k b\u00fcy\u00fcr <\/em>\/\n}<\/code><\/pre>\ncalc()<\/code> Fonksiyonu ile Dinamik Boyutland\u0131rma<\/h5>\ncalc()<\/code> CSS fonksiyonu, farkl\u0131 birimlerle matematiksel i\u015flemler yaparak dinamik de\u011ferler elde etmenizi sa\u011flar. Bu, \u00f6zellikle duyarl\u0131 tipografi i\u00e7in vw<\/code> ve rem<\/code> gibi birimleri birle\u015ftirmek istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nh1 {\n \/ K\u00fc\u00e7\u00fck ekranlarda 2rem, b\u00fcy\u00fck ekranlarda 4vw'e do\u011fru \u00f6l\u00e7eklenir <\/em>\/\n font-size: calc(2rem + 1vw);\n}<\/code><\/pre>\nEri\u015filebilirlik ve Duyarl\u0131l\u0131k \u0130\u00e7in Boyutland\u0131rma \u0130pu\u00e7lar\u0131<\/h4>\n
html<\/code> eleman\u0131n\u0131n font-size<\/code> de\u011ferini piksel (\u00f6rn: 16px<\/code>) olarak ayarlay\u0131n ve di\u011fer t\u00fcm metin boyutlar\u0131 i\u00e7in rem<\/code> birimini kullan\u0131n. Bu, kullan\u0131c\u0131n\u0131n taray\u0131c\u0131 ayarlar\u0131ndan metin boyutunu de\u011fi\u015ftirebilmesini sa\u011flar.
\n* Minimum Font Boyutu<\/strong>: Okunabilirli\u011fi sa\u011flamak i\u00e7in metinlerinizin \u00e7ok k\u00fc\u00e7\u00fck olmamas\u0131na dikkat edin. Genellikle 16px (1rem) temel metin boyutu iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.
\n* Medya Sorgular\u0131<\/strong>: Farkl\u0131 ekran boyutlar\u0131 i\u00e7in metin boyutlar\u0131n\u0131 ayarlamak \u00fczere medya sorgular\u0131n\u0131 kullan\u0131n. \u00d6rne\u011fin, mobil cihazlarda ba\u015fl\u0131klar\u0131 biraz k\u00fc\u00e7\u00fcltebilirsiniz.<\/p>\nh1 {\n font-size: 2.5rem;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n}<\/code><\/pre>\nMetin Renklendirme (Color)<\/h3>\n
color<\/code> \u00f6zelli\u011fi ile metin rengini ayarlayabilir, background-color<\/code> \u00f6zelli\u011fi ile de metnin arka plan rengini belirleyebilirsiniz.<\/p>\ncolor<\/code> \u00d6zelli\u011fi<\/h4>\nRenk \u0130simleri (Named Colors)<\/h5>\n
p {\n color: blue;\n}<\/code><\/pre>\nHEX Kodlar\u0131 (#RRGGBB, #RGB)<\/h5>\n
h1 {\n color: #336699; \/ K\u0131rm\u0131z\u0131, Ye\u015fil, Mavi de\u011ferleri <\/em>\/\n}\n\na {\n color: #f00; \/ #ff0000 ile ayn\u0131, k\u0131rm\u0131z\u0131 <\/em>\/\n}<\/code><\/pre>\nRGB De\u011ferleri (rgb(k\u0131rm\u0131z\u0131, ye\u015fil, mavi))<\/h5>\n
.highlight {\n color: rgb(255, 0, 0); \/ K\u0131rm\u0131z\u0131 <\/em>\/\n}<\/code><\/pre>\nRGBA De\u011ferleri (rgba(k\u0131rm\u0131z\u0131, ye\u015fil, mavi, alfa))<\/h5>\n
.semi-transparent-text {\n color: rgba(0, 0, 0, 0.7); \/ %70 opak siyah <\/em>\/\n}<\/code><\/pre>\nHSL De\u011ferleri (hsl(ton, doygunluk, a\u00e7\u0131kl\u0131k))<\/h5>\n
\n* Ton (Hue)<\/strong>: 0’dan 360’a kadar bir derece ile renk \u00e7ark\u0131ndaki pozisyonu belirtir (0\/360 k\u0131rm\u0131z\u0131, 120 ye\u015fil, 240 mavi).
\n* Doygunluk (Saturation)<\/strong>: %0 (gri) ile %100 (tam renk) aras\u0131nda bir y\u00fczde de\u011feridir.
\n* A\u00e7\u0131kl\u0131k (Lightness)<\/strong>: %0 (siyah) ile %100 (beyaz) aras\u0131nda bir y\u00fczde de\u011feridir. %50, rengin orijinal tonunu g\u00f6sterir.<\/p>\n.vibrant-text {\n color: hsl(240, 100%, 50%); \/ Tam doygun mavi <\/em>\/\n}<\/code><\/pre>\nHSLA De\u011ferleri (hsla(ton, doygunluk, a\u00e7\u0131kl\u0131k, alfa))<\/h5>\n
.subtle-text {\n color: hsla(0, 0%, 0%, 0.5); \/ %50 opak siyah <\/em>\/\n}<\/code><\/pre>\ncurrentcolor<\/code> Anahtar Kelimesi<\/h5>\ncurrentcolor<\/code>, bir eleman\u0131n color<\/code> \u00f6zelli\u011finin hesaplanm\u0131\u015f de\u011ferini temsil eden bir anahtar kelimedir. Bu, di\u011fer CSS \u00f6zelliklerinin (\u00f6rn: border-color<\/code>, box-shadow<\/code>) metin rengiyle otomatik olarak e\u015fle\u015fmesini sa\u011flamak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n.icon {\n color: blue; \/ \u0130kon rengi mavi <\/em>\/\n border: 1px solid currentcolor; \/ Kenarl\u0131k rengi de mavi olur <\/em>\/\n}<\/code><\/pre>\nArka Plan Rengi (
background-color<\/code>) ve Metin Rengi Kontrast\u0131<\/h4>\n
\n* Kontrast Kontrol Ara\u00e7lar\u0131<\/strong>: Web \u00fczerinde bir\u00e7ok \u00fccretsiz kontrast kontrol arac\u0131 bulunmaktad\u0131r (\u00f6rn: WebAIM Contrast Checker). Tasar\u0131m s\u00fcrecinizde bu ara\u00e7lar\u0131 kullanarak renk kombinasyonlar\u0131n\u0131z\u0131n eri\u015filebilirlik standartlar\u0131na uygun oldu\u011fundan emin olun.<\/p>\nbody {\n background-color: #f0f0f0; \/ A\u00e7\u0131k gri arka plan <\/em>\/\n color: #333333; \/ Koyu gri metin - y\u00fcksek kontrast <\/em>\/\n}<\/code><\/pre>\nDi\u011fer \u00d6nemli Metin \u015eekillendirme \u00d6zellikleri<\/h3>\n
line-height<\/code> (Sat\u0131r Y\u00fcksekli\u011fi)<\/h4>\nline-height<\/code> \u00f6zelli\u011fi, metin sat\u0131rlar\u0131 aras\u0131ndaki bo\u015flu\u011fu ayarlar. \u0130yi bir sat\u0131r y\u00fcksekli\u011fi, metnin okunabilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Genellikle font-size<\/code> de\u011ferinin 1.5 ila 1.7 kat\u0131 aras\u0131nda bir de\u011fer \u00f6nerilir. Birimsiz bir say\u0131 kullanmak, eleman\u0131n font-size<\/code> de\u011ferine g\u00f6re g\u00f6receli bir sat\u0131r y\u00fcksekli\u011fi sa\u011flar.<\/p>\np {\n line-height: 1.6; \/ Font boyutunun 1.6 kat\u0131 <\/em>\/\n}<\/code><\/pre>\ntext-align<\/code> (Yatay Hizalama)<\/h4>\ntext-align<\/code> \u00f6zelli\u011fi, bir metin blo\u011fu i\u00e7indeki metnin yatay hizalamas\u0131n\u0131 belirler.
\n* left<\/code>: Metni sola hizalar (varsay\u0131lan).
\n* right<\/code>: Metni sa\u011fa hizalar.
\n* center<\/code>: Metni ortalar.
\n* justify<\/code>: Metni hem sol hem de sa\u011f kenarlara hizalar, kelime aral\u0131klar\u0131n\u0131 ayarlayarak sat\u0131rlar\u0131 doldurur.<\/p>\n.center-text {\n text-align: center;\n}<\/code><\/pre>\ntext-decoration<\/code> (Metin Dekorasyonu)<\/h4>\ntext-decoration<\/code> \u00f6zelli\u011fi, metne \u00e7izgi eklemek veya mevcut \u00e7izgileri kald\u0131rmak i\u00e7in kullan\u0131l\u0131r. En yayg\u0131n kullan\u0131m\u0131 ba\u011flant\u0131lardaki alt \u00e7izgiyi kald\u0131rmakt\u0131r.
\n* none<\/code>: Herhangi bir dekorasyonu kald\u0131r\u0131r.
\n* underline<\/code>: Metnin alt\u0131na \u00e7izgi \u00e7eker.
\n* overline<\/code>: Metnin \u00fcst\u00fcne \u00e7izgi \u00e7eker.
\n* line-through<\/code>: Metnin \u00fczerinden \u00e7izgi \u00e7eker.<\/p>\na {\n text-decoration: none; \/ Ba\u011flant\u0131lardaki alt \u00e7izgiyi kald\u0131r\u0131r <\/em>\/\n}\n\n.strike {\n text-decoration: line-through;\n}<\/code><\/pre>\ntext-transform<\/code> (Metin D\u00f6n\u00fc\u015f\u00fcm\u00fc)<\/h4>\ntext-transform<\/code> \u00f6zelli\u011fi, metnin b\u00fcy\u00fck\/k\u00fc\u00e7\u00fck harf durumunu de\u011fi\u015ftirir.
\n* none<\/code>: Metni oldu\u011fu gibi b\u0131rak\u0131r (varsay\u0131lan).
\n* uppercase<\/code>: T\u00fcm metni b\u00fcy\u00fck harflere d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.
\n* lowercase<\/code>: T\u00fcm metni k\u00fc\u00e7\u00fck harflere d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.
\n* capitalize<\/code>: Her kelimenin ilk harfini b\u00fcy\u00fck harfe d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/p>\nh3 {\n text-transform: uppercase;\n}<\/code><\/pre>\nletter-spacing<\/code> ve word-spacing<\/code> (Harf ve Kelime Aral\u0131\u011f\u0131)<\/h4>\nh1 {\n letter-spacing: 2px;\n}\n\n.wide-words {\n word-spacing: 5px;\n}<\/code><\/pre>\ntext-indent<\/code> (Paragraf Girintisi)<\/h4>\ntext-indent<\/code> \u00f6zelli\u011fi, bir metin blo\u011funun ilk sat\u0131r\u0131na girinti ekler.<\/p>\n