HTML CSS - Font size oversized when shown on windows phone - html

I'm actually creating a newsletter. When i open the email into outlook, outlook web access, the layout is exactly the same as the one i built.
Yet when I open the same email in my windows phone 8 font size is not respected and the email has no longer the same layout.
Do you have any kind of suggestion ?
I have this css instruction in my tag. (-ms-text-size-adjust: none;)
body {
background-color: #f9fbf4;
margin: 0;
padding: 0;
-ms-text-size-adjust: none;
}
I also put this kind of css in the style span but it doesnt work
<span style='font-size: 8.5pt; font-family: Georgia,"sans-serif"; color: white; font-size-adjust: none;'>Hello</span>

This might have something to do with the viewport size on the device. You can try setting the initial scale to see if that resolves the issue.
<meta name="viewport" content="width=device-width; initial-scale=1.0;>

Related

Override Outlook dark mode button background

I am trying to add support for dark mode to my email templates, however am having an issue when it comes to Outlook. For some reason Outlook is partially overriding the background of my button which is causing it to display incorrectly:
The HTML for the button is as follows:
<td align="center" style="word-break: break-word; font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px;">
Reset your password
</td>
The button has the following inline style (formatted for your convenince):
color: #fff;
border-color: #13c2c2;
border-style: solid;
border-width: 10px 18px;
background-color: #13c2c2 !important;
background-image: linear-gradient(#13c2c2, #13c2c2) !important;
display: inline-block;
text-decoration: none;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
-webkit-text-size-adjust: none;
box-sizing: border-box;
Additionally, I've already added the following to the <head> section of my email.
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
Thanks!
The bad news is that we cannot specifically target Dark Mode via CSS in email via #media query or generated class name for Gmail or Outlook. Gmail replaces color values in the sheet and Outlook will inline Dark Mode color values and adds an !important to them and makes it impossible to override it in the sheet.
Solution
Until Google and Microsoft offer a solution, the best approach forward is to accept this is a reality and design emails that work no matter what the background color the user chooses to view them. More users are adopting Dark Mode, so it's only going to become more popular going forward.
Good luck.
Image 1x1px background + color = bulletproof button color:
<a href="https://ilovecode.com" width:auto;font-family:Roboto, arial, sans-serif;font-size:16px;color:#ffffff;border-style:solid;border-color:#59BC2B;border-width:10px 20px;display:inline-block;background-color:#59BC2B;background-image:url(https://path-to-the-1px-image.png);text-align:center;text-decoration:none;">GO!
Outlook.com and Outlook (Windows/Mac/Android/iOS) will invert/adjust most colours, but for some reason they don't adjust border colours, which is why your <a> tag's borders are the original colour, but the background-color of the <a> has been adjusted for dark mode. Try using border-color: transparent;.
Which Outlook? (Outlook desktop for Windows, 2007-19? Outlook desktop for Mac? Outlook on Android? iOS? Outlook.com/365 webmail?)
You may be able to try this trick, courtesy of Rémi Parmentier (I say 'may' because I don't have the code for your button):
<a style="color:blue;">
<span class="dark-mode-red">…</span>
</a>
And this in your <head> section:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
#media (prefers-color-scheme: dark) {
.dark-mode-red {color:red !important}
}
</style>
Thus, remove background-image: linear-gradient(#13c2c2, #13c2c2) !important; from your inline section (anything inline will get translated), and attach that to the #media dark mode style.
This is a full working example (although Outlook Office 365 Windows shows black text):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
#media (prefers-color-scheme: dark) {
.darkbutton {
color:#ffffff !important;
background-image: linear-gradient(#13c2c2, #13c2c2) !important;}
}
</style>
</head>
<body>
<td align="center" style="word-break: break-word; font-family: Helvetica, Arial, sans-serif; font-size: 16px;">
Reset your password
</td>
</body>
</html>
Well, it's not entirely true that you cannot change the background-color to what is set for the border. You actually can change that to tackle this hellish issue in Outlook. Sometimes though, and this case is one of those 'sometimes'.
You use background-image already and that is indeed the way to go. Replace the linear-gradient by a 1x1 pixel .png file that exactly contains that border-colour and repeat that. That color will not be inverted - it's an image after all. For the sake of compatibility, you could try to apply background="file here" as an attribute. It will repeat infinitely, but it's exactly what we want. The color will, however, remain white, unless you make that entire button a separate image.
Take out the background-color element on your a tag. You already have the
background-image:linear-gradient(#13c2c2, #13c2c2)
and that's all you need.

HTML font rendering issue on non-retina display

I am having trouble rendering Poppins on my site the way it renders on Google fonts demo site.
When using a non-retina display it renders "too thin", for example, the bars on the T are only 1px high, instead of 1.5px high when I look at the same text on font.google.com.
I like the way it looks on Google fonts much better. On my site the font looks "chopped" at the top but I cannot figure out what they are doing in their HTML to get a different rendering.
This codepen demonstrates the issue but beware: you need a non-retina display to see the issue!
Code:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap" rel="stylesheet" />
</head>
<style>
body {
margin: 48px;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 18px;
}
main {
display: grid;
grid-template-columns: 20% 30% 40%;
column-gap: 5%;
align-items: center;
}
h2 {
font-size: 1.2em;
font-weight: normal;
align-self: center;
}
a {
color: #000;
}
small {
display: block;
font-weight: normal;
font-size: 12px;
}
img:first-of-type {
grid-row-end: span 2;
}
</style>
<body>
<h1>⚠️This issue is only visible on non-retina display!</h1>
<main>
<h2>
Browser rendering
</h2>
<div>
TITLE TEXT HERE IS 18<br />
<small>^^^ T bars will be too thin on non-retina browser</small>
</div>
<img src="https://i.imgur.com/7LyzjJy.png" />
<h2>
Screenshot of Chrome on MacOS (broken)
</h2>
<div>
<img src="https://i.imgur.com/2OZ0wv6.png" />
<small>^^^ Notice how the T bar is too thin.</small>
</div>
<h2>
Google Fonts<br />
(screenshot of Bold 700 on <a href="https://fonts.google.com/specimen/Poppins?preview.text=HTML+TITLE+TEXT+HERE+IS+18&preview.text_type=custom&selection.family=Poppins:wght#400;700&sidebar.open">
the demo page</a>)
</h2>
<div>
<img src="https://i.imgur.com/dgld0Jw.png" /><br />
<small>^^^ Notice how the T bars are thicker</small>
</div>
<img src="https://i.imgur.com/pQPZ6Ch.png" />
</main>
</body>
</html>
I see your point,
it seems that there are some issues with the latest version of this font, others have complained too.
now why it is rendered okay on google? it could be that the demo version google script is using isn't the same as the one on their fonts CDN though I'm not sure
Solution:
until they fix the issue, Use Webfont
same font same CSS as the one in your pen
except this is an older version, you can host it on your own server
using something like webfont (I believe you know how to do that but in case you don't)
fontsquirrel makes the proceedure dead simple.
BTW this is on a mac and a separate HD screen
Note:
I noticed a tiny bit of spacing between the letters/words but nothing that
can't be fixed with some CSS letter-spacing or word-spacing
First thing - since macOS Mojave, Apple has disabled font smoothing by default. This is hard to notice on Retina Displays, but easy to notice on non-Retina. Executing defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO and logging out mostly fixes the problem. Without font smoothing text look a bit smaller.
The second problem seems to be in the way Google Fonts are working. When you type the preview text on Google Fonts demo page you are loading only characters you need for this given text - this is to save bandwidth as you are going to download about 18 styles of it.
However the font seems to be just a little bit different.
Google Fonts embed
Poppins downloaded from Google Fonts, imported manually via #font-face
Font constructed by Google Fonts downloaded from the network page on developer tools
1 and 2 look identical. The difference in 3 is almost unnoticeable, except for letter T and E.
Please also note that on Google Fonts demo page text is rendered with -webkit-font-smoothing: antialiased; which usually makes the text seem a bit smaller, maybe this is why the generated font is a bit bigger.
This can be noticed if you have Poppins cached and change the font manually from generated one to real Poppins.
This is my take on this problem, but on the way to it, I also found that sometimes subpixel rendering was present.

Fonts not displayed on HTML email and underline comes for hyperlinks

I have an HTML email code as given in the below link:
https://privatebin.net/?1ca92ace7be6c777#LLNgtdGPXCC4Si0Ui7jsEt7P/g+PsZ1gRq08qBTOljo=
The issue is the fonts linked by link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet" type="text/css" is not displayed correctly even though I have added inline styles to all tags.
Also an underline is displayed for the renew button. I tried by adding text-decoration:none style with !important. but was of no use.
Any opinions?
you asked a few questions here so I'll do my best to answer them separately.
Web fonts, as mentioned by others, are not supported in all email clients. It's currently not possible to display web fonts in Outlook, Gmail app, or any webmail client. Be aware that fallback system fonts will display in some email clients no matter how the email is coded.
For clients that do support web fonts, something like this inside your <head> will get you the best possible coverage:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->
More on web font support in email on Style Campaign and Litmus.
Regarding the underline in the button, sometimes email clients place the default (and sometimes blue) underline in links within buttons. This can be reset by targeting a <span> inside the <a href=""> button:
CSS
<head>
<style>
.button-link {
text-decoration: none !important;
}
</style>
</head>
HTML
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;">
<a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 110%; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;">
<span style="color:#ffffff;" class="button-link">Button Text</span>
</a>
</td>
</tr>
</table>
Actually, I didn't get you what exactly you're trying I think you want this applying text-decoration: none; to an anchor. try like this
a:hover { text-decoration:none; }
And if you want font to the body then apply this
body{ font-family: 'Source Sans Pro', sans-serif;}
Web fonts do not work in all email clients. Some of the clients where they do not work include Gmail, Yahoo, some fonts do not work in Outlook and in email clients for Android devices.
You need to choose a backup font which will be used when Open Sans is not supported. I suggest Trebuchet or Arial or what meets your clients expectations for a fallback font. Something like this:
font-family: "Open Sans, Trebuchet, sans-serif;";
These links will give you a better understanding of web fonts and how to use them in email.
https://www.campaignmonitor.com/css/text-fonts/font-face/
https://www.cssfontstack.com
https://www.cssfontstack.com/Open-Sans
https://litmus.com/blog/the-ultimate-guide-to-web-fonts
Your Button Issue
Your button only shows an underline in Windows Mail. However, the button shows up as Times New Roman in Outlook because you're using single quotes '' in the font-family description. It sees that as an error and defaults to Times. You should address this.
You are having display problems with iPhone 5 and Android you should address before you send out the email.
Good luck.

How to prevent mobile devices to scale font size

On our website we have the following phenomenon: When rendering the website on a desktop browser (Firefox, IE, Chrome), all fonts, in particular those embedded in <td> tags, are rendered in the same size.
However, when rendering the website on a mobile device, the font size of the texts within the <td> tags shrinks. See below. We tried to set
html {
-webkit-text-size-adjust: none;
}
but this only helps with the problem on the mobile safari and opera browser. Using the tips from this website, we added
#media (max-width: 960px) {
td {
font-size: 20pt;
}
}
to the css, but this now miraculously only works for one of our phones held tilted sideways, not in portrait.
How do we prevent the font-size within the table cells to be scaled down?
What Olli and JStephen said, but I also had to add text-size-adjust: none;
html,body {
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
You were most likely looking for this:
Include the following <meta> tag in the document's <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
It helped me with the same problem.
Maybe if you also add body to the css like this:
html,body { -webkit-text-size-adjust:none; }
Resource: iPhone/iPod - prevent font-size-changing
I know this is an old post, but I came across it and found the answer that worked for me is just an extension to Olli's. There are more css styles you have to add to support other browsers:
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
I had originally put everything in table cells which worked on my nexus, but my samsung phone was still randomly deciding which text to scale and which to keep the set size. I set 13px to everything on the page and it was the only font size styling I did. This was the only way I was able to fix it on all the devices I have.
First of all, font-size should be set relative to a default-value that is defined by the html selector, in case of repsonsive formatting.
For example:
html {
font-size: 100%;
}
h1 {
font-size: 2em;
}
td {
font-size: 1.25em;
}
The reason for this is that different platforms use different default values for 100%. E.g. desktops use 16px but mobile browsers often use 24px.
If you define the font-size of one of your elements to an absolute value, it will not scale with the rest of the items that have been assigned no value or a relative value; thus resulting in this behaviour.
The best solution to this problem: use relative font-sizes with em, rem or even % as the unit, istead of the absolute font-sizes with pt or px as the unit.
Edit for more background on the different default font-size on different platforms:
Because each platform has its own use-case, its own average screen size, average reader-to-screen distance, average DPI-value for its screen and (most important of all) a different viewport width, font-sizes aren't equally legible on each of those platforms if set to a fixed size. That's why the browsers define the default size to something different, as to optimise the experience for the user on that specific platform.
Sure, you could ignore this and keep setting all your font-sizes to something fixed, but that's going against the flow and breaking the user experience. Instead, try to make peace with this fact and be sure that it all scales properly.
Edit2: To warn you about the usage of em vs rem: using em will inherit the parent value and multiply it by the value of the font-size you define in your current element, while using rem will always be based on the value that is set in the root element instead of the parent element. So the following code will result in the following absolute values:
HTML:
<html>
<...>
<body>
<div>
<p>..</p>
</div>
</body>
</html>
CSS:
html {
font-size: 100%; /* we agree on 16px for this example */
}
div {
font-size: 1.25em; /* add a quarter of 16, so 20px is the actual value */
}
p {
font-size: 0.8em; /* subtract a fifth of the value of the parent element: 20 * 0.8 = 16 again */
font-size: 0.8rem; /* subtract a fifth of the value of the root element: 16 * 0.8 = 13.8 (will be rounded by browser to 14) pixels */
}

How to show a link in an HTML page with a huge size?

To my web-portal, I have three simple HTML pages to download apps from iOS-, Android- and Microsoft-stores (if a mobile user load the portal from a mobile-browser).
On the pages I show some description text and - at the bottom of the page - I have a button (iOS-page) and links (as button don't work) on the Android and Windows Phone-pages.
If the user then click/tap on the button / link, the user is redirected to the download-page of the shop.
I have noted, that I have to set different font-sizes for all platforms to reach a usable result in general.
The font-sizes to the text are showed correct on all platforms.
The problem is, that the applied fontsize to the link don't work on the Windows Phone- and Android mobile browser. It seems as it is simply ignored, where the other elements (Text) are showed correct. The Link is showed way smaller as the text although it should be showed with a greater font.
Where in standard-browsers (Internet Explorer, Firefox, and Google Chrome) all works like it should (including Link-font-size).
I also have tried to set the size over attributes "XX-Large" -> same effect...
Class - example to Windows Phone-Page:
.WP_Link
{
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
color: #03C;
}
Link - example to Windows Phone-Page:
App jetzt aus Shop laden...
So my questions:
Is there a way to show a link in the mobile browsers in a defined (huge) font-size?
Is there a better way to show an button / link (with a link behind), that works on all mobile-browsers?
First question.
Ever heard of CSS media queries?
/* Big screen */
#media screen and (min-width: 621px) {
/* Declare here your font-size for large screen (desktop browsers) */
}
/* Small screen */
#media screen and (max-width: 620px) {
/*declare here your font-size for small screen (mobile screens)*/
}
You can also put this: <meta name="viewport" content="width=device-width, initial-scale=1.0"/> in your ''. It makes every pixel the same size.
More information about that meta tag
Second question.
Style your link like a button. For example this:
.link {
padding:5px;
border:1px solid black;
background:#222;
color:#ccc;
}
.link:hover {
background:green;
}
So now it looks like a button, but it is actually a link and in combination with the media queries you can get it nice looking/fitting for all screen sizes.
First of all, you should use the font size in em, this will make a cross platform design easier. Check this: CSS font size
Then, you can check the support that each browser gives to each tag here: caniuse.com
So, if you want a cross-browser solution is better using a link and style it as a button. And if you want a huge font-size, just set the font size in a high em number.
Wow, that was fast (answers).
Thanks to Vinc and Ivan.
If I could, I would accept both postings as answers.
I now have implemented a "button-like" link to all platform-htmls (see below) and changed the size to em.
I further had some problems with the code. I have created the pages with Dreamweaver and now have noted, that terrible code was generated (multiple tags, wrong tags, etc.). Therefore, I have edited (cleaned) the code now manually.
Further, it seems, as (only) the WP- mobile browser has - why ever - a problem with 1em in a table (where e.g. 2 em works).
My problem is solved now for iOS (Phone and tablet), Android (phone and tablet) and WP (phone) (only platforms on which I show the pages).
So.. I accept the answer from Ivan (em-tip), what does not mean that the answer from Vinc is wrong/bad (if I would need the pages universal, I would checkout all in detail, as I have to learn much to css...:-).
My implemented class to the link as button:
.WP_Link {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 4em;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
color: #00C;
padding: 4px 6px 4px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}