GitLab UX Team, 11 Dec 2018

Previous Meeting

⏯

youtube image

►

From YouTube: Responsive type scale/ramp

Description

Pedro and Matej discuss the work done on GitLab's typography so far and the road ahead to design a responsive type scale for the Pajamas design system: https://gitlab.com/gitlab-org/gitlab-design/issues/168

Pedro: https://gitlab.com/pedroms
Matej: https://gitlab.com/matejlatin

Links / references

- Boostrap 4 Breakpoints: https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints
- Apple iOS: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/
- Material Design: https://material.io/design/typography/
- Microsoft UWP: https://docs.microsoft.com/en-us/windows/uwp/design/style/typography): They use a scaling algorithm: https://docs.microsoft.com/en-us/windows/uwp/design/style/typography#size-and-scaling) to ensure the same font size looks legible no matter the screen size.
- BBC GEL: https://www.bbc.co.uk/gel/guidelines/typography#type-sizes
- Buzzfeed Solid: https://solid.buzzfeed.com/typography.html
- FutureLearn: https://design-system.futurelearn.com/core-styles/typography
- Shopify Polaris: https://polaris.shopify.com/design/typography

A

So let me start off by maybe sharing my screen here.

A

Okay, so yeah, you can see that I'm using some different styles in get well. Okay, I changed it so I'm, just testing out possible design and I thought it was better to do it in the browser. I saw.

B

This somewhere I think Dimitri came up with this gray sidebar in grey background right, yeah.

A

Yeah yeah, he came up with it and I and I thought well.

A

Why don't I just try it and I came here and I used the CSS, the old style bot, and, basically you you add your own CSS Styles to a website and it works really well yeah and so I'm testing it out and so far so good I, like it a lot but yeah so about this issue, design, responsive type scale, type, ramp, I've assembled some of the references here from also a previous exploration that I did when we were designing the first type scale, so I'm the non responsive.

A

One- and this is this issue here- a settle share, type ramp vertical rhythm, but this doesn't have any type like responsive concerns right if it was just something to get out there to have some type of graphic guidelines and these mostly work in larger breakpoints, not so much in smaller, and this has been implemented with already it's going to be part of get lab, I mean it's already merged into into the code, and what has been merged is.

A

Is this markdown, so are you familiar with how we divide the three main categories of typography like UI, typography kinda, so.

B

Anything that's based on markdown in, for example, in our issues right when we write market town yeah.

C

B

Style is the newest right, so.

A

That would be the compact markdown, so okay for places like so, for example, markdown files or, if you go to the wiki, is because these are very big areas that are just dedicated and focused on the content itself. Those are going to use the markdown styles, which are larger and larger ones exactly, and then we have the compact markdown, which don't have any like borders, any horizontal rules- and these are essentially styles and and the the type sizes all stem from this.

A

So if you look at this one Heather one, it's exactly the same size as Heather three here in markdown, okay. So basically we just here in this compact markdown. We just cut the two, the two first sizes and we just use the rest of them. But here in compact markdown, the paragraph is using fourteen pixel size and in markdown, because we have a larger area to play with. We are using 16mm.

C

A

This means that, with the new, the what was just emerged just some days ago in to get lab right now, it's behind the feature flag and you need to run this to be able to see it and I was I was trying to have it running here. Let me see if I can do it? That's console yeah, maybe I'm doing something wrong, but the idea is that, right now, it's already in there and you can.

A

We are just going to test it out and iron out, some bugs, but eventually you'll be able to see it in the markdown area and these styles that we're seeing here are essentially the styles that we have right now in the design system documentation.

A

So when you go, for example here, these are the styles that I progress, she Styles and at I plan that we are going to have in markdown files and in wiki pages and and we thought, because the problem with our typography is that the styles are the same, whether you're writing an issue, description or you're, writing a comments right, and so, if I'm doing this and it's a heading one right now. This is too big to be in a in a content right and also in an issue description.

A

So what you see people doing, because this is the issue title if I want to have a title, a section heading inside my issue, description, I, don't put the heading. One right is smaller.

B

Than the main guys home yeah.

A

Yeah- and this is what everyone does- and this is part of our even get labs issue templates so when you're inserting a new writing a new comma, a new issue and reuse, an issue template this is not we're going directly to heading 3, because it's so it's the ideal size right for a section heading inside of your issue, description, not a heading 1, and because, if I put a heading 1 here, it's going to be too look too big. Yeah.

B

Huge handwritten underline yeah.

C

B

Actually, yeah and and.

A

That's why we we went forward with the idea of ok, so maybe the best solution. This was me and Tori. When this was implemented, we thought ok, so maybe let's divide it, and let's have one markdown, which is the perfect typography for reading content, and then, let's, what have one that we call compact markdown, which is basically used everywhere else that it that users can type markdown, but usually there its markdown.

A

That is confined into a specific area and maybe has more content around it right and that's the case for comments for issue descriptions for everything that is not markdown files or wiki right, yeah yeah- and this is basically the the rationale that we have for this, and then we have the other sets the final set, which is the UI typography, and this essentially follows much of what you see here and it's using the same sizes like, for example, this header two is the same size as heather, one in typography, in UI typography, but doesn't have horizontal rules and also the line height is a bit different, because this is going to be aligned with UI controls.

A

So it's a bit more I can show you here in sketch. So this is what we have today. So though your white typography, as you can see, this is what we have and we're using now in our pattern. Library is this kind of typography and these sizes, and you can see that we have. Where is it? Yes, exactly the UI medium label? This has 14 pixels size and a 16 pixel wine height.

C

A

If you want to do a paragraph, we needed to add this style, which has a larger line height, it's 24, because if I had it at 16, it would be too short.

B

In most UI I notice is it's a. It is actually 16 pixels in height mm-hmm.

C

B

And 24, to be honest, it looks a bit too large, maybe in even for 14 pixels font size. So at some point I was thinking. Maybe we should have a four pixel baseline grid because it gives you more flexibility right. You can adjust the line height, it's a bit more, but it does add. You know another and a little layer of complexity in some cases right right, but yeah. It does give you flexibility as well. I mean.

A

In for our typography, let me just check we're actually using a four pixel baseline grid, but.

C

B

I never noticed this okay, yeah.

A

It's this lines here- and this is just for the typography, because if we were going to have a four pixel baseline, that would also so that we would also use for our spacings a you would have so many different variations of padding's and a margin.

C

A

We thought okay now, let's just use eight pixels for general spacing and then for typography, especially for the line Heights. Let's use a four pixel baseline grid, so maybe we can play around with that and and have different line heights yeah.

B

Yeah because 16 20 would be ideal, probably look at the paragraphs. You have the right now it's two lines and it looks like they're drifting apart. It doesn't look like a paragraph, especially when you have more content below it right yeah. If you had it, that's 20, it would look nice and compact, but not too compact yeah.

A

I think this this is also to do with like this particular example, is not very good because, because it is very close to it, and the line length is very short, but but I get what you're saying. So if the line went linked with a bit longer, it might help, but maybe having it as 20 can be a good like a good compromise and the good sweet spot yeah. So.

A

So some here already in our sketch files, we have the high typography and then you can see the markdown typography and basically, what we did when I was working on this I first built out the whole set within the whole site, all of the sizes, with the mark on typography, which is the most extensive scale, and then from there we derived the smaller uy typography and the smaller compact markdown and the main difference besides the different heading sizes is that for a white typography, the default font size is the 14 pixel, which is what we use today everywhere in in the UI in the Y right for markdown typography, as I said before, it's 16, which is very good for like reading content, and you can see it in in our design system.

A

Like reading these paragraphs, it's I think it's just very good right, I, really like it reading our documentation here, at least in my screen, size, mm-hm,.

C

A

And for compact markdown, it's 14 again, which is what we currently have for issue descriptions already and in comments. We left that for now, as 14 pixels hmm and all of this work was based on on this file as well, which is available in our design, repository and yeah.

A

This is bit more or less the final, the finalized versions of what we were working on, and this was the research that I did at the time where I looked like this was our I, don't know, I, don't think you were here might say: I mean this is what we currently have in our CSS. Okay, that's a long before this merge request to integrate CSS lab in our code to have the markdown type in github see. This is what we currently have.

A

We have all of these sizes and and the variations it's ridiculous and you can see like 24 23. It's I mean 21 yeah, so so it's it's! This is our current CSS. This is our current type scale still today, although we already have that work and then I basically picked from a lot of popular design systems and and pattern libraries.

A

What are the styles that they were using just to see how they differentiated headings from larger titles, section titles, small copy and yeah I, basically assemble here, a lot of them and when I notice at the time is that just some of them actually thought about responsive typography. Most of them just focused on okay, like this at me, see an example I, for example, MailChimp right focus on these type sizes. This is what we have. This is what we work on, but they don't give.

A

Maybe they have an I'm sure they they adapt some of these sizes, if not all, when you're in a smaller screen size, but they don't put that in the documentation. So not all of them write documentation for responsive typography and- and that's led me, so the ones that do talk about responsive typography is, for example, Apple, and they have it here, and this is the dynamic type sizes that they have. So when you change, for example, in your iPhone or iPad, you change the density and the the default type size.

A

So the default is large and the large body is 17 points. And if you change it, it it resizes according to what is the density that you said in your accessibility settings? So if you have, if you have needs to, and you need to see the the type in a larger size and if you put the X or X or extra-large, the body is now try three instead of 17, and so they do this adaptation. But so this is not necessarily responsive typography. This is based on the user preferences yeah.

B

A

Don't know if you use an iPhone or but I do okay yeah. So you, you kind of know what I'm, what I'm yeah yeah.

B

Change my preference but I know it's there, because you know some people do change it and I eat something. I work with right and I know, for example, I will mention this later as well is we use?

B

We set our current base font size in pixels right and that's not disability right, because if the user changes their default font size in the browser, it will always be reset to pixels, because the pixels is the most specific unit you can use in CSS right, so it will always override users, preference and we should actually set the base font size to something like 100 percent. We.

C

B

Equal users, preference- if they do have it set, if not, it usually defaults to 16 pixels. So if you, what we then want to change the font size to 14, pixels I, believe it's either 80 percent or something you know exactly.

A

So that's what we're going to do with with our typography yeah.

C

A

And that's I think this will be integrated with this markdown type already and we're going to we're going basically we're going to have to remove that pixel a declaration in the body or HTML tag so that people can properly resize there yeah.

C

A

There, the fonts and their size in the browser mmm yeah. The other example is material design. I was looking to see if I could find it here, because they they've changed this a couple of times and I don't seem to find it, but I think they have something regarding different type sizes, yeah, but I'm not seeing right now, then I think Microsoft.

A

They also talked a little bit about the type sizes according to what you, what you're seeing right now and then the best examples I've seen is from BBC, where they basically group devices and and breakpoints. So they have Group ABCD, and here you can see that for each type size which they give this awesome names, they have a different configuration of and pairing of font size and line height, yeah.

B

I worked with the lead, front-end developer, that work on this ugly busy because he later joined Autotrader where I worked for before joined right right- and he explained this a bit to me because we talked about yet assigning non size, specific names right so can under felguard paradigm. It's awesome because you might in some cases having h1 opportunity to be quite small, right, I believe if we do have this now right, we do have h1 h2 h3, it's not actual, you know. So it's yeah.

A

We have like we have it like this yeah.

C

A

Don't know I think I can see the benefits of both ways of doing it, of having the names as more generic as possible, so you you're not tying it to specific HTML elements, but at the same site. At the same time, if you are not very familiar with this as a problem, you have to memorize yeah and the idea with, for example, calling it Heather one Heather, two etc is not necessarily to tie it to the elements, but to think about what is.

B

A

The the year, our key right, what.

C

A

Most important heading in my page and that would be a Heather one. What is my second most important, which would would be the same here right and and and that's what they say like this is the hue, our blog post title. So this is probably the most important one or this is and also be the most important one. I, don't know what about yeah? It's it's it's a different approach. I, don't think it's it's better or worse! It's just I.

B

Think ours, our approach is actually quite good. As you said, we we have the classes, I, think it's h1, but it's a class, and you know okay, so this is the largest that we have. H1 is always the largest right, so you have an h3 element in HTML, but you assign it than h1 class and it makes sense right. So we have semantics completely separated from the styles it works out and everyone gets it right. So I think it's actually.

B

What we have is actually better than had a BBC example because they use these names which derive from old site graphic measurements right there. But this this is something that typographers know it's not something developers would you would expect them to know or even designers, these days right here, this exact type is not set in metal anymore right and these were used when it was set metal. But it's not.

A

Yeah, you have, you have to to to memorize it yeah yeah, it's it's! Some of the names came from type book produce in that size, for example, primer was used for religious books or the by Henry VI yeah, so so yeah, no no but I mean here. What I found more interesting was that they had this differentiation of different groups and basically kind of it's it's the for break points that they call it.

A

The break groups typically feature phones, smartphones, tablet, devices, etc, and then they have the type sizes and what's interesting is that they essentially use. So if you look at Canon in group a it's 2832, but you can find this measure in other groups like this same measure, you can find group C, 2832 and then in Group, D right so they're using more or less the same sizes, they've variates, some things about mine height, but usually it's it's the same.

A

You can see here, twelve, sixteen twelve. Sixteen, then again, twelve, sixteen, so they're they're kind of very eighteen, but they also they're always use the same thing and that's interesting. So they go from the smallest size possible. Is 12 and the largest type size possible is sorry 52, which I don't know why it's not in Group D yeah. Maybe it's for tablet devices. They want larger sizes, but they had this.

A

This concern of writing it down and making sure that all of this was documented and the other example is from BuzzFeed, and this is not immediately apparent that they do responsive typography or that they have it documented because you see these type sizes and you're like okay, I, don't see anything else.

A

You just see this here they don't talk about responsive, but then, if you look closely, they talk about responsive prefix utility classes, which basically, they prefix with excess or SM or MD or LG, for the different break points, and with this example here below that you can see that they have extra small text, six medium text, five large text, four- and if you resize the window you can see you can see this paragraph resizing according to the sizes here.

A

So right now, it's text four, so it's 16 pixels, but now it's going to resize to five and then to six. So it's going down to 14, pixels and then 12 on these breakpoints. So when I resize you can see that it will get smaller, yeah yeah, it's smaller and then it will get even smaller. Yeah.

B

There you go, it even updates the class on the left yeah. It even updates.

A

For this demo- and so this is interesting- and essentially they from what I've seen here, they don't define a strict type scale for each break point. They just define the sizes and let people pick what they want depending on break point. You know what I'm saying, oh so, if you want you can just type this. If you just follow the sizes here for extra small, this will apply to all breakpoints, but you can easily override and change per breakpoints.

A

What is the size of a specific text which is very interesting, but at the same, at the same time, it doesn't give guide as to what is the largest size that we can use somewhere and what is the smallest size that we can use somewhere else.

B

Plus they do probably have breakpoints defined somewhere right, maybe not on this page. They probably has.

A

C

A

So they have it so they have responsive prefixes for a lot of things, which is amazing. There you go so these are the break points with the min widths and then you can see like all of these attributes and properties, have responsive, prefixes and classes text sizing text alignment display floats margin padding all of this. So you can really control in a very detailed way. The behavior across breakpoints yeah.

C

A

This is this is very interesting as well. It's another approach and this one future to learn it's it's really interesting, because they also they have all of the sizes here, small medium large across according to the breakpoint, and also they have these names that you have to memorize what what they are for.

A

Some of them are, very, you can know what they mean like nano micro merely okay. Maybe these are the smallest ones, but you need to know that they have like Pico or kill or mega, or something like that in the middle, and so this this is quite kind of similar approach to to BBC as well, where they you can see that the same type sizes is are used by, for example, micro. It's here, then, in medium it goes down one level and then in large it goes down another level.

A

So the third, the the third smallest smallest, the third smallest size in small, is now the smallest one in large. So they have this progression. You can see in all values, and essentially it ranges from this size which is really big, 783, pixels or Rams or whatever you want to call it. So you have this size and then all the way down to 11 and it's really cool, because they they talk a lot yeah. You can see the sizes here, the sizes and they even link to this calculator, which I'd.

B

Go to Norco yeah.

A

It shows you the size of that you're using what is the progression and all of that just kind of interesting. What I've found when I was working on the typography is that this amount of control and and detail and and having all of these fine grains levels I think it's too much of a choice.

A

Right and, and you don't you end up, not knowing when to use 16 or 18 or 20, should I use, 18 should I use, 20 and and and and I think the less choices you give with, for example, our typography here for your white typography I think this is awesome right. You have heading 1, I mean this display we're not using right now, it's more.

A

The idea would be to use more for empty States, but, for example, you have adding one adding two I think three and four, and you can see that this, the the difference, the difference in sizes is very noticeable right and- and that's that makes it easy for us designers to pick what is the best size to use here, but also for users to understand the interface, because if you have all of these fine grained styles, the users are not going to see the difference between a page and another when it is 20 or when it is 22 right does.

B

They have the decimal numbers there as well, which is a bit strange.

A

Yeah I guess so: I I, don't think that the browser translates this No.

B

It's transits either up or down yeah.

A

Yeah, this is another approach and you can see that again that they're making this progression and then they basically have this.

A

They have this scale and then they trim from the top and from the bottom when they are moving across smaller or larger break points. And then, finally, you can see with Shopify Polaris. They just make two differentiation. They have large screen, widescreen type and small screen type, and- and here it's I have I, don't completely understand what is the logic behind it?

A

It they are I'm sure they have some logic, but I can see it immediately because in small screen you can see that you have the widest one is 27 24 21, and here you don't see the 27 nor the 24 nor the 21. You have different sizes, but maybe they just derived a different scale for each for each break point or for each kind of screen and in the larger one it goes from 40 42 until 12 and and and I like this type scale, because it's also very simple: you have the largest one.

A

Then you have this title, a smaller one. Then you have a smaller one and you have this adding and it's it's kind of easy to use, and then here it is in the small screens they go from 27 until the smallest one, which is 13.

A

So this is was just an overview of what I've found so far and and what I found was interesting in our case. So let me pull up one design that I I think it was the one that I banged my head, the longest regarding front sizes, and so in this like in this redesign of the issue list and other elements.

A

What I did here is I created artboards for each of the breakpoints that we have, and so these are the breakpoints that we have today so well. This is not a breakpoint, but but you have between 0 and 768 and then between 768 and 992 and then between 992 and 1200. Essentially- and these are the breakpoint set that we had. These are basically the small sizes, the smallest width in each breakpoint.

C

A

One thing that I did for this particular design, which I I found it was kind of necessary and when looking at it in a mobile phone, I thought it was too big was, for example, here the smallest sizes. So here this these elements are 14 pixels in font size. These are all 12. All of these are 12 pixels, but then, as you go smaller like here, these this is already 12, so it went down from 14 to 12 these. These are still 12 pixels in size.

A

But then, when I came to this breakpoint, you will notice that this one is not 12 anymore. It's actually 11 and if I put it at 12 I actually thought it was too big for also the importance of the data itself and when viewing at a certain distance and with this kind of screen size right, because this kind of screen size is more for tablet view, and you pick up a tablet and you look closer to a tablet.

A

Better, closer distance, desktop right and so I thought it would be better as little as 11 pixels but I'm, not sure, and here in Mobile yeah. It just works much better in 11 pixels, because it's kind of it's a really small detail like the path and the idea of an issue and if you put it at 12, I, think it's too big and it kind of battles with the other data which is more important.

A

B

It 11 pixels in our scale. At the moment, we.

A

Don't we don't have currently in our scale yeah? So so that's that's another thing, so we already it's it's not in our scale. So if you look here, we go as low as 12 pixels for our small size, but curiously enough we have 11 pixels for these badges, for example. Okay,.

B

A

Is 11 pixels, bold and I think yeah? This is 11. I think this is one of the only situations where we have 11 pixels.

A

And so yeah, this is with just to show you a little bit of how how we got to where we got and I hope this was this sheds some light on why we decided some things.

C

A

Now we have so I wanted to talk about constraints so that the first constraint is the break points. I think, because these are going to define everything that we not everything, but it's going to define a lot of what we do and I mean break points. The way I look at it is they are.

A

There are basically some some guidelines that you have and some restrictions that you have put in place to help you adapt to the content, better, two different screen sizes and also other other properties, but mostly screen sizes, and they help you design better with those limitations. But the fact is that we don't know which screen size people are going to use, so the breakpoints are just there to help us. It's not if we say, for example, in the future.

A

Okay, let's change this break point from nine hundred ninety two to nine hundred ninety one, because we think it makes more sense. It's it doesn't matter right. It doesn't matter if it's like ten pixels above or ten pixels below it. The most the thing that's most important is that it adapts well to the content and that we're able to design properly for the different screen sizes. But this is a restriction and I wanted to hear your thoughts on what do you think about our breakpoints? And how do you think this could affect our typography?

A

Essentially, so our.

B

Breakpoints I would assume what are what are they based on, because it's quite strange to go from 0 to 768 and have nothing in between and then look see. What is the 992 one so.

A

If I'm not mistaken, we are using the breakpoints from bootstrap.

B

I mean it would explain a lot yeah.

C

B

Explain a lot yeah because I hear that all the time it's tasty, what comes from bootstrap right, yes, I! Think it's it's too limiting for us, but- and it's often the case whenever I hear it's what it comes from.

B

Bootstrap right either is padding's or margins and it doesn't fit with which our baseline grade or whatever it's too limiting for us and I would say it's the same for breakpoints I think we would need be a bit more flexible because, as I said right on the smallest screen, you might actually reduce some font sizes to sizes that are below our current smallest sizes, right mm-hmm, and it's simply because you're holding the phone quite close to your eyes and it's still easy to read, even if it's set in 11 pixels yeah and it's the same applies for the tablet.

B

But the screen is a bit larger, so you can still use the font size it's similar to the to the phone. But maybe because you have more room, you would want to increase some heading sizes or do some other stuff right. Maybe you can already limit the max width of a paragraph. So it remains a bit more readable right so and we don't have. We don't really have a break point that would be between.

B

You know the very basic phone phones that are maybe 320 pixels in one in width right, which is the old iPhones and some androids, the old ones, and now it's much more popular to have larger phones, which are you know how much is the my phone, which is the regular iPhone 6, is 578 with mm-hmm.

C

B

Then you have the plus size, which I don't even know what it is, but it's larger than that and again you would probably want to change some things. You know just the details, not everything, because the 11 pixels on that size will still look nice on the things that are not as important right but made up the titles because you have more room to work with. Even the tightest can be bigger or maybe taking the heavier or whatever yeah. So.

C

B

System fund so which is a little bit limited in ways.

C

B

A

So so the the good thing about, for example, bootstrap and again I think breakpoints are a really difficult topic for you to decide, which is the best exact pixel that you're going to use for your breakpoints. But the good thing is that they introduced this break point between the 768 and the 0, so you can control from between 576 and 768.

A

You can control what happens here and and so these they say this is for landscape phones, and but it might also include exactly what you're saying the larger iPhones and larger like those those phones that are not tablets, but they are not the smallest phones ever right. So maybe this can help as well. Yes,.

B

A

This address what you were thinking, I.

B

Think it does yeah. So are we going to stick with bootstrap breakpoints I.

A

Don't know to be honest: I don't have I, don't have a strong opinion for or against I'm I mean for for the smallest breakpoints, like defining what between 0 and 536. This break point this break point in this break. Point I, think I'm comfortable there. What maybe we can do because of our demographic and and that people that use get labs, they use a lot of people use.

A

So some so large monitors like larger than this break point I think it could be interesting for us to look into even larger break point, so we can control because I see, for example. Let me just quickly I hope this doesn't the streaming, the stirring, the the screen-sharing, but let me put a really big screen size.

A

So I don't know if you're still seeing the screen yeah yeah is it? Is it larger? Now it is okay yeah. So for me this is really tiny in this monitor, but it's just for demo purposes. Yeah. Sometimes you see people taking screenshots like this because they have such a big monitor, yeah and- and this is all wasted space right. It is.

C

A

Know like if we had another breakpoint, we could do better with this, like, for example, have the issue description here, but then have the comments on the right side, for example, and so you have two columns for contents. I, don't know and I feel like. That is where we lack a larger breakpoint for us to be able to to play around with these things I'm, but again, I'm, not sure about what would be the ideal size.

A

I'm. Just thinking out, live out loud that this can be something that break point that the bootstrap does not offer to us. We could only go as far as this yeah.

B

I agree: I think we should have a additional breakpoint for really large screen sizes. I use, IE I, think it's a 4k monitor I, never used my browser on full width and height right, but even on this size that I do use it. The font size, which is 14 pixels, still sometimes a bit hard to read right. So what I'll do I'll just go closer and I do I'll reach like this, and it's actually really bad for my poster right and for physical health yeah, it's lauching right exactly so on larger screens.

B

Again, maybe we can increase the base font size from 14 pixels to 16 pixels yeah.

A

Yeah this, this is something that you yeah.

C

A

Like that idea, and especially we are doing that as I showed you here in our marked on typography, we're already doing that for the base font size, it's the paragraphs are going to be, 16 are going to be exactly how we are seeing them here in our design system documentation and they look beautiful right there.

A

They look really easy to read, at least in my resolution, but I guess that even for as I was just writing it down here, maybe have a larger like adds or consider a larger, even even a larger break point for bigger screen sizes. Even this larger break point, we might say that this 16 pixel paragraph is too small. Maybe the best is to have 18 or 20 like medium. Has it, for example, you know maybe.

B

You needed more of them. Maybe you need a 1440 where you switch to 16 pixels, and then you have an additional 116 80 or maybe what is the next one 17 20, not sure where you switch to 18 pixels right, yeah, so yeah when you asked me about the breakpoints I think they should be. They shouldn't be so so device-specific I think they should be kind of reliant on the content. And how do you make the content easier to digest on that screen size right, so it should be.

B

If the screen is actually a lot larger than 1200. You can expect that you're looking at it like this, like I'm, looking at my screen right now and 14 pixels is too small because I want to have, you know, sits comfortably on my chair and don't slouch and we still read comfortably and 1440. Pixels is too small, so it should be at least 16 pixels or maybe 18 pixels. And if you.

A

What is the resolution that you have there.

B

Are no weights clears throat, one I actually.

B

And this place there, it is I, okay, so I'm using the default sizes that come with a magnet book writes, which is the scale and it's not the default. I actually increase it a bit.

C

B

Doesn't tell me the exact pixels resolution, though I.

A

Think if you, let me just I, think if you hover I.

B

It does tell me it's yeah if you hover over it. Look at like 1440 x, 900 is mine. Oh okay,.

A

It's what I have as well yeah yeah. It's.

B

A

I have here you don't.

B

Use an external monitor right, you use your laptop screen, yeah.

A

I use my laptop and this for me, it's it's the the perfect one. You know yeah.

B

I would say: that's actually very good, because the laptop is usually a bit closer than your external monitor is but 1440 on my screen, which is a bit further away. It's I would need it to be actually a bit larger yeah this widget okay, so the phone's remain is the same. Let.

A

Me, let me put myself a little bit how you are in distance to the camera. Yeah.

C

A

This I don't know if we're as tall in height but yeah. This is too small. For me, it is yeah. This is this far away. I can see myself going forward a lot and that's why I usually work like this, because this is a very good distance for me. Yeah.

C

And to that with.

A

My laptop but but I I understand what you say: yeah yeah so okay, so one thing we need to know is: if we're using bootstraps SM, like new small small breakpoints, consider an even larger breakpoint for bigger sizes, I think for us to consider this.

A

It might be best if we, if maybe we separate that into another discussion, because we only have that breakpoint today and it might be interesting for us to before looking at typography at that level, just put the breakpoint and and see what people do with the breakpoint, maybe if they, if they use the the breakpoint or not.

C

A

Know I have to think a bit about that but I. But it's it's a valid concern because.

B

You can adapt the layout based on the breakpoint as well so yeah, maybe.

C

B

A

Okay, so this is very points and I'm using this comment as a agenda for this call.

A

Okay, so the other thing and I also wanted your thoughts about this is how would you think is the best way for us to move forward and especially regarding the smaller sizes, so, looking at the examples, I showed you the way, I'm thinking about it, but of course you might have an even better suggestion is to pick on, or is it so to pick on what we have today in terms of font sizes and design it as for it to work the best as possible for.

A

A small break point, so let me put this, for example, 320 and okay, we're working with 320 and now I'm going to maybe say that okay, at this distance, like people, usually look at. Let me.

C

Put it as something like this: okay.

A

At this distance, maybe this is too big, so I'll have to make this smaller, so this could be the default, so basically define the sizes for the small breakpoints and then basically interpolate and create the other sizes from those from exactly until we get from the from zero going on through all of these breakpoints. Until what we have today, because this typography scale is designed for mostly these two break points, but not these right.

A

It looks very well here, but you're going to note it, and you can see it today, because this is using the typography if I put it in responsive modes, because we don't have breakpoints here, but if I put it in a very small width. So let me just really quickly adapt. This and content mean with no mean with so, if I put it here with I found, for example, this one this is, this might be too big. You know or not. I don't know.

B

But maybe yeah, maybe the paragraph size would still be fine, because it's actually quite a quite a small font size, but the titles would probably be a bit too big, especially the H ones right, because you only get to fit three words in a one-liner, so it could be a bit smaller right, yeah.

C

A

So so what what what mean, if you were to do this yourself, like approach this, the redesigning and in picking on this scale that we have today and adapting it for mobile? What what would you do? Do you think this is a good approach or.

B

Either you can do that. You can take the scale, but we have today and try to adapt it for mobile I. Do that quite often actually yeah, because for you know, example, most people will use kidnap on desktop and laptops right. Mm-Hmm fewer will use it on on the mobile device, and it's because of the nature that the nature of the product, basically I, think that approach would be fine.

B

If we wanted to go completely mobile first, you could go and completely redefine that type scale for the mobile screen, the mobile device and then derived other sizes based on that I think. The fourth pixel-based language should work. Fine, mm-hmm.

C

B

I, do believe is we'll need something similar to what BBC have done with their global language, how they call it and I think we saw it in, was it in BuzzFeed or was it you.

A

B

One yeah this one as futurelearn yeah yeah. This I think will need something like this, but I think we actually might as we discussed, we might need more than just free, so it might be small, medium large extra large for the yeah, really big screens yeah, where we yeah, where we said that 14 pixels is definitely too small, maybe even 16 pixels in this mall.

B

Maybe we need 18 pixels, but I think it over the to approach will work I think you could just go and adapt the type scale that we have to take for mobile because, as you said, it works really well on the desktop sizes, as we have them today. The art idea and I.

A

Mean I think I think they work. They still have to be implemented in the product yeah, but we we are using it in our design files. This is what we've been using and and and I think it works well and- and it was tested well not in code, but just by using dev tools. I was testing it there and also the markdown typography, and all of that and I think it works. Well.

C

B

I agree: that's the range of sizes that we currently have is enough. If you would want to introduce an 11 pixel size for mobile I, think that should be fine, but maybe it's only limited to mobile use right. If you do have a table like diary, you will have the extra extra small or whatever the name would be disabled for or you know, justice yeah, but you.

C

Stop right, yeah.

A

I mean it we could make it so if not, it doesn't even appear right. Yeah. Is that what they do like this is 11 here, but it ceases to exist in medium and large, like the memory size is 14 here. Well, yeah.

B

Or you could assign it the same size as the smallest size for that price range. For me,.

C

Give me more example:.

A

It's also another, so I I, think I mean yeah, I, think I'm comfortable with that approach for the smaller sizes I one thing I'm particularly I, still have to test. It is how small it can get. Any 11 is really it's still not for reading paragraphs or anything like that, but if 11 is acceptable because we have, as I showed you here, I used 11 pixels for these two breakpoints for it for the issue path and ID and I felt like this.

A

This can be a good use like for really really small data that usually people don't care that much, but I'm not sure if it can be too small. I see that, for example, I mean the two biggest players in terms of designing for mobile are, of course, Apple and Google with the material design, because they own the the operating systems. But- and here Apple they go as low as 11 for captions yeah.

C

A

I think it's it's fine and with the also as I said before, we have to think about the target audience and people that are usually using gitlab. Well, of course, we want them to keep having good vision for many many years to keep working in software development, industry, but I think it's enough if and especially the distance that you have with your phone, whether.

C

A

Can be it's not that bad yeah.

B

Something to be wary of is the color right. You will need it to be a bit darker for that for such a small size. Just for accessibility reasons, you.

C

For everything, yeah.

A

Yeah, instead of we should not have like what you're saying is, we should not like if this was 11 yeah.

C

A

Do something like this exactly because it's it's yeah.

C

A

Really, this is really.

B

Bad yeah, something like that. I noticed in the Apple example you're showing is they also adjust tracking in the last column, so.

A

Yeah, so the tracking is automatic because they use the it's because of San Francisco.

C

A

Francisco it automatically that the tracking, according to your and that's a really good thing- I mean it. This is something I thought about as well, not.

C

A

Not only not not special, not so much for smaller sizes, but for larger ones, not anyway it here by, for example, this size and it's using the Helvetica and if I were to use. So let me, where did I, have that I think I had it here so exactly so. This is the difference so here in these examples, and when I was working with this type of Rafi scale, I was using San Francisco, so it's using SFU I display and the display already does some of the tracking changes.

A

So let me just show you so if I change, so this is 28 if I change it from UI display to your white text yeah, it automatically changes the tracking right- and this is this- is great so and if I now apply this to a vet Iike, you can see that the tracking okay, it's it's a bit. It's a it shrinked a little bit, but it's not as good as this yeah. It would require to have a little bit less tracking yeah.

A

Something like this to be ideal, but the problem is for you to do that because we have the font. We have the font stack for our typography and you can see it here, Apple system and blank and segovia Roboto, and all of that I don't know. I've tried to look into it, but it's very difficult to do specific tracking or you would have it. You'd have to find, which is the operating system that people are using and what is the version of the operating system as well?

A

Yeah and even so, people might be using a different fonts, especially on Linux, because in Linux people can I saw whatever system font they want mm.

C

A

And so it's very difficult for us to define a specific tracking, but the good thing for us users that that have Mac is that we already have that for free using, for instance, San Francisco yeah, and it works really well, because if you go below I think it's 21, you will see that the tracking will change immediately. I think yeah.

A

So this is this is the point between 20 pixels and 19 pixels, where the system automatically changes between SF display and SF text and.

C

A

Really cool I guess in the future, when they design a version of San Francisco. That is one of those flexible web fonts. You know yeah, maybe that that would be even better and it will automatically adapt to whatever yeah.

B

It's it's! It's a it's an advantage of using a system font if it's a well designed font, right and I. Think I will always let the way in that regard right when it came to design typography. All the things related and I also think that Microsoft is actually catching up, so I, think or Windows users will get cooler, typography or already have right, because they don't use Arial anymore on Windows they use the C go.

B

How is it brown yeah C, going yeah to go in UI yeah and it's quite it's it's an improvement compared to what Ariel was it's.

C

B

More readable, I'm not sure if they also switch between display and text sizes.

B

It's hard to know because I don't have.

C

A I don't think, though, I.

C

Don't think so, but.

B

Yeah I don't have any of the Microsoft's product. You get the single signal.

B

If you know going, if so any of the office products you get it right, I don't have it yeah.

A

Yeah I think I. Have it I, don't know how but I think I managed to download it somehow but yeah, but yeah, it's it's, but again it shouldn't matter which which fund we're designing with. But again it's like you have to give give up. If we're using system, fonts yeah, which we are, you have to give up a bit of the control of over typography and and know that people are going to use whatever fonts they have in their system yeah.

A

So one last thing I wanted to touch on regarding the larger break points that you mentioned was so let me quickly share my screen again. So, as I said right now, the default- and this is what we have today for even the UI, the UI typography- that that we see here, is that paragraphs and labels. There are 14 pixels and you were saying that, for example, for you, and maybe I mean for everyone else, that uses that is farther away from their screen or their screen is bigger.

A

14 pixels is too small, even for UI typography or can be too small for UI typography yeah.

C

A

And people I think if we increase the font size from 2 from 14 to 16, people I think would would need a bit of time to adapt. I think it would be a good change.

A

We would probably see a lot of people complaining about how how it changed and they were used to the 14, pixels and but humans are animals of habit right, so I think it's a it could be a change for the better, but the thing I'm a bit worried about is: if we do that, we would have to change a lot of other things because, for example, because the 14 pixel is always also designs everywhere and it's taken into account everywhere. We have different components, for example buttons right.

A

So if we increase the font size on buttons to 16 pixels, maybe they now look a bit too cramped because of the padding or even here in the this, such bar, for example, if I put it at 16 pixels, maybe it's now looking a bit too cramped, and what could we we could end up doing is okay. Now we have to increase the height of this element. You know the.

B

Size of the UI in general, basically yeah yeah.

A

I have to increase this, and now we also maybe have to increase the line height and yeah, so we would have to increase the size of many different things. You know I think that's. What probably is going to happen is we're going to have to do something like this, so we can still have a breathable UI or else if we keep the same sizes, because some things it's mostly of things that have defined Heights like buttons. Anything. If we do that everything will look a bit too cramped. You know what.

B

I'm saying yeah, yeah, I know and I agree and I think on the long term. This should be something to strive for mhm if you increase the font size at the base font size. Basically, the whole UI should increase with it. Ideally right because, as a way to get their intermediate step, it could be that only increase the base front size for the content and not the UI mm-hmm.

C

B

In general, you don't read UI right, you see your button you're in the label and that's pretty much it. You don't read paragraphs inside buttons right, so it's easier to digest, even if the font size is a bit smaller. But when you read a paragraph in an issue description at 14 pixels, it is a bit painful when you spend 30-40 minutes reading on an issue right and it's important, pixels mm-hmm, it's a bit hard.

B

But if you just use the interface and you're okay, I need to click this button, and you already know most of the interface well. You know you're recognizing elements based on other things. Besides the labels, the position, the color right, the proximity to other things, prominence so I would say that as an intermediate step, maybe we could just increase the font. The base font size of the actual content. Yes, the UI as it is, and then maybe experiment with increasing dua with the increase of the base font as well yeah.

B

Maybe it's turns out that it doesn't actually look good or it doesn't really have as many advantages to actually go and do it. Yeah.

A

That's a really good point: that's a really good point, because and that's what exactly, what we're doing with them like these small steps? That's what we're doing with these different type skills like these three you I found and compact markdown. So right now we are going to implement markdown. It's already I mean it's already implemented, we're going to introduce it in the product itself.

A

Next, it's going to be compact, markdown and only after these we're going to have UI typography, so we're already doing that step by step and what you're saying makes sense. So maybe what we can do, then, is increase the base font size for markdown, and maybe compact markdown as well, because compact markdown is what you're saying like this would increase the font size for everything. That is so. Let me good.

C

Let me see if this works yeah, it works.

A

It would increase in this area which, for me, even right now like looking at this. It looks so much better, it's so much more much readable and so increase it in in comment areas. For example, right. That's.

C

A big, so let me increase that as well. I.

A

Don't know if it works well, but yeah more or less mm-hmm.

C

A

Not readable, yeah, yeah and the rest would still be at 14 right. That's what you were were suggesting well yeah, maybe it's from something we could experiment with and I'll try to include that as part of this issue, I I cannot make any promises because I think working for the smaller breakpoints.

A

It's more attainable right now in the short term, but I completely agree with you that we should strive for in the future to have to work more towards this, because most people that use get lab use it in large screens. They don't use it on mobile and that's what we've seen from from from the tracking that we did in the past and the tracking that we're doing today.

A

C

B

Because you need to you need to basically design your typography based on what what the content is used for and the UI content is completely different from content. That is, you know, meant for long reading and I think it's awesome that actually that we have this separation of markdown typography and then we have compact markdown for issues and that we have a separate, separate styles for UI and I.

B

Think this will give us a lot of flexibility if experiment with in the future as well, because I agree, it doesn't work out that the whole UI increases in size. Let's see yeah.

A

No I know you're you're you're completely right. That's that's one of the reasons why we thought it would be much better to it's also one of the big benefits of doing it. This way, not only because functionally, it makes sense as a solution to have different type styles, or else, as you saw people to have this sighs, they were always doing doing this yeah to have this same size, but they should. She shouldn't be doing this right. They should be just typing a heading one and we should display it in the best way possible.

A

They shouldn't have to think that they need to do it ahead, a heading three. So this is not only a good solution, but it allows us to break up the work in a better way as.

C

A

Yeah anything else you want to talk about regarding the type or anything else EU on it.

C

B

I mentioned the base, font, size and I think that's actually quite important right because we do want a kid love to be as accessible as possible. Yeah and I think, as I tried earlier to I tried increasing my resolution right and it's actually it's not defining the exact resolution. It's just how large the text I want the text to be the basic Apple setting and it didn't increase the font size at all in get claps. So maybe that's because it's set in pixels, but it should change.

A

Did did you change it to one of these smaller ones? Is that.

B

It I get to larger ones. Yeah. Oh you change it to these larger.

A

Ones, yeah yeah it should. It should affect shoes.

B

Right, yeah and it didn't- and it's not good because you know it's easy to assume that everyone has the perfect vision. But people don't I can speak for myself as well. I, don't have very good vision, actually don't use glasses, but my right eye is Panna. You know I, don't see very well with it and I'm colorblind as well, but that's another topic. Yeah I didn't.

A

Know you were colorblind yeah I am slightly.

B

You know that is not completely or very harshly, but slightly colorblind yeah. That's.

A

Interesting, no and that's that's it's really good that we have you on the team as well to look out for more of these things, it's good to yeah.

B

Yeah yeah I always thought about my colorblindness being something that I should be ashamed of as a designer right, especially when I work more on yeah and logos and stuff like that. I think it's the strength to be on yeah.

A

B

Then I realized it was actually when I worked, you I I, actually so, okay, no, this contrast is, is kind of killing my eyes but all yeah. So it's well right. Yeah.

C

B

No, no, the contested contract contrast is not good, so we need to change it and yeah. It's actually a strength, strength, yeah, but yeah. We do need to stop using or try to avoid using pixel sizes, maybe even for like as well, because I saw that boot shot comes with bright points set in pixels, but ideally the great points should choose EMS right.

A

Use EMS that that yeah, that's that's one way to do it. It's using EMT, yeah, yeah, it's what you're saying it will respond to the base font size, all increase the font size. It will also like that the breakpoints will also respond to how big the font is. No you're you're, correcting it I think it's it's easy to change this. If we want.

C

B

Would be good yeah.

C

B

Setting everything in pixels is a bit easier at first, but it becomes very limiting when you want to make the app very usable for everyone right, yeah, so yeah. We should try to try to move away from it, but it's not urgent I would say yeah.

A

This yeah it's going to be step by step, yeah.

B

I thought, but.

A

But yeah I agree with you. This is it's going to be one of those things that we probably change, and it's not going to be that much big of a change to be honest and we could I I. Think I'm, not I'm, not sure, because I know I, don't know that well about our code base, but I. Think if you just do the translation of what we have today in pixels and translate that to m/s, you wouldn't even notice any difference if it was properly. Maybe you wouldn't notice have any difference at all.

A

Only if you start increasing your font size in your browser like this, you would notice that things aren't moving around and if, for example, if I increase it, this big, you would be in a mobile layout. Now.

A

Cool yeah, so I think that's it. Thank you so much Mattie for rocking and in going through all of this and your thoughts as well and yeah I'll, keep you posted. I know this is this month is going to be a bit crazy with the holidays and all of that, but I'll try to have something ready. So we can continue discussing this and yeah and I'll post this on youtube. If you don't have any problems with that, and now it's okay, it's okay and.

B

A

Issue so other people can can read yeah.

B

Personalization, so this is eleven seven right actually yeah.

A

This is for this yeah. This is for this muscle. That's.

B

A

That's why we're talking.

B

Okay, yeah, let me know if you need any more help with it. I'm always glad to help I'll actually be off. For the final week in December, in the first week in January, okay till then I'm available sure I took a bit less work. This milestone, so I'll be more available. I think yeah.

C

A

To see you thank you so much very help, sir, and have a good day. Yeah.

B

It's a see, ya, bye, right.