In my Web application I am using google font 'Lato'.Now Requirement is I should use 'Roboto' font for my web application.
I replace Lato font with Roboto but This reflect major change in terms of spacing in whole Web application.
Where I am doing mistake?
I cant share whole page screenshot.
Original with Lato
Disturb with Roboto
Every font-family have own letter spacing and line-height. Now you need yo set re-structure your letter spacing and line-height!
Definitely in specifiing sizes for elements. If you need to translate the site to other language, you meet the same problems. If you change some text you have the same problems. And so on.
Everyting depending on text should not have explicit sizes (width at least). So when you change te text or the font, element just enlarges or shrinks without negative effect in most cases.
The only exception is placing some set of elements inside of one raw or limiting their max-width. These can cause problems if more text appears or new font is wider. Anyway, it's not good if the whole site consists of such elements. And Roboto is not wider than Lato, so it's not your case.
Is it possible to view your webpage ?
You can also change the spacing between letters using the css property "letter-spacing"
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: 5px;
}
<h1>SAMPLE</h1>
<h2>SAMPLE</h2>
Related
I have this string line which has for example exactly 100 characters.
I want to set it's font-size such that the line, starting at exactly pixel 0 of the web page, would end at the final pixel exactly.
The font is monospace so I assume so i assume i'm aiming towards setting the font-size to 1/100 of the window size.
PROBLEM:
* font-size refers to the height of the font! should i not expect a monospace font to be square ratio regard width and height?
An attempt:
<body>
<span>
123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_
</span>
</body>
body {
margin: 0;
font-family: monospace;
}
span {
font-size: 1vw;
}
this did not result in the wanted outcome. However, setting the font-size: 1.82 did result in it. But it's a bit shaky I guess to use such a random ratio setting and I was interested if there's a better way to go about it.
Step one is to not use font-family: monospace, because you are guaranteed to get different fonts on different browser/OS combinations. So use a real font, which leads to...
Step 2: use a real fond that you load as a webfont from your own server, so you control the exact version of the font people will be using. Because merely using a font by name in the assumption that font exists on everyone's OS, or even assuming something like google fonts will always only send one exact version, is guaranteed to fail, too.
And then step 3: look up what the em size as well as glyph width is that your chosen monospace font use, so that you can base your font-size on values that you know are applicable for every user, because you've ensured exactly which font will be used to style your content.
I would like to have a font smaller than an Arial 9px text.
I've tried to find other font name but I did not succeed to get a very small text. Is there a way to achieve this easily using css ?
EDIT :
I can't go under 9px using Arial
I have tried font-size, small, transform, scale, other fonts... everything as I am an experienced web developper.
Set font-size to whatever you want - although you may find that any font less than 9px may be too small to read well. You could also do it with em's or rem's or percentages.
But you can set the font size as follows (for an example p element that you want to be 6px in size).
p {font-size: 6px}
So note that you are not importing the smallest possible font - you are sizing the html elements to be a small font-size with CSS). Using this principle- you set the fontsize for all the elements you want to use it - eg: p, span, a, li, h etc.
But again - I must caution against this for accessibility purposes.
p {
font-family: Arial;
font-size: 6px;
}
<p>This is a test with Arial font at 6px and is NOT recommended</p>
You can try it
div p {
font-family: 'Arial';
-webkit-text-size-adjust: none;
font-size: 5px
}
<div>
<p>lorem</p>
</div>
You may also REPEAT the small tag multiple times to make it as small as you like. Interestingly, I have not seen this mentioned anywhere!
<h2>My Headline <small><small><small>(Subject)</small></small></small></h2>
Most (all?) browsers have a minimum font size, to avoid underhanded people displaying unreadable text for some reason. Some browsers let you adjust this, but you simply can't count on being able to display smaller than 9pt on anyone else's machine.
Unless you opt for very old school: create your text as a graphic.
Or: Create your own custom, tiny font - as long as it has all the features of (say) a 12pt font, it will display fine, but if the glyphs are only two dots high, that is what you will see.
If adding css styles don't work then maybe it has something to do with your browser auto adjustment of the font size.
Try this to stop auto adjustment of font size:
* {
-webkit-text-size-adjust: none; //For chrome browser
}
Few thing you must consider
1. make sure the .css file is the last one you load in your html (after Bootstrap for example).
2. use the !important attribute to your css property (font-size: 4px !important;)
3. if these 2 suggestions do not work, try adding an inline-css to your element <p style="font-size: 4px">I'm a 4 px paragraph</p>
You can use HTML <small> tag.
https://www.w3schools.com/tags/tag_small.asp
I'm working on a project where the height of the content container is limited, and on a few select browsers (mostly Chrome on Android) the text seems to be breaking in different places, even though almost all font properties seem identical, so far I've checked:
Width of the container element
font-size
line-height
font-family
letter-spacing
All of which are identical, both in their given and computed values.
This wouldn't usually be a massive problem, but because of the content container height constraint, these discrepancies are causing me a massive headache.
I've managed to replicate the problem in a fiddle with the following code:
HTML
<p>We are not able to sleep or We cannot sleep.</p>
CSS
p {
font-family: "Times New Roman", serif;
font-size: 11px;
font-style: italic;
letter-spacing: 0;
max-width: 200px;
}
The text in this example renders on one line in the majority of browsers, however in some the last word "sleep." appears on a new line.
You can see screenshots of this example in a number of different browsers at:
http://www.browserstack.com/screenshots/cf75bb4fa9a22db2e660a0073698be86b55becb6
Is there something I'm missing here? Is there any way to ensure the text will render in the same way accross a number of devices and browers?
The details of font rendering vary by browser and platform, and they cannot be controlled in CSS. Besides, different computers may have (slightly) different fonts under the same name, or e.g. lack Times New Roman entirely (most smartphones lack it, for example).
As a workaround, if specific line division is crucial, consider writing the text as preformatted (i.e. dividing it into lines in HTML source the way it should appear in display) and using white-space: pre. The drawback is that some lines might hit or even cross the right edge of the area reserved for the element. But if you do not set a background or border, this will be barely noticeable.
I'm afraid that the only solution here is using an image using width="XXX" or tell the client that is completely impossible to make a web identically on every browsers unless you use disgraceful methods just like using an image instead of text.
I was able to solve the problem in my browser by replacing the max-width with min-width see this http://jsfiddle.net/79j57L8L/4/
p {
font-family:"Times New Roman", serif;
font-size: 11px;
font-style: italic;
min-width: 200px;
}
I'm writing a webpage where I want to use one font for normal text and another for code, so I have the following CSS:
body {
font-family:Verdana, sans-serif;
font-size:100%;
}
code, pre {
font-family:Consolas, monospace;
}
This works except that the Consolas text comes out considerably smaller than the Verdana text. I can sort of fix it by adding font-size:1.2em; to the code, pre settings, but that feels like a hack, particularly since the number isn't derived from anything other than trial and error.
Is this something that happens to be a quirk of the particular fonts involved, or am I doing something wrong?
Alas this is because Consolas has a smaller x-height than Verdana. You can indeed "sort of fix it" by using a larger font size, but if the user doesn't have Consolas the page will fall back to the default monospace font, which will appear too large.
The proper solution lies in CSS3's font-size-adjust. Alas it isn't very well supported at all; as far as I know then only mainstream browser to support it is Firefox.
When you define a font-size in CSS, what you're doing is defining a concept known as an "em square" or "em box" even if you aren't using em units.
The em square gets its name because in the days of metal press printing, each letter was put in its own metal "box" and in traditional typefaces the uppercase Latin M typically filled the width of an entire box, defining the sizes for the entire family. Hence, the em box. Although the original em box was defined by the width of the M, the em unit itself refers to the maximum allowable height of a character. This was just a result of the box created for the uppercase M.
In short, all of the letters in a font family need to fit inside the em box, but they don't have to take up the whole thing. So when you set an em box with a given width, all you are doing is defining the maximum allowable space for the lettering to be placed in. From there, the typeface designer's choices in kerning, geometry, ratios, etc. will determine just how much of that box their lettering will take up. This is why you are having to use two different font sizes to make the lettering appear to be the same.
The font sizes are the same. But in Verdana, characters are generally taller than in most fonts (in the same size). For example, “H” in Verdana is taller than “H” in Consolas. This is a font design issue.
The solution is to use matching fonts. If you really want to use Verdana for copy text, Lucida Console is probably the best choice for a monospace font. If you want to use Consolas as monospace font (fine!), then use another “C font” for copy text, such as Cambria (serif font) or Calibri or Candara (sans-serif fonts).
Although the font sizes are the same here (on browsers that I tested), it is best to make sure of it, since browsers often apply something like font-size: 90% on code and pre and some other elements. The conditions for this to happen are somewhat obscure, and explicitly setting font family to something else than the generic monospace seems to prevent that on modern browsers. But it’s still a useful precaution to set
pre, code, samp, kbd, tt { font-size: 100%; }
The first line is in Verdana and the second is Consolas. Both 12pt. Consolas is slightly shorter, but not so much as in 20% difference. Check the parent elements of your pre, since em font sizes are cummulative - e.g. if body is 0.9em and pre is 0.9em, the result would be 12pt * 0.9 * 0.9 = 9.72pt
If you are trying to match only the height but ignoring the width, then 1.16em looks about right, and it is really the quirk of the font and you are not doing anything wrong.
Edit
Looks like you are doing nothing wrong =) Left is from fiddler, right is from WordPad
I have a Microsoft Word document which uses a 10pt Arial font. I have re-created this document with HTML/CSS, specifying font: normal 10pt Arial; in my stylesheet. When I print from the web page (from Chrome), the text appears significantly smaller.
I have my text wrapped in a 800px-wide container on my website. Might this be a cause? Besides this, to be honest I'm completely out of ideas & any help would be greatly appreciated.
It could be because you are specifying font sizes in pts. pts are pretty much inconsistent across platforms and do not scale. (px don't scale either) Try using em.
See Also: http://www.w3.org/QA/Tips/font-size, CSS Font-Size em vs. px vs. pt vs. percent
(You will have to provide a sample of your HTML to get a more concrete answer)
Have you tried converting your font-size to pixels or ems? I believe 10pt would roughly translate to 13px.