일관되고 유연한 스케일링 유형 및 간격

반응형

크리스가 처음 이 메시지를 보냈을 때, 저는 점진적인 향상에 대해 글을 쓸까 생각했지만, 그 주제는 너무 광범위해서 한 가지이기에는 너무 예측가능합니다. 특히 제 글에 이미 익숙한 사람들에게는 더욱 그렇습니다. 그렇긴 하지만 이 글에서 개략적으로 설명하려는 것도 한 가지가 아니라, 필자가 글쓰기 프롬프트를 정확히 만나는 날이 돼지가 날기 시작하는 날이 될 것이다. 하지만 이 한 그룹은 당신이 CSS를 작성하는 방법을 바꿀 것이다.

저는 개인적으로 이러한 여러 가지 요소들이 특히 반응성이 뛰어난 디자인 측면에서 많은 사이트들을 실망시킨다고 생각합니다. 이 그룹에 속한 것들은 타이포그래피와 띄어쓰기입니다. 특히 수직으로 간격이 일정하지 않아 콘텐츠를 검색하기 어렵고 미묘한 연결 끊김 현상이 나타나는 경우가 많습니다. 유형도 마찬가지입니다: 작은 뷰포트의 큰 제목 또는 시각적으로 크기 대비가 없으므로 시각적 의미에서 사용할 수 없게 만드는 머리글 계층.

크기 조정과 유동적인 유형을 사용하는 이 모든 것에 대한 꽤 쉬운 해결책이 있으며, 저는 이것이 여러분의 웹사이트들을 더 좋게 보이고 느끼게 할 것이라고 약속합니다. 자, 시작합시다.

사이징 스케일이 도대체 뭐야?

크기 조정 척도는 척도, 더 정확히는 비율에 따라 크기가 균일하게 진행되는 것을 말한다.

 

type-scale.com의 스크린샷에서 1.333의 비율을 사용하는 "Perfect Fourth" 척도를 선택했습니다. 즉, 한 크기를 올릴 때마다 현재 크기에 1.333을 곱하고, 한 크기를 내려갈 때마다 1.333을 곱합니다.

If you have a base font size of `16px`, using this scale, the next size up is `16 * 1.333`, which is `21.33px`. The next size up is `21.33 * 1.333`, which is `28.43px`. This provides a lovely curve as you move up and down the scale.

CSS '클램프()' 및 유형 유동성

For years, if you were to say, “Hey Andy, what’s your favorite CSS feature?” I would immediately say flexbox, but nah, not these days. I am a `clamp()` super fan. I wrote about it in more detail here, but the summary of `clamp()` is that it does clever stuff based on three parameters you give it:

 

• 최소값
• 이상적인 가치
• 최대치

이렇게 CSS를 쓰면 유동 타이포그래피와 띄어쓰기에 매우 유용한 도구가 된다.

.my-element {
    font-size: clamp(1rem, calc(1rem * 3vw), 2rem);
}

.my-element {
    font-size: clamp(1rem, calc(1rem * 3vw), 2rem);
}

이 작은 CSS는 크기가 너무 크거나 작아지지 않도록 하기 위해 뷰포트 폭에 따라 완전한 응답 텍스트 크기를 제공합니다.

 

It’s really important to test that your text is legible when you zoom in and zoom out when using clamp. It should be very obviously larger or smaller. Because we’re using a `rem` units as part of our fluid calculation, we’re helping that considerably.

모든 것을 종합하면

Right, so we’ve got a size scale and CSS `clamp()` all set up—how does it all come together? The smart people behind Utopia came up with the simplest, but handiest of approaches. I use their type tool and their spacing tool to create size scales for small and large viewports. Then, using `clamp()`, I generate a master size scale that’s completely fluid, as well as a Sass map that informs Gorko’s configuration.

$gorko-size-scale: (
    '300': clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem),
    '400': clamp(0.88rem, 0.83rem + 0.24vw, 1rem),
        '500': clamp(1.09rem, 1rem + 0.47vw, 1.33rem),
            '600': clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem),
                '700': clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem),
                    '800': clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem),
                        '900': clamp(2.67rem, 2.07rem + 3vw, 4.21rem),
                            '1000': clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem)
);

이 스니펫은 제 사이트인 piccalil.li에서 가져온 것인데, 타이포그래피는 이것 때문에 작업하기가 매우 간단합니다.

 

또한 다음과 같이 양호한 ol` CSS 사용자 지정 속성으로 변환할 수 있습니다.

:root {
    --size-300: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
    --size-400: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
    --size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
    --size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
    --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
    --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
    --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
    --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
};

:root {
    --size-300: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
    --size-400: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
    --size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
    --size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
    --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
    --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
    --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
    --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
};

이러한 접근 방식은 훨씬 더 큰 사이트에서도 작동합니다. 새로운 web.dev 디자인이나 이 멋진 소프트웨어 에이전시의 사이트를 보세요. 후자는 큰 뷰포트를 위한 거대한 크기를 가지고 있고, 작은 뷰포트를 위한 훨씬 더 작고, 더 합리적인 스케일을 가지고 있으며, 모두 완벽하게 적용되고 미디어 쿼리가 없다.

I’m all about keeping things simple. This approach combines a classic design practice—a sizing scale—and a modern CSS feature—`clamp()`—to make for much simpler CSS that achieves a lot.