I was recently delivered a Photoshop Mockup that was designed for an iPhone X. The resolution is 1125px x 2436px # 72ppi. I am trying to convert this to CSS and am starting with the fonts.
For example, the title text of my mockup is 60pt/px. When I use this as the CSS font-size though, it is wayyy to large. I tried changing the image size in Photoshop to be 1125 x 2436 # 458ppi in hopes it would correct the font sizes but the font size doesn't actually change which is really confusing to me.
Can anyone tell me what I am missing here?
Normally when doing this, I do not go by the exact font sizes given in the psd, because they are always slightly off and don't account for dynamic page and container sizes. Instead, pick the smallest font size for the psd and set that as the default font size for the whole page in the body tag. Then make everything else relative to that (in em, not px), based on their relative sizes in the psd. That way, you can finish the rest of the page with an approximate font size, and then go back later and adjust the single font size after the fact to whatever looks most like what you encountered in the psd.
Try assigning the size of the font using px, You convert fonts to px and em here
https://www.joomlasrilanka.com/web-design-development-blog/web-design-font-size-measurements-convert-points-pixelsems-percentages-web-designing/
You can select a text layer from your mokeup. and right-click on this text layer then you will see several options, but you need to click on "copy CSS". Then your text will convert to CSS.
For Example:
Python_vs_PHP {
font-size: 56px;
font-family: "Montserrat";
color: rgb(0, 0, 0);
font-weight: bold;
line-height: 1.2;
position: absolute;
left: 307.359px;
top: 51.801px;
z-index: 7;
}
Related
Say you have a Web page which:
Uses a single font: * { font-family: SomeFont }
The style sheet is huge and made by someone else, so you don't know it in detail
Font sizes may be set using any known technique (px, em, rem, ex, %, etc.)
When you change the font to * { font-family: NewFont }, the new font appears 20% larger than the original, breaking a lot of layout.
Evidently, there is some inconsistency in the actual size of different fonts, so you can't just switch fonts and expect the new font to stay without the boundaries of another font.
Is there a simple way to compensate for this without having to manually set new font sizes for all tags, using only a single statement of pure CSS, something like body { font-size: 80% }.
I'm using this CSS to style a div:
#mainSection .mainArticle .text {
width: 600px;
margin-top: 0px;
margin-left: 20px;
line-height: 26px;
color: white;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
}
The image below shows the difference between Safari and Chrome:
I can't tell why it's this different. The font looks 'bolder' in Chrome, yet each character takes an tiny bigger length in Safari, meaning it sticks on average less chars on each line. Because the div box size is fixed length, the result is that the text ends too close to the bottom border.
I can't have variable length boxes. You can see the site here (go to MENTORING section):
enter link description here
Is there a convenient way around this problem? I know the font engine is different for each browser...
i think it is because the browser size is not same for all the browsers, and you have defined your CSS in terms of pixels., try to convert from pixels(px) to percentage(%) or em/rem values.
i hope this helps.
Safari renders open sans bolder than in chrome so you would need to apply a lighter font weight for safari Open Sans Google Web Fonts Rendering in Chrome
The reason is that whereas other browsers render the font at the exact size specified, Safari renders fonts in a series of steps.
I assume that the Apple team feels that fonts rendered at 10.3px look better than fonts that are rendered at 10.0px. (made up values).
The consequence is that you get different results between Safari and other browsers.
The easiest way to see this in action is to define a font size as a percentage, then slowly resize the window:
Test page at svija.love
In other browsers, the font will resize smoothly with the window. In Safari, the font size will increase in a series of jumps.
I am looking for a workaround for this (help, somebody!) because this behavior is screwing up my layouts and making it look like I have spelling errors at Ozake.com.
[update fall 2021] I wrote a program that combines the various text blocks into a single line, eliminating spacing problems. See svija.love for more information.
Is there any system independent way in CSS to obtain a standard-text font size from the browser, something that would be suitable for, say, a blog post?
I thought that em would do this, but when I set font-size : 1 em; I get a standard text font size on desktop and something extremely small on mobile.
I understand that sometimes the true DPI might be unknown to the OS. But on a mobile device, shouldn't the browser have some rough idea of how big readable text has to be? And shouldn't there be a way to obtain this information?
If you want the standard system font size, you'd just do this in your CSS:
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
}
It's a best practice to define your font sizes in relative units (percentage, em) whenever possible so that they scale appropriately according to the target device's built-in settings.
If you're using em's then you first need to define a base value for the font. Ex.:
body { font-size: 16px }
Now 1em = 16px.
Most browsers have a default user-agent font-size of 16px but you shouldn't rely on it. Set the base value then start using em's.
Image below displays the result for:
div.test { background: #00F; font-size: 50px; line-height: 50px; color: #FFF; margin: 50px 0; font-family: Wiesbaden; }
One using Wiesbaden (which is font-face) and the other without.font-face font seem to ignore the line-height property.
Is it font-face issue or the font?
The property line-height only specifies the vertical distance between the start of one line and the start of the next. If you typed out something that took up two lines, the start of the 2nd line should be in the same vertical position using either font.
It seems like that's just how your font looks at 'font-size: 50px'. If you wanted to, you could increase the font-size while keeping line-height: 50px to correct it.
In short, it's not an issue with either. They're behaving exactly how they should be. See your blue background? That's your line-height. Line-height doesn't affect the font itself, but rather the spacing of the lines of the text.
Some fonts are different sizes even when set to the same font-size. It's the way the glyphs are rendered. If you want your text larger, increase the font size. If you want fallbacks to be the same size, you can use similarly-sized fonts (look up "font stack generators" for help on this), or check out the CSS3 font-size-adjust property (do note that it is CSS3, so you'll want to double-check support of it).
I had a similar issue, but I used a Cufon script instead of fontface to avoid browsers issues. To solve my line-height issue I changed the doctype from transitional to strict. Try that.
The following fiddle illustrates the differences between 4 fonts (3 being very common fonts found on Macs, PCs, etc). One is a Google-font. Regardless, 4 fonts - four different results. If a design is going to rely heavily on a 'non-standard' font, be sure the fallbacks don't blow the whole thing up.
Pay particular attention to the differences in:
the top spacing between the capital Q and its parent's border
the various heights of the Xx (especially, the lower-case vs capital)
descender of the lower-case G (some actually come out of their
parent)
_http://jsfiddle.net/suK2U/
I tried this and it works perfectly!! just play with percentage until you find the needed result.
Apply this on your #font-face:
ascent-override: 90%;
Hope it helps!
More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/ascent-override
How to easily change a font-sizing from px to em for a big, existing site?
Any tips to do this quickly?
It depends on your existing stylesheet, but it’s probably not going to be quick I’m afraid (assuming you want the site to look the same after you’re done).
Potential Problems
When text is sized in pixels, the visual size of the text will be the same as what you put in the CSS. For example, the CSS p {font-size: 12px;} will result in all <p> tags having a font size of 12 pixels.
However, when text is sized in ems, the visual size is calculated relative to the font size of its nearest ancestor.
So, if you had the following CSS:
body {font-size: .625em;}
p {font-size: 1.2em;}
.header {font-size: 1.5em;}
And the following HTML:
<body>
<p>Paragraph</p>
<div class="header>
<p>Paragraph inside header</p>
</div>
</body>
Then the visual font size of the first paragraph would be 1.2 (paragraph’s size) × .625 (body’s font size) × 16 pixels (the default root font size of all modern browsers) = 12 pixels.
But the visual size of the second paragraph would be 1.2 (paragraph’s size) × 1.5 (.header’s size) × .625 × 16 pixels = 18 pixels.
If you don’t have a lot HTML elements with different font sizes nested within each other, then you’re fine. But you’ll need to check that yourself in the HTML — it could be difficult to tell from the stylesheet alone, especially if it’s a big site.
Approach
In terms of approach, when sizing fonts in ems, it’s easiest if the design for your site doesn’t have too many different font sizes. I prefer to set the <body> element to the most commonly-used font size, e.g.
body {
font-size: .75em;/* 12px */
}
Then you only change from that when you need to, e.g.
h2 {
font-size: 1.5em; /* 16px */
}
Otherwise you can end up sizing and resizing a lot when nesting happens. This can be particularly annoying for e.g. <li>s.
Of course, this approach only works if the design for the site doesn’t include lots of different font sizes.
Some people set body to 0.625em because that equals 10px (16 × 0.625 = 10), meaning for elements that don’t have an ancestor with a set font size, 1em = 10px, 1.1em = 11px and so on. Personally, I think that adds more complexity than it removes, but I’ve never done a comparison.
Either way, I find it really helpful to put the intended visual font size in comments after each use of font-size, as above. That way, you remember what font size the element was meant to be if it gets re-nested in the HTML.
Open css file
Search for px, look at how many
different sizes are there
Decide on a conversion e.g. 10px
=.5em, 12px=1em
Search/replace each size