Pixels to rem
Convert pixel values to rem for modern CSS layouts. rem scales with the user's root font size — better for accessibility than fixed px.
How to convert px to rem
1. Enter the pixel value from your design (e.g. 32 px).
2. Set the root font size (default 16 px if unchanged).
3. Copy the rem result into your stylesheet.
4. Use rem for font sizes, spacing, and component scale; px for hairline borders if needed.
Px'den rem'e örnekler
Gövde ve başlık türü
16 piksel = 1 rem (varsayılan). 24 piksel = 1,5 rem başlık. 14 px = 0,875 rem küçük metin.
Özel kök 10 piksel (tasarım sistemleri)
Bazı ekipler html'yi { font-size: 62,5% } olarak ayarlayarak 1 rem = 10 piksel değerini verir. O halde 32 piksel tasarım jetonu = 3,2 rem.
Aralık ölçeği
8 piksel ızgara → 16 piksel kökte 0,5 rem. 16 piksel dolgu = 1 rem; Tailwind benzeri ölçeklerde tutarlı ritim.
px'i rem'ye ne zaman dönüştürmeliyim?
• Erişilebilir yakınlaştırmayla duyarlı CSS'de Figma özelliklerini uyguladığınızda.
• Rem'de tanımlanan tasarım sistemi belirteçleriyle hizaladığınızda.
• Kullanıcılar tarayıcının varsayılan yazı tipi boyutunu geçersiz kıldığında, kalan düzenler uyarlanır.
CSS bileşeninde rem vs em
em, iç içe geçmiş öğelerin içinde farklı yazı tipi boyutlarıyla birleşir; em'deki dolgu yerel metinle birlikte büyür. rem köke bağlı kalarak bileşenler arasında öngörülebilir aralık sağlar. Çoğu ekip, düzen ölçeği için rem'i, yalnızca harf aralığı veya yerel türe bağlı mikro ayarlamalar için em'i kullanır.
Sık sorulan sorular
Rem nedir?
rem = "kök onları". 1 rem, ebeveynin değil, html öğesinin yazı tipi boyutuna eşittir.
Neden px'i her yerde kullanmıyorsunuz?
Sabit piksel, kullanıcının yazı tipi tercihlerini yok sayar. rem erişilebilirlik için kök ölçeklendirmeye saygı duyar (WCAG).
Varsayılan kök yazı tipi boyutu?
Çoğu tarayıcı, HTML'de varsayılan olarak 16 pikseldir. Kullanıcılar bunu ayarlardan değiştirebilir.
Formül mü?
rem = px ÷ rootFontSizePx. Örnek: 20 piksel ÷ 16 = 1,25 rem.
Rem kenar boşlukları ve dolgu için işe yarar mı?
Evet — rem yalnızca yazı tipi boyutu için değil, herhangi bir CSS uzunluk özelliği için geçerlidir.