How to make responsive typography?

1

hello campers.
please, I want to know how to make the typography responsive?
I tried vw unit but I did not like it. it did not work in all screen sizes.
what should I do to make it responsive in all screen sizes?

and many thanks in advance

2

Hi, you could use media queries to take into account different ranges of screen width and in each range you define a rule for the font-size.

1 Like
3

Hi. thanks for your reply. I already did media query but in some screen sizes, the font looks odd.
I mean the difference of the font between screens is obvious although I did effort.

4

With media queries combined with em/rem units. A quick google search would suffice but the main difference is that rem is relative to the html element (root) font size and em is relative to the font size of the current element being styled.

1 Like
5

vw only works for the viewport’s width. If you expand the height of the window, it won’t have an effect. You can use vmin / vmax. This chooses between whichever of the width/height is smaller/larger.

1 Like
6

thanks so much for your reply. I am going to search google. I hope it works

7

thanks so much for your reply. I really never changed the height. I have cared only for the width.
I will try to change height too

8

What generally works well is that you add a small amount of vw to a given font size using calc. I’m just applying it to body in the examples.

Simple (needs quite a lot a fiddling with values until you get something you like):

body {
  font-size: calc([base-font-size] + [viewport-width-fraction]);

Example:

body {
  font-size: calc(1rem + 2vw);
}

More complex (plug the values into this), the guy who figured it out has a huge writeup online, but the CSS tricks article is a good summary:

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

For example, if we want the our font size in a range where 14px is the minimum size at the smallest viewport width of 300px and where 26px is the maximum size at the largest viewport width of 1600px , then our equation looks like this:

body {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Edit note also that it would be unusual to change size based on height: you generally want the font size to change based on screen width only. The height is not really relevant outside of very specific (experimental?) layouts – if the viewport was thin and tall, you would end up with large text that would be impossible to read, whereas you actually want the text to be small.

3 Likes
9

Japanese and Chinese vertical style comes immediately to mind. Still used in a fair amount of signage.

2 Likes
10

thanks so much for the detailed explaining. I really do appreciate that great effort.
I will try it, but it would be applied to body only or all elements where I use the font-size property I should do the same too?

and many thanks in advance.

11

Any elements you are applying font size to: applying it to body was just as an example

Edit: you’d adjust the text size min and max values for each level of text you were applying it to

1 Like
12

Here is another article on fluid typography and the rfs repo (using a package manager and a CSS preprocessors or postprocessor).

1 Like
13

Ah that’s fair, but it’s still an unusual thing to do. It’s easy enough to switch writing mode to vertical (although that tends to involve some pretty nuts styling once you get numbers and inline latin characters involved). Standar is still rtl for East Asian languages. And the web isn’t really built to make it at all easy to actually deal with vertical text in a layout sense due to scroll being vertical and height being effectively infinite

1 Like
14

Yah, vertical writing style would be nasty to support in the general case, I’m thinking more in terms of a limited area on the page. Wouldn’t even have to be Japanese really, I just saw an old-fashioned barber pole the other day with “BARBER” written vertically right next to it.

15

which languages are written vertically? do you mean Chinese as one of them?
I really did not know such information

16

Chinese and Japanese were once written in columns, which made it convenient for scrolls, but that’s not the case anymore. You’ll still see it written vertically on traditional art like ink paintings though.

1 Like
17

thanks for the information

18

The W3C has a pretty good guide here. I do not envy anyone who has to actually implement the styling though – it describes it as “simple and straightforward” which it kinda is if you have a fixed amount of text on a fixed size of screen but kinda isn’t once you don’t have that.