rem px çevirme
Tarayıcının varsayılan yazı tipi boyutunda bir rem 16 piksele eşittir, bu yüzden 1,5 rem 24 pikseldir. Hesap tek bir çarpmadır: rem değeri sayfanın temel yazı tipi boyutuyla çarpılır. Değeri ilk alana girin; sayfanız başka bir temel boyut kullanıyorsa onu Temel font-size alanına yazın.
rem nedir, CSS'te piksel nedir?
rem, CSS'te göreli bir uzunluk birimidir. Değeri, sayfanın kök öğesinin, yani html öğesinin hesaplanan yazı tipi boyutuna eşittir[1]. html öğesinin yazı tipi boyutu 16 piksel ise sayfadaki her rem 16 pikseldir. Bu boyut değişirse rem ile yazılmış bütün ölçüler birlikte değişir.
CSS'teki piksel (px) ise sabit bir birimdir ve CSS standardı onu bir inçin 96'da biri olarak tanımlar[1]. Bu yüzden CSS'te bir inç 96 piksele eşittir; inç px çevirme aracı da inç başına 96 piksellik varsayılan çözünürlükle açılır. Genel anlamıyla piksel, dijital göstergelerde görüntüyü oluşturan en küçük birimdir[2]. Okur tarayıcıda yazı tipi boyutunu değiştirdiğinde CSS pikseli değişmez. Figma gibi tasarım uygulamaları da ölçüleri piksel olarak gösterir, bu yüzden rem'i piksele çevirmek stil dosyasını tasarımla karşılaştırmanızı kolaylaştırır.
:root seçicisi html öğesinin kendisini gösterir, bu yüzden burada yazılan yazı tipi boyutu her rem değerinin temeli olur. Fotoğrafta görünen kısımda seçici renk değişkenleri içeriyor ve yazı tipi boyutunu ayarlamıyor, dolayısıyla temel boyut tarayıcının ayarında kalıyor. Fotoğraf: Pankaj Patel, Unsplash.1 rem kaç px?
Temel yazı tipi boyutu varsayılan değerinde kaldıkça 1 rem 16 piksele eşittir; Chrome, Edge ve Firefox'ta bu varsayılan 16 pikseldir. Formül tek bir çarpmadır: piksel = rem × temel yazı tipi boyutu. Buna göre 1,5 rem 24 pikseldir. 0,875 rem ise 14 pikseldir ve Tailwind CSS'teki text-sm metin boyutuna karşılık gelir[3].
16 sayısı bir varsayılandır ve iki taraftan değişebilir. Birincisi stil dosyasıdır: html { font-size: 62.5% } kuralı temeli 10 piksele indirir ve 1,5 rem 15 piksel olur. İkincisi okurun kendisidir. Chrome'un Ayarlar bölümündeki Yazı tipi boyutu listesinden Büyük seçeneğini seçtiğimizde html öğesinin yazı tipi boyutu 20 piksele çıktı ve 1 rem de 20 piksel oldu.
Bu yüzden dönüştürücüde temel boyut için üçüncü bir alan var. Sayfanızın kullandığı temel boyutu buraya yazın; o sayfanın okurunun gördüğü piksel değerini alırsınız. Temel boyutu bilmiyorsanız, dönüştürücü açıldığında alanda duran 16 ile başlayın, çünkü üç tarayıcının varsayılanı budur.
rem px'e nasıl çevrilir? Formül ve örnek
Formül px = rem × font-size şeklindedir; buradaki font-size, html öğesinin yazı tipi boyutudur. Örnek olarak 1,25 rem'lik bir boşluğu ele alalım. Varsayılan 16 piksellik temelde sonuç 1,25 × 16 = 20 pikseldir. 20 piksellik temelde aynı boşluk 25 piksel olur.
%62,5 tekniği html öğesinin yazı tipi boyutunu varsayılanın %62,5'ine ayarlar. Temel 10 piksel olur, çünkü 16'nın %62,5'i 10'dur. Böylece değerler doğrudan okunur: 2,4 rem 24 pikseldir. Okur tarayıcıdaki yazı tipi boyutunu 20 piksele çıkarırsa temel 12,5 piksele, 2,4 rem de 30 piksele çıkar. Dönüştürücüdeki Temel font-size alanı yüzdeyi stil dosyasındaki gibi kabul eder ve 16 pikselden hesaplar. %62,5 ya da 62.5% yazdığınızda dönüştürücü 10 piksellik temeli kullanır.
Aynı formül ters yönde bölmeyle çalışır ve px rem çevirme aracı tam olarak bunu yapar. em birimi ise üst öğenin yazı tipi boyutundan hesaplanır; onun için üst öğe boyutu alanı bulunan em px çevirme aracı var. Ölçü, kelime işlemcilerde yazı boyutu birimi olan punto (pt) ile verilmişse önce pt px çevirme aracıyla piksele çevirin.
14px, sonra 0.875rem. İkinci satır birinciden sonra geldiği için tarayıcı 0.875rem değerini uygular. 16 piksellik temelde sonuç yine 14 pikseldir, çünkü 0,875 × 16 = 14. 20 piksellik temelde ise metin 17,5 piksel olur. Fotoğraf: Nick Karvounis, Unsplash.Üç temel boyutta rem px çevirme tablosu
| rem değeri | 16 pikselde (varsayılan) | 10 pikselde (%62,5) | 20 pikselde (Büyük) |
|---|---|---|---|
| 0,125 rem | 2 px | 1,25 px | 2,5 px |
| 0,25 rem | 4 px | 2,5 px | 5 px |
| 0,375 rem | 6 px | 3,75 px | 7,5 px |
| 0,5 rem | 8 px | 5 px | 10 px |
| 0,625 rem | 10 px | 6,25 px | 12,5 px |
| 0,75 rem | 12 px | 7,5 px | 15 px |
| 0,8 rem | 12,8 px | 8 px | 16 px |
| 0,875 rem | 14 px | 8,75 px | 17,5 px |
| 0,9 rem | 14,4 px | 9 px | 18 px |
| 1 rem | 16 px | 10 px | 20 px |
| 1,1 rem | 17,6 px | 11 px | 22 px |
| 1,125 rem | 18 px | 11,25 px | 22,5 px |
| 1,2 rem | 19,2 px | 12 px | 24 px |
| 1,25 rem | 20 px | 12,5 px | 25 px |
| 1,3 rem | 20,8 px | 13 px | 26 px |
| 1,375 rem | 22 px | 13,75 px | 27,5 px |
| 1,4 rem | 22,4 px | 14 px | 28 px |
| 1,5 rem | 24 px | 15 px | 30 px |
| 1,6 rem | 25,6 px | 16 px | 32 px |
| 1,625 rem | 26 px | 16,25 px | 32,5 px |
| 1,75 rem | 28 px | 17,5 px | 35 px |
| 1,8 rem | 28,8 px | 18 px | 36 px |
| 1,875 rem | 30 px | 18,75 px | 37,5 px |
| 2 rem | 32 px | 20 px | 40 px |
| 2,25 rem | 36 px | 22,5 px | 45 px |
| 2,5 rem | 40 px | 25 px | 50 px |
| 2,75 rem | 44 px | 27,5 px | 55 px |
| 3 rem | 48 px | 30 px | 60 px |
| 3,5 rem | 56 px | 35 px | 70 px |
| 3,75 rem | 60 px | 37,5 px | 75 px |
| 4 rem | 64 px | 40 px | 80 px |
| 4,5 rem | 72 px | 45 px | 90 px |
| 5 rem | 80 px | 50 px | 100 px |
| 6 rem | 96 px | 60 px | 120 px |
| 8 rem | 128 px | 80 px | 160 px |
| 10 rem | 160 px | 100 px | 200 px |
| 16 rem | 256 px | 160 px | 320 px |
| 20 rem | 320 px | 200 px | 400 px |
| 32 rem | 512 px | 320 px | 640 px |
Tailwind CSS'teki yazı boyutları kaç piksel?
| Tailwind sınıfı | rem değeri | 16'da piksel | 20'de piksel |
|---|---|---|---|
| text-xs | 0,75 rem | 12 px | 15 px |
| text-sm | 0,875 rem | 14 px | 17,5 px |
| text-base | 1 rem | 16 px | 20 px |
| text-lg | 1,125 rem | 18 px | 22,5 px |
| text-xl | 1,25 rem | 20 px | 25 px |
| text-2xl | 1,5 rem | 24 px | 30 px |
| text-3xl | 1,875 rem | 30 px | 37,5 px |
| text-4xl | 2,25 rem | 36 px | 45 px |
| text-5xl | 3 rem | 48 px | 60 px |
| text-6xl | 3,75 rem | 60 px | 75 px |
| text-7xl | 4,5 rem | 72 px | 90 px |
| text-8xl | 6 rem | 96 px | 120 px |
| text-9xl | 8 rem | 128 px | 160 px |
Chrome ve Edge'deki Yazı tipi boyutu seçenekleri hangi temel boyutu ayarlar?
| Chrome'daki seçenek | Edge'deki seçenek | Temel boyut, yani 1 rem | 0,875 rem | 1,5 rem | 2 rem |
|---|---|---|---|---|---|
| Çok küçük | Çok küçük Yazı tipi boyutu | 9 px | 7,88 px | 13,5 px | 18 px |
| Küçük | Küçük Yazı tipi boyutu | 12 px | 10,5 px | 18 px | 24 px |
| Orta (Önerilir) | Orta Büyüklükte (Önerilen) Yazı tipi boyutu | 16 px | 14 px | 24 px | 32 px |
| Büyük | Büyük Yazı tipi boyutu | 20 px | 17,5 px | 30 px | 40 px |
| Çok büyük | Çok büyük Yazı tipi boyutu | 24 px | 21 px | 36 px | 48 px |
Bu dönüştürücü hangi yazımları kabul edip hesaplıyor?
| 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: rem değeri, 16 piksellik temel | ||
| 1,5 | 24 px | Türkçede yazıldığı gibi virgüllü ondalık: 1,5 ile 16 çarpılır. |
| 1.5 | 24 px | Ardından bir ya da iki rakam gelen noktayı, CSS'teki gibi ondalık ayırıcı olarak okuruz. |
| 1.875rem | 30 px | Noktayı, ardından üç rakam gelse de ondalık ayırıcı olarak okuruz, çünkü CSS ondalığı noktayla yazar. Alanın altında ikinci olası okumayı gösteren bir uyarı çıkar: 1875. |
| 1.875 | 30 px | Türkçede binler noktayla ayrılsa da alan tek başına duran noktayı her zaman ondalık ayırıcı sayar ve 1,875 rem hesaplar. Alanın altında bir uyarı çıkar; bin sekiz yüz yetmiş beş rem için 1875 ya da 1 875 yazın. |
| .875rem | 14 px | Sıkıştırılmış bir CSS dosyasından, noktadan önce sıfır olmadan gelen değer: 0,875 olarak okur, rem kelimesini atlarız. |
| font-size: 1.5rem; | 24 px | Stil dosyasından tam bir satır: sayıyı alır, özellik adını ve noktalı virgülü atlarız. |
| --text-sm: 0.875rem; | 14 px | Tailwind CSS tema değişkeninden bir satır: değişken adının başındaki iki tire eksi işareti sayılmaz. |
| margin-top: -0.5rem; | -8 px | Stil dosyasından negatif bir kenar boşluğu: sayıya bitişik eksi işareti korunur ve sonuç negatif çıkar. |
| 3/4 | 12 px | Bayağı kesir: 3 bölü 4, yani 0,75 rem. |
| “Temel font-size” alanı: hesaplanan değer temel boyuttur | ||
| %62,5 | 10 px | Türkçedeki gibi yüzde işareti sayının önünde: varsayılan 16 pikselden hesaplanır ve 16'nın %62,5'i 10'dur. |
| 62.5% | 10 px | CSS'teki yazım, yüzde işareti sonda: sonuç aynıdır. |
| %125 | 20 px | 100'ün üzerinde bir yüzde: 16'nın %125'i 20'dir, yani Chrome'daki Büyük seçeneğinin verdiği temelle aynıdır. |
| font-size: 20px | 20 px | Geliştirici araçlarından kopyalanan satır: sayıyı alır, özellik adını ve birimi atlarız. |
| 18,5 | 18,5 px | 1 ile 100 arasında kaldığı sürece virgüllü ondalık bir temel de kabul edilir. |
Chrome, Edge, Firefox ve Safari'de temel yazı tipi boyutu nasıl değiştirilir?
Chrome, Edge ve Firefox'ta okurun seçtiği boyut, açtığı sayfalardaki her rem değerinin temeli olur. Ayar adları her tarayıcının Türkçe arayüzünde göründüğü gibidir.
Chrome
Ayarlar bölümünü, ardından Görünüm bölümünü açın ve Yazı tipi boyutu listesinden bir boyut seçin. Yazı tiplerini özelleştir düğmesi, Yazı tipi boyutu ve Minimum yazı tipi boyutu kaydırıcılarının bulunduğu sayfayı açar.Edge
Ayarlar bölümünde Görünüm sayfasını açın, oradan Yazı tipleri satırına girin ve Yazı tipi boyutu listesinden seçin. Seçeneklerin adları “Yazı tipi boyutu” ifadesiyle biter; ortadaki seçenek Orta Büyüklükte (Önerilen) Yazı tipi boyutu seçeneğidir. Listenin altında En küçük yazı tipi boyutu ayarı yer alır.Firefox
Ayarlar bölümünde Erişilebilirlik sayfasını açın ve Yazı tipleri başlığı altındaki Yazı tipi boyutu listesinden bir sayı seçin. Gelişmiş ayarlar düğmesi, her karakter kümesi için ayrı yazı tiplerinin ve En küçük yazı tipi boyutu ayarının bulunduğu Yazı tipleri penceresini açar. Türkçe sayfalar, İngilizce sayfalar gibi Latin karakter kümesini kullanır.Mac'te Safari
Safari menüsünde Ayarlar'ı seçin, sonra İleri Düzey'i tıklayın. Safari burada yalnızca alt sınırı belirler ve Türkçe arayüzde yazı boyutuna punto der: Şundan küçük puntoları asla kullanma seçeneğini açıp bir sayı seçin. Apple, hangisini seçeceğinizden emin değilseniz 12'yi veya 14'ü denemenizi önerir[4].
Metin boyutları neden rem ile yazılır?
rem ile yazılan metin, okur tarayıcıda yazı tipi boyutunu büyüttüğünde büyür; piksel ile yazılan metin aynı kalır. W3C'nin web içeriği erişilebilirlik yönergeleri WCAG'deki 1.4.4 Resize Text başarı ölçütü bu konuyu ele alır: “Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.”[5] Yani altyazılar ve metin görüntüleri dışında metin, yardımcı teknoloji olmadan ve içerik ya da işlev kaybı olmadan %200'e kadar büyütülebilir. Ölçütü İngilizce aslından aktarıyoruz. Piksele çevirmek sonucu tasarımla karşılaştırırken işe yarar; stil dosyası ise rem ile kalır.
Piksel: diğer birimlerden dönüştürme
Kaynaklar
- CSS Values and Units Module Level 4 — W3C
- Piksel — Vikipedi
- font-size — Tailwind CSS
- Mac'teki Safari'de İleri Düzey ayarları değiştirme — Apple
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
- <length> CSS type — MDN Web Docs
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: · hazırlayan ve kontrol eden: Arteon ekibi
rem px çevirme hakkında sık sorulan sorular
1 rem her zaman 16 piksel mi?
Temel yazı tipi boyutu varsayılan değerinde kaldıkça evet[6]. Sayfa html öğesine başka bir boyut yazarsa ya da okur tarayıcıda yazı tipi boyutunu değiştirirse 1 rem de değişir. Örneğin Chrome'da Büyük seçeneğiyle 1 rem 20 piksel olur.
1,5 rem kaç px?
1,5 rem varsayılan 16 piksellik temelde 24 pikseldir. 10 piksellik temelde 15 piksel, 20 piksellik temelde 30 piksel eder.
2 rem ve 0,5 rem kaç piksel?
16 piksellik temelde 2 rem 32 piksel, 0,5 rem ise 8 pikseldir. İkisi de temelle birlikte değişir: 20 piksellik temelde 2 rem 40 piksel, 0,5 rem 10 piksel olur.
rem ile em arasındaki fark nedir?
rem her zaman html öğesinin yazı tipi boyutundan hesaplanır, bu yüzden değeri sayfanın her yerinde aynıdır. em ise üst öğenin yazı tipi boyutundan hesaplanır; 20 piksellik bir öğenin içindeki 1.5em 30 piksel eder. em hesaplamak için em px çevirme aracını kullanın.
Sayfa yakınlaştırma 1 rem'i değiştirir mi?
Chrome'daki ölçümümüzde sayfa %125'e yakınlaştırıldıktan sonra 1 rem yine 16 piksel kaldı. Sayfa yakınlaştırma ayarı sayfadaki her şeyi birlikte büyütür, rem ile yazılanı da piksel ile yazılanı da. Yazı tipi boyutunu değiştirmek ise yalnızca rem değerini değiştirir.
En küçük yazı tipi boyutu rem hesabını değiştirir mi?
Chrome ve Firefox'taki ölçümümüzde değiştirmedi. html { font-size: 62.5% } kullanan bir sayfada en küçük boyutu 12 piksele ayarladık. 2,4 rem yine 24 piksel kaldı, yani rem hâlâ 10 piksellik temelden hesaplanıyordu.
Bir sitenin temel boyutunu nasıl öğrenirim?
Chrome'da geliştirici araçlarını açın, Öğeler panelinde html öğesini seçin, ardından Hesaplandı sekmesini açıp font-size değerini bulun. Orada görünen sayı, sitenin ayarı ile okurun ayarı birleştikten sonra o sayfada rem'in hesaplandığı temeldir.
Tailwind CSS rem kullanır mı?
Evet, Tailwind CSS'teki yazı boyutları rem ile yazılır. text-base sınıfı 1 rem'dir, yani varsayılan temelde 16 pikseldir; text-2xl sınıfı 1,5 rem, yani 24 pikseldir.
Sonuç neden 17,5 piksel gibi kesirli çıkıyor?
16 dışındaki bir temelle çarpmak kesir verebilir: 20 piksellik temelde 0,875 rem 17,5 pikseldir. Dönüştürücü sonucu en fazla iki ondalık basamakla gösterir ve tarayıcı sayfada bu tür piksel kesirlerini kabul eder.
Araçlarımızı geliştirmemize yardım edin
Tarayıcınızda farklı bir sonuç veren bir değer mi buldunuz ya da dönüştürücü için bir fikriniz mi var? Bize yazın.