테마 설정에서 'typography and icons'으로 가서 프라이머리 및 세컨더리 폰트 패밀리를 설정한다.
원하는 폰트를 구글 폰트에서 선택하거나 커스텀 폰트를 업로드하여 추가할 수 있다.
폰트를 추가한 후에는 각 타입 웨이트에 대한 옵션을 작업해야 한다.
FlutterFlow에서는 실시간으로 렌더링하기 때문에 작업 과정에서 실제 타입을 확인할 수 있다.
️타이포그래피 설정하기: 글자 크기, 자간, 기울임, 색상, 반응형
타이포그래피 설정의 첫 번째 단계는 타입 스케일을 설정하는 것입니다. 이는 각 옵션별 글꼴 크기를 말합니다.
타이포그래피 스케일을 잘 설정하면, 사용자에게 구조적인 차이를 명확히 전달하여 읽기 경험을 향상시킵니다.
본문 복사에 대한 기본 글꼴 크기를 설정하고, 타입 스케일을 선택하고 Google Fonts에서 글꼴 패밀리를 선택할 수 있는 tools가 있습니다.
자간 설정, 이탤릭 설정, 타입 컬러 설정과 같은 후속 단계를 설정하고, 반응형 타이포그래피를 만들 수 있습니다.
플러터플로우에서 다양한 기기 크기에 대응하는 타이포그래피 설정 방법
기기 크기별로 동일한 방식으로 타이포그래피 설정을 하되, 각기 다른 사이즈를 고려해야 한다.
다른 기기 크기를 위한 사전 타입 셋팅을 만들고, 각 탭에 고유의 스타일을 적용한다.
FlutterFlow에서 디자인 시스템의 타이포그래피를 설정하는 방법이다.
디자인 시스템에서 타이포그래피 설정하기
테마 설정에서 'typography and icons'으로 가서 프라이머리 및 세컨더리 폰트 패밀리를 설정해요.
원하는 폰트를 구글 폰트에서 선택하거나 커스텀 폰트를 업로드하여 추가할 수 있어요.
폰트를 추가한 후에는 각 타입 웨이트에 대한 옵션을 작업해야 해요.
FlutterFlow에서는 실시간으로 렌더링하기 때문에 작업 과정에서 실제 타입을 확인할 수 있어요.
타이포그래피 설정하기의 첫 번째 단계는 무엇인가요?
타이포그래피 설정의 첫 번째 단계는 글자 크기, 자간, 기울임, 색상, 반응형과 같은 옵션별 글꼴 크기를 설정하는 것이에요.
이는 각 옵션별 글꼴 크기를 말해요.
타이포그래피 스케일을 잘 설정하면, 사용자에게 구조적인 차이를 명확히 전달하여 읽기 경험을 향상시킬 수 있어요.
본문 복사에 대한 기본 글꼴 크기를 설정하고, 타입 스케일을 선택하고 Google Fonts에서 글꼴 패밀리를 선택할 수 있는 도구도 있답니다.
이후에는 자간 설정, 이탤릭 설정, 타입 컬러 설정과 같은 후속 단계를 설정하며 반응형 타이포그래피를 만들 수 있습니다.
플러터플로우에서 다양한 기기 크기에 대응하는 타이포그래피 설정 방법
기기 크기별로 동일한 방식으로 타이포그래피 설정을 하되, 각기 다른 사이즈를 고려해야 해요.
다른 기기 크기를 위한 사전 타입 셋팅을 만들고, 각 탭에 고유의 스타일을 적용해요.
FlutterFlow에서 디자인 시스템의 타이포그래피를 설정하는 방법이에요.
타이포그래피 | FlutterFlow University
Let's set up our typography in our design system. So come over here to theme settings, and the third option down here is typography and icons. And here it is. The first thing you want to do is set up your primary and secondary font families over here. And we have these two because it's a common design pattern to have one font family for your display or header type, and one for your body copy. Now, you may have set these already, and there are three different ways you may have set them. First is in here in your colors when you did explore project colors over here to the explorer. If you set a theme in these options right here, they have different type families for your primary and secondary type families. So you may have set them there. You could have also set them if you generated with AI or if you imported it from Figma. But if you haven't, let's go set those up. Right now, we've got a primary font family set to outfit. And what this is doing is you can see down here that we've got various font families set between the primary and secondary family. And if you click in here to change it, you can see that we've got the whole open-source catalog of Google fonts, or you can add a custom font. Now, I'm going to add a custom font here because I've got a I want to use the display font, so let's come in here and add a font. Let's upload the files. Great! Let's give it a name.. What I'm looking for here is that the mapping is correct; that is, what the type weight and style, like italic or not, maps to the correct font weight and italic here. So thankfully, this typeface has that information in the title of it, so I can just go through and make sure everything is mapped correctly, and it is. So I can add this font. Beautiful! And we get a rendering of it here. Let's just add that in. Okay, great! So now I've got my primary and secondary font family set up. The next step is to work through each of these options for each of the type weights. And keep in mind that FlutterFlow is real-time rendering this type. So what we see over here is the actual type. So if I were to make this very small, you can see that we're getting a preview right here.
Okay, so the first thing is to set up your type scale. That is, your font sizes through each one of these options. And the idea of a typographic scale is that you want enough difference between the type sizes, then it's immediately clear to your users that they are indicating different levels in the hierarchy. So a heading is different from the body copy, but not too much. Difference so that one overwhelms another, grabbing all the user's attention. Having a good typographic scale creates a harmonious reading experience that effortlessly distinguishes between the different types of text. Now, if you have a brand guideline or style guide, your typographic scale will already be set up.. But if you don't, there are easy tools out there like this website typescale.com that you can set your base type size of your body copy and then choose a type of scale about how it scales it up and even choose a font family from Google Fonts. And even if yours is not in here, you can find one that's close enough. And then you can see this scale right here and then just copy the pixel values into FlutterFlow. And if you click on this pane, you can actually see this type scale in action. So right now we have this type scale set up and we can see how it reads. And once you like that typescale, you can just take these values right here and copy them into FlutterFlow. Okay, next you've got your letter spacing or kerning, and you're probably not going to mess with this because the letter spacing is very carefully set by the type designer, and so the distance between the characters is already in the typeface if you do mess. With letter spacing, the main use is when you have really large display type. Sometimes, the characters get very spaced apart and you need to tighten that up a little. But most likely, you won't be messing with letter spacing. Next, you have italic, and all you're doing is telling FlutterFlow which of these is indeed italic, and you want to make sure it actually is italic. Now, this will only work if the weight that you have selected, so here normal, actually has an italic weight.. And you never want to force an italic, that is, allow a browser to simply tilt your letters because an italic, once again, was very carefully designed by the type designer. But if it is italic, you can just switch it on here, and once again, you'll see it rendered. Next, you set your type color, and since you already have your color set up, you can choose from one of your theme colors. And once again, because we're creating the whole design system, if you set it to, for instance, your secondary color, and then later you go and change your secondary color, this will change with it. Okay, awesome! So you want to go through all of your type weights and set them up. After that, you might be done, but if you're shipping your app on significantly different... If you're designing for different screen sizes like mobile and web, then you're going to want to make your type responsive.
And, when you do that, you can see that we have two other options that are set. And, these are just duplicate tabs from our main type setting that we did. And, what you want to do here is set up your type the same way, but for your different device sizes. And, that's how to set up your typography in your design system in FlutterFlow...
