My article today focuses on making text attractive in different browser sizes. With the popularity of tools to help developers create responsive websites, the ability to display fonts based on browser size is important. Obviously, you don't want your fonts to be massive on a mobile device but looking awesome and perfect in your 1024x786 desktop browser size. (I'll just add a note here that this is an article that is long overdue as I've been planning to write on this topic for a while.) Without further hesitation, I bring to you FitText.js.
Before I dive in, I just wanted to state that this solution is not meant to be used for paragraph text. Because it uses Javascript to render the font, this solution is meant to be used sparingly, such as in the main header tag only. With this solution and any solution that renders font using Javascript, users who do not have Javascript enabled will not see the font in its styled glory. Another problem that some users may experience is FOUT (flash of unstyled text) as the page loads, before the Javascript loads for the first time. (While Javascript is meant to be loaded at the bottom of the page, developers may want to try to put the Javascript at the top of the page to see if it reduces FOUT.)
FitText http://fittextjs.com/
FitText uses jQuery to change the size of the font dynamically, depending on the size of the browser.
To implement FitText.js, complete the four simple steps below:
1. Load the jQuery and FitText Javascripts at the bottom of the page.
2. Add the headers that you wish to use FitText on for dynamic resizing based on the browser size.
<h1 id="fittext1">Squeeze with FitText</h1>
<h1 id="fittext2">Squeeze with FitText</h1>
3. Add your CSS style for the headers, specifying the largest font size that you wish to display in the largest browser size initially. In the README file, it is stated to ensure that you include the display and width options below. (For display, you can use inline-block too.) Make sure you set a default font size, as this acts like the default fallback option in case Javascript is disabled.
h1 {
text-align: center;
color:#fff;
font: 70px/1 "Arial";
display: block;
width:100%;
}
h2 {
text-align: center;
color:#fff;
font: 50px/1 "Arial";
display: block;
width:100%;
}
4. Underneath the Javascript libraries, include the Javascript to render the fitText() method on the header elements. The fitText method can take various parameters. One parameter is to ensure that the text resizes/compresses more or less aggressively. (In the example below with the H2 tag, I used '2', which would make the text shrink more aggressively.) You can also set minimum font sizes and maximum font sizes.
<script type="text/javascript">
$("h1").fitText();
$("h2").fitText(2, {minFontSize: '10px', maxFontSize: '50px' });
</script>
Cons: This requires Javascript in order to render and work correctly, but when using Javascript, you should always have a fallback option in place.
To see an example, visit the FitText website at [http://fittextjs.com/] and click on the 'Download' link to view an example and the README files.
Are you currently using FitText.js? Have you had any problems with it? Let me know how you get on with it.
I've been trying to implement fittext on a test responsive layout ALL day and not managed to get any results. I have no idea what I am doing wrong, but your post is the first proper explanation of how to implement fittext I've come across today...still didn't help me though. I'd really appreciate you having a look
http://www.geltsdalebrewery.com/gb-layout-fluid.html
I can't get the h1 text to all be on one line and it doesn't matter what font size I give in the CSS file the text always remains the same - it doesn't change at all.
Evie: It's a jQuery error on your website, so it's not accessing the H1 tag and the fitText() method. If you're using Chrome, look in the console, and you'll see the errors below.
Uncaught ReferenceError: jQuery is not defined tinynav.min.js:3 Uncaught ReferenceError: $ is not defined gb-layout-fluid.html:24 Uncaught SyntaxError: Unexpected token ) gb-layout-fluid.html:127
I'm using Firefox and it's not showing up any errors in the code. I've loaded it up in Chrome, but have no idea what you mean by the console - how do I access this? Do you know how to fix this?
I've removed all the errors now - and I still don't think fittext is working as it should. I can't get the text to all be on one line.
I'm now trying widetext - http://cbavota.bitbucket.org/widetext/ and I'm not having ANY luck with this either. No idea what I am doing wrong - can you help me at all as nothing is working. I've stripped out the tinynav jquery stuff. I've got rid of all jquery errors. I've follwed the instructions on the site as best as I can. I have tiny tiny header text. If I specify a font size for the H1 it gets bigger but isn't responsive at all. I really don't know what it is that I am missing... I you can help I'd really appreciate it.
Hey Evie. I'm not familiar with widetext, but it's probably similar. I know fittext.js didn't work exactly like I wanted it to in terms of font size based on the designs I'd created with the three different types of layout. I've just tried to access your website to see exactly what the problem was and see if I could help in any way, but it's down now. Sorry I'm late to reply; I just saw your messages now.
I've given up with it and just going with fixed sized text that is centered on the page - I only work one day a week and I've wasted three weeks worth of time trying to sort this issue out and I've got better things to do. Thanks for looking, but I've moved on and now dealing with the million other things I've got to do to get the responsive layout to work.