How to make font smaller on mobile devices than desktop

Mobile
1

Hi

I need a little help, I created a site for a friend and the header looked fine in all desktop browsers, but on mobile devices the font in the header wraps the last word which does not look to good.

I am using a custom font which was rendered smaller on desktop that the set pixel height so I used to the following rules to fix this

font-size: 98px;    font-weight: normal;    line-height: 40%;

Now on the old browser on my android mobile phone if I can make that font smaller it should solve my issues but I have no idea how to do this can anyone point me in the right direction.

Many thanks

Ian

2

There are several different methods of sizing fonts. Instead of using pixels, you can use percentages, ems, rem or my favorites at the moment vmin/vmax, which adjusts the size based on the size of your viewport.

1 Like
3

Thanks Dave thats a new one on me,
I changed the font to font-size:6.13vw; which at least meant I no longer require the line height property, but when I tested on a tablet/phone using the built in Internet browser with android that does not seem to resize the text its as if it does not understand the vw property,
For info in the header section of the site I have this css

#intro h2, h1{
    padding: 0 0 20px 0;
    font-weight: normal;
    font-family: 'Ventilla Script' Trebuchet MS, verdana;
    color: @pink;
    /*line-height:40%;*/
    font-size:6.13vw;

All I need to do now is make that damn h1 smaller in the browser used by android devices to stop it wrapping.
Any other ideas on this as unless I have done something wrong the vw has sadly not fixed it on these devices.

Cheers

4

Two things I’d recommend. Firstly, use @media to target just smaller screens. For example,

@media only screen and (max-width: 60em) {
    #intro h2, h1{
    font-size: woteva;
}

When using @media, make sure you place the viewport meta element in your head too. E.g.

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

It’s also worth adding this to your style sheet to avoid auto resizing of text on some devices:

body {-webkit-text-size-adjust:100%;}
5

Hi Ralphm perfect,
I implemented everything you said and by using the following got it working

  /* Mobile browsers only */

@media only screen and (max-width: 70em) {
#intro h2, h1{
padding: 0 0 30px 0;
font-weight: normal;
font-family: ‘Ventilla Script’ Trebuchet MS, verdana;
color: @pink;
/line-height:40%;/
font-size:6em;
.hxtextshadow;}
}

To make it display ok on a Samsung Galaxy tab 3 in the widescreen/landscape view I needed to make the screen width 70em so at least it looks loads better now so thankyou very much for the help.
Next job is to find out why it wont import the custom font but I will make a new post on that after more research.

Once again thank you so much

Ian

6

Glad that helped.

As a starting point, this is not properly formed:

font-family: 'Ventilla Script' Trebuchet MS, verdana;

You need commas between each font name, and quotes around any multi-word font name:

font-family: 'Ventilla Script', 'Trebuchet MS', verdana;
7

Thanks for the tip on the syntax I wondered why some names required the quotes now I know, I have now corrected that but even before that I had got it working by doing the following,

Firstly I tried font squirrel which gave me all the file formats I needed so I uploaded them added there custom css updated the url to point to my font but for some reason that did not work, then I found this post:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

So from that and and with the files Font Squirrel had converted for me minus the .ttf and .eot I have ended up with the following code which works on the Iphone Android devices and FF, IE and Chrome.

Also once that custom font loaded the @media the screen size issue was not so important as the custom script comes up smaller that the browser default.

Thanks for all the help learned a lot thanks for the advice.

Below is what has worked

/* Fonts */
@font-face {
font-family: ‘Ventilla Script’;
src: url(‘…/fonts/Ventilla Script_0.eot?#iefix’) format(‘embedded-opentype’),
url(‘…/fonts/Ventilla Script_0-webfont.woff’) format(‘woff’),
url(‘…/fonts/Ventilla Script_0.ttf’) format(‘truetype’),
url(‘…/fonts/Ventilla Script_0-webfont.svg#svgVentilla Script’) format(‘svg’);
}

Thanks

Ian