시작하는 중
피그마랑 똑같이 했는데 달라요! 해결하기 본문
* 피그마 Dev Mode로 css 가져오고 타이포그래피도 동일하게 했는데 미세하게 다를 경우 참고하시면 좋을 것 같아요
1. 폰트 두께, 선명도, 너비 등과 관련된 문제
피그마는 기본적으로 디자인 협업 도구입니다. 그렇기 때문에 피그마에 접속하는 모든 사람들은 동일한 화면을 봐야해요. 하지만 시스템이나 브라우저마다 텍스트를 처리하는 방식이 다르기 때문에, 자체 텍스트 렌더링을 사용합니다.
이로 인해서, 브라우저에서 구현된 모습을 피그마와 비교해보면 미세한 차이가 납니다.
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;
을 넣어주면 돼요.
참조 - https://forum.figma.com/t/font-in-browser-seem-bolder-than-in-the-figma/24656/6
2. 텍스트 세로 위치 문제
좀 더 자세한 상황
- flex와 align-items: center가 적용된 곳에 텍스트와 이미지의 세로 정렬이 일치하지 않을 때
- 텍스트 HTML 태그와 피그마에서 height는 같지만, 글자 위치가 다를 때
피그마와 동일한 CSS를 적용했는데도 불구하고 세로 정렬이 미세하게 다르다면 텍스트 자체의 위치가 중요해요.
사진에 사용된 CSS
font-family: Pretendard;
font-size: 16px;
font-weight: 600;
line-height: 100%;
피그마에서는 이렇게 됩니다.
하지만 웹에서 보면 왼쪽 이메일 아이콘과 텍스트의 수직 위치가 조금 달라요.
텍스트를 보시면 아시겠지만, 렌더링되는 위치가 다릅니다. 피그마는 중앙에 정렬되어 있지만, 웹은 조금 더 위쪽에 배치되어있어요.
여기서 margin-top: 1px를 주면
이렇게 텍스트의 위치가 비슷해지게 됩니다.
