CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
Matthew
Matthew

Reputation: 3234

Responsive Font Sizing

I been trying to think of a way to change the font size as the parent element sizes changes. Most likely this would be due by the browser size being changed. Such as when I make my Chrome smaller the font will become smaller as well as well as vice versa.

I was thinking media queries, but it also wasn't suiting what I exactly want. Media queries great for detecting what device being used and all, but not how I want it to be. I was thinking the answer lies in some kind of JavaScript, but if there was an answer that uses CSS I would prefer that. I've done some research, but couldn't find exactly what I wanted.

Upvotes: 4

Views: 1802

Answers (5)

sameeuor
sameeuor

Reputation: 684

You can use CSS3 vh, vw,vmin and vmax new values for responsive font.

enter image description here

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}

More details: https://css-tricks.com/viewport-sized-typography/

Upvotes: 1

David Taiaroa
David Taiaroa

Reputation: 25495

The fit text plugin is really interesting for large fonts. If you are thinking of text and paragraph fonts, it's maybe not the best solution though.

The media query solution is the most common approach, though there is also a technique called responsive typography, where the font sizes change not in predetermined steps, but progressively as the wiewport changes.

Essentially you size the fonts as a percentage of their parent element, for example a percentage of the body width. The best description I know of the technique is http://www.netmagazine.com/tutorials/build-responsive-site-week-typography-and-grids-part-2

Good luck!

Upvotes: 2

Akshaya Raghuvanshi
Akshaya Raghuvanshi

Reputation: 2277

All plugins are crap. Just try using simple css for it.

Example:

@media screen and (min-width: 1200px){
font-size:80%;
}

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

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

They will be flexible on each and every viewport. Hope this helps you.

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105863

You can use mediaqueries. i use this for my test : 

@media all and (max-width:2700px) {html {font-size:50px;transition:1s;}}
@media all and (max-width:2000px) {html {font-size:45px;transition:1s;}}
@media all and (max-width:1600px) {html {font-size:30px;transition:1s;}}
@media all and (max-width:1200px) {html {font-size:25px;transition:1s;}}
@media all and (max-width:1100px) {html {font-size:22px;transition:1s;}}
@media all and (max-width: 900px) {html {font-size:18px;transition:1s;}}
@media all and (max-width: 700px) {html {font-size:15px;transition:1s;}}
@media all and (max-width: 500px) {html {font-size:12px;transition:1s;}}
@media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}

Size chosen might not be the best, the transition is to avoid jumping size to size while resizing window.

Have fun !

Upvotes: 4

Steven
Steven

Reputation: 867

http://fittextjs.com/ here is a nice plugin that does exactly that

Upvotes: 1

Related Questions