CODEWITHSUNDEEP
htmlcss
Francesco
Francesco

Reputation: 25239

Reduce the font-size on small screens so words do not break

My page titles are short but with medium-long words, and I want the longest word of a sentence to fit the width of the screen.

960px

|                              |
|The Metropolitan Museum of Art|
|                              |

On mobile (screens lower than about 400px) I'd like to wrap the text as naturally happens, and to reduce the size so the longest word in that title dictates the font-size.

460px

|                |
|The Metropolitan|
|Museum of Art   |

or smaller

320px

|The    |
|The Metropolitan| <----- "Metropolitan" bleeds out of the page
|Museum |
|of Art |

Is there a rule that can reduce the font-size according to the "Metropolitan" word?

I don't want to break words: it's just bad typography.

I know I need media queries, that's not the problem. The problem is if I have a word like "supercalifragilistic" even if I set a media queries for 320px and font-size:12px it will leave either a space or bleedout.

Upvotes: 0

Views: 1778

Answers (3)

DMP
DMP

Reputation: 543

Try adjusting font size like this

html {
    font-size: 100%;
}

@media only screen and (max-width: 460px)
html {
    font-size: 90%;
}

@media only screen and (max-width: 320px)
html {
    font-size: 80%;
}

Upvotes: 0

Krusader
Krusader

Reputation: 116

You can try and use fluid-typography

CSS:

/*
Font-size is fluid.
It will be 16px when it reaches 300px width of the viewport
and 30px when it reaches 1500px of the viewport. Beyond and below those 
breakpoints 
font-size will be also fluid but we can restrict this using @media queries.
For example we can restrict that after viewport has reached the width of 1500px
the font size will be set as the fixed point (e.g. 2em).
*/
HTML {
  font-family: Montserrat, sans-serif;
  font-size: calc(16px + (30 - 16) * (100vw - 300px) / (1500 - 300) );
}

/*
Notes:

-*- The rem unit:

* In IE9 and IE10, using rem with the shorthand `font` property will make the whole declaration invalid.
Also, these two browsers don’t support rem units on pseudo elements.

-*- Viewport units (vw, vh, vmin, vmax):

* IE11 and Edge don’t support the vmax unit.

-*- Calc:

* calc with px and viewport units might not work in Safari, so
we can replace px units with percentages, in order to use it with viewport 
units.

* calc with percentages is totally broken on IE (both 11 and Edge) 
so you can use a regular calc() function with the em unit,
followed by a -webkit-calc() function with the percentage unit

*/


@media screen and (min-width: 1500px) {

    HTML { 
     font-size: 1.875em; /*~30px*/ 
   }

}

Example that I've found.

Upvotes: 2

Shashank Shekhar
Shashank Shekhar

Reputation: 176

If you want text's size be related to device size use relative measurement units like vw

Ex:

heading {
   font-size: 10vw;
}

Upvotes: 0

Related Questions