px rem çevirme

İçeriğin son kontrol tarihi:2026-09-23

Varsayılan 16 piksellik temel yazı tipi boyutunda 24 px 1,5 rem'e, 14 px ise 0,875 rem'e eşittir. Hesap tek bir bölmedir: piksel ölçüsü temel yazı tipi boyutuna bölünür. Tasarımdaki ölçüyü ilk alana girin; sayfanız başka bir temel kullanıyorsa onu Temel font-size alanına yazın.

Piksel

rem

Temel font-size

rem nedir, piksel ölçüleri neden rem ile yazılır?

Tasarım dosyaları ölçüleri piksel olarak verir: başlık 28 piksel, iki bölümün arası 32 piksel. CSS'te piksel sabit bir birimdir ve CSS standardı onu bir inçin 96'da biri olarak tanımlar[1]. Bu yüzden px inç çevirme aracı varsayılan çözünürlükte bir inçte 96 piksel sayar. rem ise göreli bir birimdir: bir rem, sayfanın kök öğesi olan html öğesinin hesaplanan yazı tipi boyutuna eşittir[1].

rem her zaman kök öğeden hesaplandığı için iç içe öğelerde em gibi katlanarak büyümez. Bir piksel ölçüsünü rem'e çevirmek için html öğesinin yazı tipi boyutunu bilmeniz yeterlidir. Çeviriden sonra ölçü okurun ayarına uyar: 24 piksellik bir başlık varsayılan ayarda 24 piksel kalır, Chrome'da Büyük ya da Edge'de Büyük Yazı tipi boyutu seçeneğini kullanan okurda ise 30 piksel olur.

Yazı tipi boyutu 60px olan .hero kuralı ile yazı tipi boyutu 220px olan başlık kuralını gösteren CSS kodu — Bu fotoğraftaki iki yazı tipi boyutu da piksel ile yazılmış: `.hero` kuralında `60px`, `.heading` ile `.sub-heading` sınıflarını birleştiren kuralda `220px`. 16 piksellik temelde birincisi `3.75rem`, ikincisi `13.75rem` olur ve ikisi de okurun ayarıyla birlikte büyür. Fotoğraf: Ferenc Almasi, Unsplash.

24 px kaç rem?

Varsayılan 16 piksellik temel yazı tipi boyutunda 24 piksel 1,5 rem'e eşittir. Formül tek bir bölmedir: rem = piksel ÷ temel yazı tipi boyutu. Her 16 piksel 1 rem eder ve tek bir piksel 0,0625 rem'dir. Buna göre 8 piksel 0,5 rem'dir. 32 piksel ise 2 rem'dir.

Stil dosyası başka bir temel kullanıyorsa bölmeyi o temele göre yapın. %62,5 tekniğiyle temel 10 piksel olur ve 24 piksel 2,4 rem'e eşit olur. 20 piksellik temelde 24 piksel 1,2 rem'dir. Temel boyutu üçüncü alana yazın; dönüştürücü stil dosyasına yazacağınız değeri verir.

Bazı ölçüler 16'ya tam bölünmez, bu yüzden sonuç en fazla dört ondalık basamakla gösterilir. Örneğin 13 piksel 0,8125 rem'dir ve CSS bu sayıyı olduğu gibi kabul eder. Sonuç alanı virgül gösterir, Sonucu kopyala düğmesi ise 0.8125 sayısını noktayla kopyalar; sayıyı stil dosyasına yapıştırıp arkasına rem yazmanız yeterlidir.

Piksel rem'e hangi formülle çevrilir?

Formül rem = px ÷ font-size şeklindedir; buradaki font-size, html öğesinin yazı tipi boyutudur. Tasarımdaki 28 piksellik bir başlığı ele alalım. 16 piksellik temelde 28 ÷ 16 = 1,75 çıkar ve stil dosyasına font-size: 1.75rem yazarsınız.

4'e tam bölünen ölçüler en fazla iki ondalık basamaklı bir değer verir; örneğin 12 piksel 0,75 rem'dir. Diğer çift ölçüler üç ondalık basamak verir, örneğin 14 piksel 0,875 rem'dir; tek ölçüler ise dört basamak verir, örneğin 15 piksel 0,9375 rem'dir. 13,5 piksel gibi bir ölçüde beşinci ondalık basamak da çıkar, bu yüzden sonuç dört basamağa yuvarlanır ve 0,8438 rem olur.

Ters yön için rem px çevirme aracını kullanın. Üst öğenin yazı tipi boyutuna göre bir değer gerekiyorsa ölçüyü px em çevirme aracında çevirin. Dosyadaki ölçü punto (pt) ile verilmişse önce pt px çevirme aracıyla piksele çevirin.

font-size:13px ve margin:16px 0 20px gibi piksel ölçüleri görünen sıkıştırılmış CSS kodu — Bu, sıkıştırılmış bir stil dosyası; içinde görünen bütün ölçüler piksel ile yazılmış. 16 piksellik temelde `font-size:13px` değeri `0.8125rem` olur. `margin:16px 0 20px` ise `1rem 0 1.25rem` olur. Fotoğraf: Rahul Mishra, Unsplash.

Üç temel boyutta px rem çevirme tablosu

Tabloda 1 ile 400 piksel arasındaki ölçüler var. İlk sütun varsayılan 16 piksellik temel içindir. İkinci sütun temeli 10 piksele indiren %62,5 tekniği, üçüncü sütun ise Chrome'da Büyük seçeneğini kullanan okurun 20 piksellik temeli içindir. İşaretli satırlar 16 ve 24 pikseldir.

Piksel ölçüsü	16 pikselde rem	10 pikselde rem	20 pikselde rem
1 px	0,0625 rem	0,1 rem	0,05 rem
2 px	0,125 rem	0,2 rem	0,1 rem
4 px	0,25 rem	0,4 rem	0,2 rem
6 px	0,375 rem	0,6 rem	0,3 rem
8 px	0,5 rem	0,8 rem	0,4 rem
10 px	0,625 rem	1 rem	0,5 rem
11 px	0,6875 rem	1,1 rem	0,55 rem
12 px	0,75 rem	1,2 rem	0,6 rem
13 px	0,8125 rem	1,3 rem	0,65 rem
14 px	0,875 rem	1,4 rem	0,7 rem
15 px	0,9375 rem	1,5 rem	0,75 rem
16 px	1 rem	1,6 rem	0,8 rem
17 px	1,0625 rem	1,7 rem	0,85 rem
18 px	1,125 rem	1,8 rem	0,9 rem
20 px	1,25 rem	2 rem	1 rem
22 px	1,375 rem	2,2 rem	1,1 rem
24 px	1,5 rem	2,4 rem	1,2 rem
25 px	1,5625 rem	2,5 rem	1,25 rem
26 px	1,625 rem	2,6 rem	1,3 rem
28 px	1,75 rem	2,8 rem	1,4 rem
30 px	1,875 rem	3 rem	1,5 rem
32 px	2 rem	3,2 rem	1,6 rem
36 px	2,25 rem	3,6 rem	1,8 rem
40 px	2,5 rem	4 rem	2 rem
44 px	2,75 rem	4,4 rem	2,2 rem
48 px	3 rem	4,8 rem	2,4 rem
50 px	3,125 rem	5 rem	2,5 rem
56 px	3,5 rem	5,6 rem	2,8 rem
60 px	3,75 rem	6 rem	3 rem
64 px	4 rem	6,4 rem	3,2 rem
72 px	4,5 rem	7,2 rem	3,6 rem
80 px	5 rem	8 rem	4 rem
96 px	6 rem	9,6 rem	4,8 rem
100 px	6,25 rem	10 rem	5 rem
120 px	7,5 rem	12 rem	6 rem
128 px	8 rem	12,8 rem	6,4 rem
160 px	10 rem	16 rem	8 rem
192 px	12 rem	19,2 rem	9,6 rem
200 px	12,5 rem	20 rem	10 rem
256 px	16 rem	25,6 rem	12,8 rem
320 px	20 rem	32 rem	16 rem
400 px	25 rem	40 rem	20 rem

Her hücreyi dönüştürücü, piksel ölçüsünü temel boyuta bölerek hesapladı ve sonuç alanındaki gibi en fazla dört ondalık basamakla yazdı.

Stil dosyasından örnek satırlar rem ile nasıl yazılır?

Her satır tasarımdan geldiği gibi piksel olarak yazılmıştır; yanında aynı değer 16 piksellik temelde ve %62,5 tekniğinin 10 piksellik temelinde rem olarak durur. Değer sütunları CSS kodu olduğu için ondalıklar noktayla yazılır.

Piksel olarak satır	16 pikselde rem	10 pikselde rem (%62,5)
font-size: 16px	1rem	1.6rem
font-size: 14px	0.875rem	1.4rem
font-size: 28px	1.75rem	2.8rem
padding: 12px 24px	0.75rem 1.5rem	1.2rem 2.4rem
margin-bottom: 32px	2rem	3.2rem
border-radius: 8px	0.5rem	0.8rem
max-width: 1200px	75rem	120rem
@media (min-width: 768px)	48rem	48rem

Son satırda değer iki sütunda da 48rem kalır. Medya sorgusunun içindeki rem, yazı tipi boyutunun başlangıç değerinden hesaplanır ve html öğesine yazılan kural ona ulaşmaz[2]. Bunu Chrome ve Firefox'ta %62,5 tekniği kullanılan bir sayfada ölçtük: @media (min-width: 48rem) kuralı 768 piksel genişlikte devreye girdi. Tarayıcıdaki yazı tipi boyutunu 20 piksele çıkardığımızda aynı kural 960 piksel genişlikte devreye girdi.

px rem çevirme aracı hangi yazımları kabul edip hesaplıyor?

Her alan, tablodaki kendi bölümünde yer alan her yazımı kabul eder ve hesaplar; yapıştırmadan önce ölçüyü düzeltmenize gerek yoktur. Tasarımdan ya da stil dosyasından nasıl kopyaladıysanız öyle yapıştırın, birimiyle ya da birimsiz. Ortadaki sütun, dönüştürücünün 16 piksellik temelde kendi hesapladığı sonucu gösterir.

Yazdığınız ya da yapıştırdığınız	Dönüştürücünün hesabı	Bu yazımla ne oluyor
İlk alan: piksel ölçüsü, 16 piksellik temel
24	1,5 rem	Tasarım uygulamasının ölçü panelinde göründüğü gibi yalnızca sayı.
24px	1,5 rem	Birim sayıya bitişik: sayıyı okur, px'i atlarız.
24 piksel	1,5 rem	Birim Türkçe ve boşlukla yazılmış: sayıyı alır, kelimeyi atlarız.
13,5	0,8438 rem	Virgüllü ondalık ölçü: sonuç yuvarlandıktan sonra dört ondalık basamakla görünür.
1 200	75 rem	Binleri boşlukla ayırarak yazılan sayıyı bin iki yüz piksel olarak okuyoruz. Aynı sayıyı “1.200” diye yazarsanız alan noktayı ondalık ayırıcı sayar, 1,2 piksel okur ve altında bir uyarı gösterir.
1,200	0,075 rem	Virgülü, ardından üç rakam gelse bile ondalık ayırıcı olarak okuruz, yani ölçü 1,2 pikseldir. Alanın altında bir uyarı çıkar; bin iki yüz için 1200 ya da 1 200 yazın.
1200px	75 rem	Binlik ayırıcı olmadan, birimiyle yazılmış bir kapsayıcı genişliği: 75 rem eder.
padding: 20px;	1,25 rem	Stil dosyasından tam bir satır: sayıyı alır, özellik adını ve noktalı virgülü atlarız.
−8px	-0,5 rem	Sayının önündeki tipografik eksi işaretini (−) negatif işaret olarak okuruz, negatif bir kenar boşluğunda olduğu gibi.
“Temel font-size” alanı: hesaplanan değer temel boyuttur
%62,5	10 px	html öğesi için yazdığınız gibi yüzde, işaret Türkçedeki gibi önde: varsayılan 16 pikselin %62,5'i 10'dur.
font-size: 18px	18 px	Stil dosyasından kopyalanan satır: 18 sayısını temel olarak alırız.

Her yazımı buraya yazmadan önce aynı alanda denedik. Alanın altında tek bir sayı girmenizi isteyen bir uyarı çıkarsa, alanda yalnızca ölçüyü bırakın.

Figma'daki ölçüleri ve bütün bir stil dosyasını px'ten rem'e nasıl çeviririm?

Birkaç ölçü için dönüştürücü yeterlidir. Ölçüler çok olduğunda tasarım ve derleme araçları rem değerini kendileri hesaplayabilir.

Tasarım dosyasından bir ölçü
Piksel ölçüsünü ölçü panelinden kopyalayıp ilk alana yapıştırın. Sayfa html öğesine bir yazı tipi boyutu veriyorsa, sonucu kopyalamadan önce o boyutu Temel font-size alanına yazın.
Figma'da Dev Mode
Ücretli planlarda Dev Mode ölçüleri doğrudan rem olarak gösterir; adlar Figma'nın arayüzündeki gibi İngilizcedir. Inspect panelindeki Code bölümünde dil menüsünün yanındaki Inspect settings düğmesine tıklayıp rem birimini seçin. Temeli değiştirmek için aynı yerden Set unit scale… seçeneğine tıklayın ve temeli Unit scale penceresine yazın.
Sass'ta bir fonksiyon
Sass sayıları sass:math modülündeki math.div() fonksiyonuyla böler[3]. @function rem($px) { @return math.div($px, 16px) * 1rem; } fonksiyonu rem(24px) ifadesini 1.5rem yapar.
Bütün stil dosyası için PostCSS
postcss-pxtorem eklentisi derleme sırasında CSS dosyalarındaki px değerlerini rem değerine çevirir[4]. Varsayılan temeli 16'dır ve varsayılan ayarlarla yalnızca yazıyla ilgili özellikleri çevirir: font, font-size, line-height ve letter-spacing. Medya sorguları piksel olarak kalır.

Piksel: diğer birimlere dönüştürme

px pt çevirme px cm çevirme px mm çevirme px inç çevirme

Kaynaklar

CSS Values and Units Module Level 4 — W3C
Media Queries Level 4 — W3C
sass:math — Sass
postcss-pxtorem — GitHub
<length> CSS type — MDN Web Docs
Web Content Accessibility Guidelines (WCAG) 2.2 — W3C

Tablolardaki tüm değerleri birim tanımlarından hesapladık ve yayımlamadan önce hesaplayarak doğruladık. Tarihsel bilgiler ve yerel birimlerin adları yukarıda listelenen kaynaklara dayanır.

İçeriğin son kontrol tarihi: 23 Eylül 2026 · hazırlayan ve kontrol eden: Arteon ekibi

px rem çevirme hakkında sık sorulan sorular

16 px kaç rem?

16 piksel, varsayılan 16 piksellik temelde 1 rem'dir. %62,5 tekniğiyle, yani 10 piksellik temelde 1,6 rem eder.

14 px ve 12 px kaç rem?

16 piksellik temelde 14 piksel 0,875 rem, 12 piksel ise 0,75 rem'dir.

24 piksel her zaman 1,5 rem mi?

Bu yalnızca 16 piksellik temelde geçerlidir. Sayfa html öğesine başka bir boyut yazarsa o boyuta bölün: 10 piksellik temelde 24 piksel 2,4 rem, 20 piksellik temelde 1,2 rem eder.

Neden 16'ya bölüyoruz?

Çünkü tarayıcılarda yaygın varsayılan yazı tipi boyutu 16 pikseldir ve kullanıcı bunu kendi ayarlarıyla değiştirebilir[5]. Ölçümümüzde Chrome, Edge ve Firefox ayarlar değiştirilmeden önce bu boyutu kullanıyordu.

%62,5 tekniği medya sorgularındaki rem değerlerini değiştirir mi?

Hayır. @media (min-width: 48rem) kuralı bu teknikle de tekniksiz de 768 pikselde devreye girer, çünkü medya sorgusundaki rem yazı tipi boyutunun başlangıç değerinden hesaplanır[2]. Bu yüzden medya sorgusu sınırlarını 16'ya bölerek çevirin.

Pikseli rem'e çevirmekle em'e çevirmek arasındaki fark nedir?

rem html öğesinin yazı tipi boyutundan hesaplanır, bu yüzden bütün sayfada aynı temele bölersiniz. em üst öğenin yazı tipi boyutundan hesaplanır, bu yüzden üst öğenin boyutuna bölersiniz. Bu hesap için px em çevirme aracı var.

1px kenarlık rem ile yazılmalı mı?

Kenarlığın her ayarda bir piksel kalınlığında kalmasını istiyorsanız 1px olarak bırakın. 0.0625rem yazarsanız, 20 piksellik temeli seçen okurda kalınlık 1,25 piksel olur. postcss-pxtorem eklentisi de varsayılan ayarlarında border özelliğini piksel olarak bırakır[4].

rem ile yazılan metin okurun ayarıyla büyür mü?

Evet. rem ile yazılan metin okurun tarayıcıda seçtiği yazı tipi boyutuyla büyür, piksel ile yazılan metin ise aynı kalır. WCAG'deki 1.4.4 Resize Text ölçütü bu durumu ele alır: metnin içerik ya da işlev kaybı olmadan %200'e kadar büyütülebilmesi[6].

Arteon'un ücretsiz aracının ekran görüntüsü: px rem çevirme

Araçlarımızı geliştirmemize yardım edin

Tarayıcınızda farklı bir sonuç veren bir ölçü mü buldunuz ya da dönüştürücü için bir fikriniz mi var? Bize yazın.