Em 계산기 - em gyesangi

What is an EM?

Wikipedia puts it well: "An em is a unit of measurement in the field of typography, equal to the size of the current font." If your font-size is at 16 pixels, then 1em = 16px

For more information visit Wikipedia and Mozilla MDN.

What is the text sizing difference between PX, EM, %, PT?

Pixels and points are static measurements, but commonly used in different mediums. Pixels are used on screens because screens are measured in pixels. Although points can be used on screen, they are the standard in printing because they are a factor of DPI.

Percent and EMs on the other hand are relative measurements. The size of an EM or percentage unit depends on its parent. If body text is sized at 12 pixels, then text set at 120% or 1.2 EM inside the body will be 1.2 * 12, or 14.4 pixels.

How do I convert between PX, EM, %, and PT?

Assuming you aren’t using PXtoEM.com to keep it simple, here are the formulas PXtoEM.com uses.

Note: 16px is used as the body text size in all conversions because that is the browser default. You will change 16px to your base text size.

Why size your text with EMs in CSS?

Style sheets that use EMs are easier to maintain for the designer (especially with PXtoEM.com at your side) and more accessible to end-users.

Style sheets become easier to maintain because all text set in EMs scale to the body font-size. Only one element\'s font-size needs to change instead of individually changing the font-size of each element.

Accessibility is increased for end-users because text is scaled based on their preferences rather than set statically in pixels. Additionally, end-users can use hot keys to scale the text in all browsers. Many people have difficulty reading small text on a computer screen.

For more information visit A List Apart, informIT, Jon Tan\'s Blog, and this SharePoint Blog.

This site uses Blueprint CSS to generate your yummy CSS.

What is PXtoEM.com?

PXtoEM.com is px to em conversion made simple. Choose your body font size in pixels (px)and out comes a complete pixel (px) to em conversion table, making elastic web design with CSS a snap. The once daunting challenge of converting pixels (px) to the elusive em has now been reduced to a booger eating pipsqueak. Thanks, PXtoEM.com!

PXtoEM.com takes it a step further and gives CSS to start with! After you select your body font size, go to "Get CSS" and there you go!

PXtoEM.com was created by Brian Cray

기준값(상위 요소 값) 변경

기준값은 16px이 기본으로 지정되어 있습니다.
기준값 변경이 필요하신 경우 아래 부분에 기준 Pixel 사이즈를 입력하고, ‘저장’ 버튼을 클릭해주세요.

PX↔EM

Pixel을 em 사이즈로 변환하는 경우

• 1. 현재 Pixel값 입력 부분에 현재 pixel 값을 입력
• 2. ‘변환‘ 버튼 클릭
• 3. 변환된 값 부분에 표시되는 em 사이즈를 확인

EM↔PX

em 사이즈를 Pixel로 변환하는 경우

• 1. 현재 em값 입력 부분에 현재 pixel 값을 입력
• 2. ‘변환‘ 버튼 클릭
• 3. 변환된 값 부분에 표시되는 pixel 사이즈를 확인

변환된 값

기준 pixel에 대한 em, pt

최근 홈페이지를 제작하다보면 익숙하지 않은 크기 단위들이 나오는것을 많이 보셨을겁니다 그중에서도 폰트 크기를 지정할때 em이라는 단어가 익숙하지가 않았는데요

em 이라는 단위를 html5를 공부하면서 접하게 된거라 저에게는 낯선 느낌이 들더군요

그래서 이것저것 공부를 하다가 em의 사이즈를 계산 해주는 사이트를 발견하게 됬습니다

px과 같은 크기단위에 익숙하신 분들에게 유용한 사이트가 되지 않을가 싶은데요

한번 활용법에 대해서 알아보도록 하겠습니다 

보통 폰트의 크기를 지정할때 px 를 많이 사용할겁니다 하지만 현재 트렌드는 em 이기 때문에 폰트 크기를 지정할때도 em 이라는 단위를 사용해주는게 좋죠

보통 1em은 몇 16px이라는것은 많은 분들이 알고 있을겁니다 

그렇다면 1.4em은 몇 px일까요? 

이부분을 쉽고 빠르게 알려주는게 바로 

라는 사이트 입니다 

위의 링크를 접속해보시면 아래와 같은 홈페이가 나오는데요

간단하게 원하시는 px단위를 입력해주시고 convert를 눌러주시면 

em값이 계산되서 나옵니다.

반대로 em칸에 원하시는 값을 입력하게 되면 px값이 계산되서 나오게 되죠

이처럼 크기를 지정하는 단위인 px,em을 쉽게 계산할수 있는데요

잘만 활용하면 시간 단축도 되고 유용하게 사용할수 있을것 같네요