1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Clear Text CSS

Discussion in 'HTML & Website Design' started by fgsg, May 8, 2014.

  1. #1
    Hello,
    SEMrush
    How I can make clear css text e.g. 15px arial, without rough line, i see on mobile phone all text is clear on pc not why ?

    Thanks.
     
    fgsg, May 8, 2014 IP
    SEMrush
  2. DebasishPanda

    DebasishPanda Active Member

    Messages:
    36
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    65
    #2
    Not sure I understand your question, could you explain again? Normally you would declare style for your text like this:

    font: normal 14px/20px arial, sans-serif;
    Code (CSS):
     
    DebasishPanda, May 8, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,480
    Likes Received:
    1,920
    Best Answers:
    247
    Trophy Points:
    515
    #3
    Generally speaking you shouldn't even be declaring fonts in pixels... as per accessibility guidelines your fonts (and your layouts) should be dynamic, which for fonts means %/em.

    which is why I use :
    font:normal 85%/150% arial,helvetica,sans-serif;
    Code (markup):
    on BODY... gives 'normal' users 14px, legacy *nix users 12px, large font/120dpi users like myself 20px.

    Though you might be encountering that your testing on mobile the browser is lying about size and ignoring what you declare for fonts -- that's why if you care about mobile you set initial-scale=1 in the viewports meta, along with setting width and height to the device values so it doesn't lie to you about those. (though apple retina will still lie to you claiming half it's real resolution :/ )

    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    Code (markup):
    Likewise for certain versions of IE and Safari, you'll want to bend them over the table too with this:
    @media (max-width:480px) {
    	* {
    		-webkit-text-size-adjust:none;
    		-ms-text-size-adjust:none;
    	}
    }
    Code (markup):
    As smaller older devices (certain iPod's for example) will try to automatically rescale the text on mobile even though we told it not to with the meta... Sadly we can't send the above to all browsers because desktop safari won't let you zoom with those set (even though mobile does? Yeah, that makes sense!)

    Though I'm guessing wildly as your post is hard to decipher and you didn't provide code or a link to the site in question.
     
    deathshadow, May 10, 2014 IP