Μετατροπή px σε em

Τελευταίος έλεγχος περιεχομένου:2026-11-06

Τα 24 px είναι 1,5 em όταν το γονικό στοιχείο έχει μέγεθος γραμματοσειράς 16 pixel. Ο μετατροπέας διαιρεί τα pixel με το μέγεθος του γονικού και δείχνει το αποτέλεσμα με έως τέσσερα δεκαδικά. Γράψτε το μέγεθος από το σχέδιο και αντιγράψτε το αποτέλεσμα με τελεία με ένα κλικ.

Pixel

Font-size γονικού στοιχείου

σε

Τι είναι το pixel και τι μέγεθος εκφράζει το em;

Τα προγράμματα σχεδίασης δίνουν τα μεγέθη σε pixel. Το Dev Mode της Figma γράφει τον κώδικα CSS σε px ή σε rem και περιγράφει το px ως λογικό pixel που ορίζει το πρόγραμμα περιήγησης[1]. Σύμφωνα με το πρότυπο CSS, 96 pixel κάνουν μία ίντσα[2]· γι’ αυτό και ο μετατροπέας px σε ίντσες ανοίγει με 96 DPI και δίνει 1 ίντσα για 96 pixel. Η λέξη pixel προέρχεται από το αγγλικό picture element, και η Βικιπαίδεια την αποδίδει ως εικονοστοιχείο[3].

Το em λειτουργεί σαν πολλαπλασιαστής: δείχνει πόσες φορές πολλαπλασιάζεται το μέγεθος γραμματοσειράς του σημείου όπου γράφεται. Στην ιδιότητα font-size πολλαπλασιάζεται το μέγεθος του γονικού στοιχείου, ενώ στις άλλες ιδιότητες, όπως το padding και το margin, το μέγεθος του ίδιου του στοιχείου[2]. Με τη μετατροπή pixel σε em, το σταθερό μέγεθος του σχεδίου γίνεται αυτός ο πολλαπλασιαστής.

Πόσα em είναι τα 24 px;

Όταν το γονικό στοιχείο έχει μέγεθος γραμματοσειράς 16 pixel, τα 24 px είναι 1,5 em. Ο υπολογισμός είναι μία διαίρεση: em = pixel ÷ μέγεθος γραμματοσειράς του γονικού. Με γονικό 16 pixel ένα pixel είναι 0,0625 em και οι υπόλοιπες τιμές είναι πολλαπλάσιά του. Για παράδειγμα, τα 12 pixel γίνονται 0,75 em και τα 20 pixel 1,25 em. Τα προγράμματα περιήγησης έχουν συνήθως προεπιλογή 16 pixel[4], και με αυτή ανοίγει το πεδίο του γονικού.

Για σωστό αποτέλεσμα, ο διαιρέτης πρέπει να είναι το μέγεθος γραμματοσειράς εκεί όπου θα γραφτεί το em. Για το font-size χρησιμοποιήστε το μέγεθος του γονικού στοιχείου. Για padding, margin ή width χρησιμοποιήστε το μέγεθος του ίδιου του στοιχείου. Γι’ αυτό σε κουμπί με κείμενο 20 pixel, εσωτερικό περιθώριο 10 pixel είναι 0,5 em, ακόμη κι αν το γονικό έχει 16 pixel.

Ο μετατροπέας δείχνει το αποτέλεσμα με έως τέσσερα δεκαδικά. Τα 17 pixel με γονικό 16 pixel είναι ακριβώς 1,0625 em. Τα ίδια 17 pixel με γονικό 14 pixel στρογγυλεύονται σε 1,2143 em.

Πώς μετατρέπονται τα px σε em; Τύπος και δεκαδικό σημείο

Ο τύπος είναι em = px ÷ font-size του γονικού στοιχείου. Ας διαιρέσουμε την τιμή των 20 pixel σε τρία σημεία. Με γονικό 16 pixel το αποτέλεσμα είναι 1,25 em. Με γονικό 14 pixel βγαίνει 1,4286 em. Αν και το γονικό έχει 20 pixel, το αποτέλεσμα είναι ακριβώς 1 em.

Στα ελληνικά το δεκαδικό διαχωριστικό είναι το κόμμα, ενώ το CSS διαβάζει το δεκαδικό μέρος ενός αριθμού μόνο μετά από τελεία[5]. Αν στο φύλλο στυλ γραφτεί font-size: 1,25em, το πρόγραμμα περιήγησης θεωρεί τη δήλωση μη έγκυρη και την παραλείπει[6]. Το μετρήσαμε στο Chrome, στον Firefox και στη μηχανή WebKit που χρησιμοποιεί το Safari: μέσα σε γονικό 16 pixel, το στοιχείο με 1,5em έμεινε 16 pixel, ενώ το στοιχείο με 1.5em έγινε 24 pixel.

Γι’ αυτό ο μετατροπέας κρατά χωριστά τις δύο γραφές. Το πεδίο αποτελέσματος δείχνει τον αριθμό με κόμμα, όπως γράφεται στα ελληνικά. Το κουμπί «Αντιγραφή αποτελέσματος» αντιγράφει τον αριθμό με τελεία και χωρίς μονάδα, οπότε το 1,0938 της οθόνης πηγαίνει στο πρόχειρο ως 1.0938.

Την αντίστροφη πράξη την κάνει ο μετατροπέας em σε px. Αν το μέγεθος πρέπει να μένει ίδιο σε όλη τη σελίδα, δηλαδή να υπολογίζεται από το ριζικό στοιχείο, χρησιμοποιήστε τον μετατροπέα px σε rem. Πόσες στιγμές είναι τα ίδια pixel στο χαρτί το δείχνει ο μετατροπέας px σε pt.

Κώδικας CSS του κανόνα a.fs-link με padding: 4px 2px και έκφραση calc() που χρησιμοποιεί 1em — Ο κανόνας `a.fs-link` γράφει το εσωτερικό περιθώριο σε pixel και τη θέση του φόντου μέσα σε `calc()` με `1em`. Το κομμάτι σε pixel μένει σταθερό, ενώ το κομμάτι σε em αλλάζει μαζί με τη γραμματοσειρά του συνδέσμου. Σε σύνδεσμο 16 pixel η έκφραση δίνει 12,4 pixel και σε σύνδεσμο 20 pixel δίνει 16 pixel. Φωτογραφία: FONG, Unsplash.

Πίνακας μετατροπής px σε em για γονικό 16, 14 και 20 pixel

Η αριστερή στήλη δείχνει την τιμή σε pixel από το σχέδιο. Οι άλλες τρεις δείχνουν την ίδια τιμή σε em με γονικό 16, 14 και 20 pixel. Οι επισημασμένες σειρές είναι τα 16 και τα 24 pixel.

Τιμή σε pixel	Γονικό 16 pixel	Γονικό 14 pixel	Γονικό 20 pixel
1 px	0,0625 em	0,0714 em	0,05 em
2 px	0,125 em	0,1429 em	0,1 em
4 px	0,25 em	0,2857 em	0,2 em
6 px	0,375 em	0,4286 em	0,3 em
8 px	0,5 em	0,5714 em	0,4 em
10 px	0,625 em	0,7143 em	0,5 em
11 px	0,6875 em	0,7857 em	0,55 em
12 px	0,75 em	0,8571 em	0,6 em
13 px	0,8125 em	0,9286 em	0,65 em
14 px	0,875 em	1 em	0,7 em
15 px	0,9375 em	1,0714 em	0,75 em
16 px	1 em	1,1429 em	0,8 em
17 px	1,0625 em	1,2143 em	0,85 em
18 px	1,125 em	1,2857 em	0,9 em
20 px	1,25 em	1,4286 em	1 em
22 px	1,375 em	1,5714 em	1,1 em
24 px	1,5 em	1,7143 em	1,2 em
26 px	1,625 em	1,8571 em	1,3 em
28 px	1,75 em	2 em	1,4 em
30 px	1,875 em	2,1429 em	1,5 em
32 px	2 em	2,2857 em	1,6 em
36 px	2,25 em	2,5714 em	1,8 em
40 px	2,5 em	2,8571 em	2 em
44 px	2,75 em	3,1429 em	2,2 em
48 px	3 em	3,4286 em	2,4 em
56 px	3,5 em	4 em	2,8 em
64 px	4 em	4,5714 em	3,2 em
72 px	4,5 em	5,1429 em	3,6 em
96 px	6 em	6,8571 em	4,8 em
128 px	8 em	9,1429 em	6,4 em

Οι τιμές em γράφονται όπως στο πεδίο αποτελέσματος, με έως τέσσερα δεκαδικά. Όταν τις μεταφέρετε στο φύλλο στυλ, γράψτε τελεία για τα δεκαδικά: το 0,8125 em γράφεται 0.8125em.

Ποια μεγέθη γράφονται σε em, σε rem ή σε px;

Η ίδια τιμή σε pixel μετατρέπεται σε διαφορετική μονάδα, ανάλογα με τον ρόλο της στο σχέδιο. Ο πίνακας δείχνει για οκτώ μεγέθη τη μονάδα, την αιτιολογία και τη γραφή CSS σε περιβάλλον 16 pixel.

Μέγεθος στο σχέδιο	Μονάδα	Αιτιολογία	Γραφή CSS με 16 pixel
Μέγεθος κειμένου σώματος, 18 px	rem	Μένει ίδιο σε όλη τη σελίδα και ακολουθεί τη ρύθμιση του αναγνώστη	1.125rem
Εσωτερικό περιθώριο κουμπιού, 12 px	em	Μεγαλώνει μαζί με το κείμενο του κουμπιού	0.75em
Εσοχή λίστας, 24 px	em	Η εσοχή μένει ανάλογη με το μέγεθος του κειμένου της λίστας	1.5em
Σημείο αλλαγής διάταξης, 768 px	em	Στο media query το em υπολογίζεται από το αρχικό μέγεθος γραμματοσειράς και ακολουθεί τη ρύθμιση του αναγνώστη	48em
Απόσταση σε πρότυπο email, 16 px	em	Στη δοκιμή του Can I email το em λειτούργησε σε όλα τα προγράμματα, ενώ το rem όχι στο Outlook για Windows	1em
Λεπτό περίγραμμα, 1 px	px	Η γραμμή μένει ένα pixel, όποιο κι αν είναι το μέγεθος του κειμένου	1px
Απόσταση ανάμεσα σε ενότητες, 32 px	rem	Η κλίμακα αποστάσεων της σελίδας μένει ενιαία	2rem
Μέγιστο πλάτος στήλης κειμένου, 640 px	em	Το μήκος της γραμμής αλλάζει μαζί με το μέγεθος του κειμένου	40em

Η σειρά για το σημείο αλλαγής στηρίζεται στο Media Queries Level 4 του W3C[7]. Η σειρά για το email στηρίζεται στις δοκιμές em και rem του Can I email[8][9]. Τις τιμές rem του πίνακα τις υπολογίζει ο μετατροπέας px σε rem με ριζικό στοιχείο 16 pixel.

Τι αλλάζει ανάμεσα σε pixel και em από το σχέδιο στον κώδικα;

Στο σχέδιο τα μεγέθη είναι γραμμένα σε pixel, ενώ στον κώδικα μπορούν να γραφτούν σε em. Ο πίνακας δείχνει πώς συμπεριφέρονται οι δύο μονάδες σε αυτό το πέρασμα από έξι πλευρές.

Πλευρά	Pixel (px)	em
Από πού έρχεται η τιμή	Από το αρχείο σχεδίου ή από μέτρηση στην οθόνη	Από υπολογισμό: pixel ÷ μέγεθος γραμματοσειράς
Από τι εξαρτάται	Είναι σταθερό: 96px είναι μία ίντσα	Από το μέγεθος γραμματοσειράς εκεί όπου γράφεται
Όταν ο αναγνώστης μεγαλώνει το κείμενο	Μένει ίδιο	Μεγαλώνει μαζί με το κείμενο
Όταν το ίδιο στοιχείο μπαίνει με μεγαλύτερο κείμενο	Κάθε μέγεθος αλλάζει χωριστά	Τα μεγέθη υπολογίζονται ξανά από το νέο μέγεθος γραμματοσειράς
font-size σε ένθετα στοιχεία	Ίδιο σε κάθε επίπεδο	Πολλαπλασιάζεται ξανά με το αποτέλεσμα του προηγούμενου επιπέδου
Γραφή στο φύλλο στυλ	13px	0.8125em, με τελεία

Τα 96 pixel ανά ίντσα στη στήλη των pixel προέρχονται από το πρότυπο CSS, και οι σειρές του em ακολουθούν τον ορισμό του em στο ίδιο πρότυπο[2].

Ποιες γραφές δέχεται ο μετατροπέας px σε em;

Επικολλήστε την τιμή όπως την αντιγράψατε από το πρόγραμμα σχεδίασης, από το φύλλο στυλ ή από ένα μήνυμα: το πεδίο δέχεται κάθε γραφή του πίνακα και τη μετατρέπει σε em. Δεν χρειάζεται να την καθαρίσετε πρώτα. Τη στήλη αποτελέσματος την υπολόγισε ο ίδιος ο μετατροπέας με γονικό 16 pixel.

Τι γράφετε ή επικολλάτε	Αποτέλεσμα	Πώς το διαβάζουμε
Πρώτο πεδίο: τιμή σε pixel, γονικό 16 pixel
24	1,5 em	Σκέτος αριθμός από το πάνελ του σχεδίου: διαιρούμε το 24 με το 16.
24px	1,5 em	Σε τιμή που αντιγράφηκε μαζί με τη μονάδα παραλείπουμε τα γράμματα px και διαιρούμε μόνο τον αριθμό.
24 πχ	1,5 em	Αν γράψετε px χωρίς να αλλάξετε πληκτρολόγιο, η ελληνική διάταξη βγάζει «πχ»· παραλείπουμε τα γράμματα και κρατάμε τον αριθμό.
font-size: 24px;	1,5 em	Σε ολόκληρη γραμμή από το φύλλο στυλ, το όνομα της ιδιότητας και το τελικό σύμβολο «;» δεν μπαίνουν στον υπολογισμό.
17,5	1,0938 em	Δεκαδικά pixel με κόμμα, όπως στα ελληνικά: το αποτέλεσμα στρογγυλεύεται σε τέσσερα δεκαδικά.
17.5px	1,0938 em	Η τελεία κολλημένη στο px είναι δεκαδική, όπως στο CSS· το πεδίο τη δείχνει ως 17,5.
13.5	0,8438 em	Την τελεία τη διαβάζουμε ως δεκαδικό διαχωριστικό: 13,5 pixel.
1.200	0,075 em	Όταν ο αριθμός έχει μία μόνο τελεία, τη διαβάζουμε πάντα ως δεκαδικό διαχωριστικό, οπότε υπολογίζουμε 1,2 pixel. Κάτω από το πεδίο εμφανίζεται υπόδειξη· για χίλια διακόσια pixel γράψτε 1200 ή 1 200.
margin-top: -8px;	-0,5 em	Σε αρνητικό περιθώριο το πρόσημο μείον μένει, οπότε το αποτέλεσμα είναι μείον μισό em.
Πεδίο γονικού: η στήλη αποτελέσματος δείχνει το μέγεθος σε pixel που διαβάζει το πεδίο
14px	14 px	Και σε μέγεθος γραμμένο μαζί με τη μονάδα κρατάμε μόνο τον αριθμό.
font-size: 18px;	18 px	Από ολόκληρη γραμμή αντιγραμμένη από την καρτέλα Υπολογισμένα κρατάμε τον αριθμό.
125%	20 px	Και ποσοστό πάνω από 100 υπολογίζεται από τα προεπιλεγμένα 16 pixel: το 125% είναι 20 pixel.

Αν μια γραμμή περιέχει περισσότερους από έναν αριθμούς, όπως font: 16px/24px Arial, το πεδίο σάς ζητά έναν μόνο αριθμό· επικολλήστε τότε ξεχωριστά την τιμή που θέλετε να μετατρέψετε.

Πώς μετατρέπω ένα μέγεθος από τη Figma σε em;

Για να περάσει μια τιμή σε pixel από το σχέδιο στο φύλλο στυλ ως em, χρειάζεστε δύο αριθμούς: το ίδιο το μέγεθος και το μέγεθος γραμματοσειράς από το οποίο θα υπολογιστεί το em. Η Figma είναι διαθέσιμη στα αγγλικά, ιαπωνικά, κορεατικά, γαλλικά, γερμανικά, ισπανικά και πορτογαλικά[10], γι’ αυτό γράφουμε τα ονόματα των πινάκων όπως στο αγγλικό περιβάλλον.

Πάρτε το μέγεθος από το σχέδιο
Επιλέξτε το αντικείμενο στη Figma και διαβάστε το μέγεθος γραμματοσειράς ή την απόσταση. Στο Dev Mode, η ενότητα Code του πίνακα Inspect δείχνει το CSS σε px ή σε rem[1]. Το Dev Mode υπάρχει στα πληρωμένα πλάνα και χρειάζεται θέση (seat) Full ή Dev[11].
Βρείτε το μέγεθος από το οποίο υπολογίζεται το em
Αν η σελίδα είναι ήδη ανοιχτή στο πρόγραμμα περιήγησης, πατήστε F12 για τα DevTools[12]. Στον πίνακα Στοιχεία επιλέξτε το γονικό στοιχείο για το font-size ή το ίδιο το στοιχείο για padding και margin, και διαβάστε το font-size στην καρτέλα Υπολογισμένα.
Γράψτε τους δύο αριθμούς στον μετατροπέα
Γράψτε τα pixel στο πρώτο πεδίο και το μέγεθος που βρήκατε στο πεδίο «Font-size γονικού στοιχείου». Το αποτέλεσμα σε em εμφανίζεται αμέσως.
Αντιγράψτε το αποτέλεσμα
Πατήστε «Αντιγραφή αποτελέσματος», επικολλήστε τον αριθμό στο φύλλο στυλ και προσθέστε από πίσω em, για παράδειγμα 0.8125em. Ο αριθμός πηγαίνει στο πρόχειρο με τελεία, οπότε δεν χρειάζεται διόρθωση με το χέρι.
Ελέγξτε το αποτέλεσμα στο πρόγραμμα περιήγησης
Φορτώστε ξανά τη σελίδα και δείτε πάλι την καρτέλα Υπολογισμένα. Η τιμή του font-size ή του padding πρέπει να δείχνει τα ίδια pixel με το σχέδιο.

Πότε το em ταιριάζει καλύτερα από το rem;

Το rem δίνει το ίδιο αποτέλεσμα σε όλη τη σελίδα, ενώ το em συνδέει τα μεγέθη μέσα σε ένα στοιχείο με το μέγεθος γραμματοσειράς του. Ας πούμε ότι το εσωτερικό περιθώριο ενός κουμπιού είναι γραμμένο σε em. Για μεγαλύτερο κουμπί αρκεί να ανεβάσετε τη γραμματοσειρά του από 16 σε 20 pixel: το περιθώριο των 0.75em μεγαλώνει από μόνο του από 12 σε 15 pixel.

Και στα πρότυπα email το em έχει ευρύτερη υποστήριξη. Στη δοκιμή του Can I email το 2020 το em λειτούργησε στο 100% των προγραμμάτων που δοκιμάστηκαν[8]. Το rem λειτούργησε στο 69,05% και δεν υποστηρίχθηκε στο Outlook για Windows, εκδόσεις 2003–2019[9]. Όταν μετατρέπετε μια απόσταση ενός newsletter σε em, γράψτε στο πεδίο του γονικού το βασικό μέγεθος γραμματοσειράς του προτύπου.

Κίτρινο φύλλο δειγμάτων γραμματοσειράς με ένα μεγάλο μπλε G, το σύμβολο & και λέξεις σε μικρότερα γράμματα — Στο φύλλο δειγμάτων το μεγάλο G στέκεται δίπλα σε λέξεις με μικρά γράμματα. Σε κείμενο 16 pixel, απόσταση 8 pixel είναι 0,5 em. Δίπλα σε γράμμα 96 pixel η ίδια απόσταση είναι μόλις 0,0833 em, επειδή στη μετατροπή σε em ο διαιρέτης είναι το μέγεθος του κειμένου στο οποίο ανήκει η απόσταση. Φωτογραφία: Mika Baumeister, Unsplash.

Pixel: μετατροπή σε άλλες μονάδες

px σε pt px σε rem px σε cm px σε mm px σε ίντσες

Πηγές

Use code snippets in Dev Mode — Figma Help Center
CSS Values and Units Module Level 4 — W3C
Εικονοστοιχείο — Βικιπαίδεια
font-size — MDN Web Docs
CSS Syntax Module Level 3 — W3C
CSS 2.1: Syntax and basic data types — W3C
Media Queries Level 4 — W3C
CSS unit: em — Can I email
CSS unit: rem — Can I email
Change your language preference — Figma Help Center
Guide to Dev Mode — Figma Help Center
CSS features reference — Chrome for Developers

Όλες τις τιμές των πινάκων τις υπολογίσαμε από τους ορισμούς των μονάδων και τις ελέγξαμε αριθμητικά πριν από τη δημοσίευση. Τα ιστορικά στοιχεία και οι ονομασίες των τοπικών μονάδων βασίζονται στις πηγές που αναφέρονται παραπάνω.

Τελευταίος έλεγχος περιεχομένου: 6 Νοεμβρίου 2026 · συντάχθηκε και ελέγχθηκε από την ομάδα της Arteon

Συχνές ερωτήσεις για τη μετατροπή px σε em

Πόσα em είναι το 1 px;

Με γονικό 16 pixel, ένα pixel είναι 0,0625 em. Με γονικό 14 pixel είναι 0,0714 em και με γονικό 20 pixel 0,05 em.

Πόσα em είναι τα 12 px;

Με γονικό 16 pixel, τα 12 pixel είναι 0,75 em. Με γονικό 14 pixel το αποτέλεσμα είναι 0,8571 em και με 20 pixel 0,6 em.

Πόσα em είναι τα 14 px;

Με γονικό 16 pixel, τα 14 pixel είναι 0,875 em. Με γονικό 14 pixel είναι ακριβώς 1 em και με γονικό 20 pixel 0,7 em.

Πόσα em είναι τα 16 px;

Αν και το γονικό έχει 16 pixel, τα 16 pixel είναι ακριβώς 1 em. Με γονικό 14 pixel βγαίνουν 1,1429 em και με γονικό 20 pixel 0,8 em.

Πόσα em είναι τα 18 px;

Με γονικό 16 pixel, τα 18 pixel είναι 1,125 em. Με γονικό 14 pixel είναι 1,2857 em και με γονικό 20 pixel 0,9 em.

Πώς στρογγυλεύεται το αποτέλεσμα px σε em;

Ο μετατροπέας δείχνει έως τέσσερα δεκαδικά. Τα 13 pixel με γονικό 16 pixel δίνουν ακριβώς 0,8125 em, ενώ τα 17 pixel με γονικό 14 pixel στρογγυλεύονται σε 1,2143 em. Με τέσσερα δεκαδικά η απόκλιση σε κείμενο 16 pixel μένει κάτω από ένα χιλιοστό του pixel.

Δείχνει η Figma τιμές em;

Το Dev Mode της Figma γράφει το CSS με δύο μονάδες: px και rem[1]. Για em, γράψτε στον μετατροπέα τα pixel από τη Figma και το μέγεθος γραμματοσειράς του γονικού.

Πώς γράφω ένα σημείο αλλαγής διάταξης σε em;

Διαιρέστε τα pixel με το 16: τα 768 pixel γίνονται 48em και τα 1 024 pixel 64em. Το em στα media queries δεν επηρεάζεται από τους κανόνες font-size της σελίδας, γι’ αυτό αφήστε 16 στο πεδίο του γονικού[7]. Σε rem το αποτέλεσμα είναι το ίδιο, 48rem, και μπορείτε να το ελέγξετε στον μετατροπέα px σε rem.

Στιγμιότυπο οθόνης του δωρεάν εργαλείου της Arteon: Μετατροπή px σε em

Βοηθήστε μας να βελτιώσουμε τα εργαλεία μας

Κάποιο μέγεθος από το σχέδιό σας δεν έδωσε την τιμή em που περιμένατε ή έχετε πρόταση για τον μετατροπέα; Γράψτε μας.