I'm adding bootstrap to my website and I noticed that, when I use a narrow resolution (windows size) my header overlaps. If my header is small in size, like the usual H1 size, there's no problem. But when using a large size (check CSS below) the problem exemplified in the image happens.
How can I solve it? Is there any property like vertical spacing, or something like that? I'm a newbie with css. A possible workaround is to use Fittext.
CSS code:
.nevis-font {font-family: 'Nevis', Tahoma, sans-serif;}
.ultra-head {font-size: 7.8em;}
HTML code:
<div class="row-fluid">
<div class="span12">
<br/>
<h1 class="text-center nevis-font ultra-head">DIOGO NUNES</h1>
<br/><br/><br/>
</div>
</div>
You should modify line-height:
.nevis-font {
font-family: 'Nevis', Tahoma, sans-serif;
}
.ultra-head {
font-size: 7.8em;
line-height: 1.5;
}
Do NOT use line-height in pixels, it doesn't scale. Use unitless values (or percentages or ems but that's equivalent).
Do not set line-height below 1 either.
Default value is around 1.3 or 1.4
accessibility guidelines recommend at least 1.5
there are reasons when you want to use a line-height of 1 but that's when you are CERTAIN that there won't be 2 lines of content. Rare cases
Font makers are free to do whatever they want with the baseline and other properties embedded in font files: script fonts can span over 3 lines of text for some fancy effect if they want! (I believe).
tl;dr with exactly the same typography parameters, each font and character within will occupy different heights and widths and etc
EDIT: are there negative margins anywhere to be seen in Firebug?
Related
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 am using a downloaded font file for use on my website, however it is causing some issues in regards to layout / display.
Most fonts I have used display like this
The font I am currently using displays like this:
The difference is that the 1st font has space above (which is part of the actual text and not my css styling) while the second one has no space at all.
I can solve this issue by simply adding some extra padding to the containing element's top but this is not practical in the future event that I decide to replace the font (meaning I would have to go into every parent and remove the padding-top)
Is there any CSS styling methods I can use to add padding to my font so that it will always have a bit of space up top?
My Code:
CSS:
#font-face {
font-family: "Anakin Mono";
src: url("../fonts/opipik_anakinmono/anakinmono.ttf");
}
#demo {
font-family: "Anakin Mono";
padding: 14px 10px 10px 10px; /* Have to add extra padding to top becuase of font in use */
border: 1px solid black; /* A border helps illuminate whats happening with text alignment - vertically;
}
HTML:
<p id="demo">Some text on my website</p>
Is there any CSS styling methods I can use to add padding to my font so that it will always have a bit of space up top?
Unfortunately the answer to this question as you've outlined it is no, there are no CSS methods to target only a single font.
That said, you can simply assign your mono-spaced font by using a class and easily change the style globally as shown here:
#import url('https://fonts.googleapis.com/css?family=Inconsolata');
.monospace {
font-family: 'Inconsolata', monospace;
padding-top: 4px;
}
<div class="monospace">This element is monospaced font</div>
Any elements which you'd like to use your mono spaced font should be assigned the class monospace. In the future, you can simply change the font-family rule and alter the padding and voila, you've accomplished your change with very little effort.
I realize you've made it clear in the comments that you'd rather take a different approach, but I feel this is the absolute best solution/workaround that will get you what you want with the least amount of effort. At most, it will require you alter your markup to add the monospace class where needed, but this is probably a step in the right direction anyway.
You can make use of line-height. Change your CSS to this:
#demo {
font-family: "Anakin Mono", sans-serif;
line-height: 3;
padding: 0 10px;
border: 1px solid black;
}
You can try different values of line-height. It accepts multiple of original line height. px or em.
Always remember not to use only ONE font in font-family. Use more than 1 font to provide fallback fonts, in case your font is not loaded yet / unable to load.
Also, it's not advised to use self-hosted TTF font unless the file size is small. Try using CDN-hosted web fonts (such as Google Fonts) for better performance.
JSFiddle demo: https://jsfiddle.net/okawrcuf/6/ (I used another font that is available in Google Fonts for demo purpose, as I don't have your font)
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>
I've found an inconsistency among browsers in handling font-size (on Mac OS X 10.11.4). I'd like to know if this is a bug in Firefox, or a bug in CSS, or am I not understanding something about CSS?
This JSFiddle shows the details. In a section like this:
<pre>Start of pre section
<code>**problem here!**</code>
End of pre section
</pre>
the style code { font-family: Courier; } changes the font-size shown by Safari and Chrome, but not in Firefox. Yet in other sections, the code element size increases from 13px to 16px in all the browsers.
Why does the font-size increase from 13px to 16px after setting the font-family in all browsers?
Perhaps Firefox is changing the font-family but not the font-size. Yet it does change the font-size in other places, like in code inside a p element or inside a list.
I'm guessing the solution is to just aggressively set explicit font size with pixel units wherever I care about it (ignoring accessibility).
Quote from possibly related Firefox bug from 2006: Bug 328621 - strange default monospace font size -- differs from the proportional fonts
Though the inter-browser portability problem this imposes doesn't seem that trivial to me. The last time I wanted to markup HTML so that the monospaced parts showed the same in both Mozilla and M$IE I had to resort to absolute font sizes, which should be certainly avoided due to the accessibility problems they impose.
And yes, there's a simple workaround -- changing the settings. But most of the users will use defaults. :-(
This issue is not new; it has been known for many years that browser handling of monospace fonts is incredibly screwy and inconsistent across browsers. A number of workarounds are available that don't require you to override the monospace font preference set by the user, the most perplexing of which is to specify
font-family: monospace, monospace;
That's right: two monospace keywords at the end of the font stack. Nobody knows why this works; it just does.
For what it is worth, Firefox's UA stylesheet contains references to a -moz-fixed keyword which refers to the preference that is set by the user, which includes both the family and the size despite it being a value for the font-family property. Firefox ships with the preference set to 13px in whichever the system's default monospace font is. It would seem that monospace, monospace forces the browser to compute the element's font-size according to the spec while still preserving the preferred monospace family, at least. But this is just a guess.
Is this a bug? It depends on whom you ask. If you ask browser vendors, they'll probably say this is intentional. If you ask other authors, they'll probably also call it a bug. Is this a spec violation? No, because the spec allows browsers to implement defaults however they like.
Why does the font-size increase from 13px to 16px after setting the
font-family in all browsers?
probably because the browser's default stylesheet has these settings.
I'm guessing the solution is to not try to understand all this but
just aggressively set font and font-size wherever I care about it.
Not sure what you mean by "agressivly" but yes: If you have particular demand for that style, set it as precisely as possible in your own stylesheet, including font familiy, weight, size etc.
Since I asked the question and got a couple of good faith answers that are however not really answering my question: I'm going to try to prove that this really is a problem with current browsers. See my comment at the end about why this might or might not matter.
Here then are
3 problems with font-size in CSS/HTML in FireFox, Chrome and Safari on Mac OS X 10.11.4:
Problem 1. Changing font-family should not change font-size, but it sometimes does.
I don't know what the "user agent stylesheet" is. There can be all kinds of settings on it. But regardless of those settings, changing font-family should not change computed font-size. (Some fonts might appear larger at the same font size compared to other fonts at same font size, so visually they can look bigger or smaller, but the computed font size number should not change).
notation: in the following
pre(code) means roughly <pre><code>text here</code></pre>
p(code) means roughly <p><code>text here</code></p>
In the default situation, a page with no styles, I see this in all 3 browsers:
pre=13px
pre(code)=13px
p=16px
p(code)=13px
<pre>pre <code>pre(code)</code></pre>
<p>paragraph <code>p(code)</code></p>
Perhaps the user agent stylesheet is something like this:
pre { font-size: 13px }
code { font-size: 13px }
p { font-size: 16px }
The user agent can't be using relative sizes for code, because it appears as 13px inside of both pre and p elements. So it could be this:
pre { font-size: 81.25% }
code { font-size: 13px }
p { font-size: 100% }
or the equivalent using em instead of percentage. Or perhaps a descendent rule with percentages or em:
pre { font-size: 81.25% }
pre code { font-size: 100% }
p { font-size: 100% }
p code { font-size: 81.25% }
But then how do we explain this:
After setting code { font-family: Courier } (or any font family other than monospace) we get:
pre=13px
pre(code)=16px for Chrome & Safari pre(code)=13px for FireFox
p=16px
p(code)=16px
code { font-family: "Courier"; }
<pre>pre <code>pre(code)</code></pre>
<p>paragraph <code>p(code)</code></p>
No matter what the stylesheet is, the font-size should not change after only changing the font-family.
Problem 2. Relative font-size should be based on parent element's computed font-size. But it sometimes is not.
With no styles we have:
p=16px
p(code)=13px
After setting code { font-size: 100%; } we should have
p=16px
p(code)=16px
Instead we still have:
p=16px
p(code)=13px
This is wrong because author style should override default user-agent (browser) style. And relative (percentage) font-size is based on the parent element's computed font-size.
code { font-size: 100%; }
<p>paragraph <code>p(code)</code></p>
Similarly, after setting code { font-size: 120%; } we should have
p=16px
p(code)=19.2px = 16px * 1.2
Instead we have:
p=16px
p(code)=15.6px = 13px * 1.2
code { font-size: 120%; }
<p>paragraph <code>p(code)</code></p>
This shows that parent element is being ignored, and that some phantom value of 13px is being used to calculate the relative font-size.
Problem 3. The standard advice to use html { font-size: 62.5% } and then use em or rem for font-sizing does not work correctly
(Note: FireFox with rem does seem to be correct)
(Note: using the also recommended body { font-size: 62.5% } seemed to produce some crazy results, like doubling of font sizes, so I'm not considering that here.)
With html { font-size: 62.5%; } and code { font-size: 1.6em; } we have:
p=10px
FireFox: p(code)=13.0167px
Chrome: p(code)=13px
Safari: p(code)=13px
These should all be 16px = 1.6 * 10px
body { font-size: 62.5%; }
code { font-size: 1.6em; }
<p>paragraph <code>p(code)</code></p>
With html { font-size: 62.5%; } and code { font-size: 1.6rem; } we have:
p=10px
FireFox: p(code)=16px
Chrome: p(code)=13px
Safari: p(code)=13px
FireFox is the only browser to get it right here.
html { font-size: 62.5%; }
code { font-size: 1.6rem; }
<p>paragraph <code>p(code)</code></p>
I suspect this all doesn't matter much because people are used to slapping font-size styles all over the place in their CSS.
From my reading, there has been an attempt to make web pages more responsive to the native settings on each device: to adapt to varying hardware with more or fewer pixels per inch (PPI); to allow users with reduced vision to request larger text so they can read more easily; etc.
There are various recommendations and a bit of controversy about how to best do this: specify font-size with html { font-size: 62.5% } and use em or rem everywhere seems to be a popular opinion. Lately just using good old px to specify font-size is coming back in style, with the idea that px does not specify actual screen pixels but rather an idealized 96 dpi for the viewer (which may translate to a different number of pixels) and letting the browser's zoom controls handle user desired changes in font-size.
In summary, I think these problems with font size argue against the logic behind most of the advice about "responsive design" for font size. My guess is that this is an area where there is a lot of history factored into how browsers work, and it's near impossible to change now. And of course there are millions of websites with existing code that are all presumably happy with how font sizing is working now.
It seems to me that the only way to get consistent font sizing is to use pixels: px. For example, px at the Root, rem for Components, em for Text Elements. Or just just use pixels everywhere.
Mozilla writes the following about accessibility and font-size
Defining font sizes in pixel is not accessible, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.
But with all these bugs with inherited and relative font size it doesn't seem like an option to avoid using pixels. Plus the argument about a reference pixel and using the browser's zoom control seems to solve the accessibility issue.
That's because back in the dark ages one Netscape dev decided to force his personal preferences on everyone else in the browser settings (most coders are young people who think it is smart to destroy their eyes by setting text size one or two sizes smaller than everyone else, they think "monospace" belong to them and "sans serif" to normal human beings).
Thus, Firefox ships with defaults that alias "monospace" to a smaller font size than "sans serif". Pretty much destroys coordinated font sets (where the monospace font is designed to look the same as the serif or sans serif one).
You can "fix" it locally by launching about:config and changing all font.size.fixed.* properties to the same value as font.size.variable.* ones. But since you can't fix all Firefoxes in the wild, that makes the monospace css alias useless for this browser.
Response from OP moved from question to answer:
The answer from BoltClock was super helpful. The page he/she referenced about Fixed Monospace Sizing by Eric Meyer has a thorough analysis and some solutions. It explains some of the browser mechanics related to when the user's font preferences are used, which explains some of the mysterious behavior I was seeing (e.g. why was the code element seeming to inherit a size of 13px when it was the child of a p element with size of 16px: the reason is it actually inherits size medium which causes the browser to use the default browser/user preferences).
For my situation I'm finding I can remove the html { font-size: 16px; } style and instead add the following:
pre { font-family: monospace, monospace; }
code { font-family: monospace, monospace; font-size: 100%; }
This gives me consistent relative font-sizing but still allows the user to set the default font-size. Eric Meyer recommends using monospace, serif but I'm finding that monospace, monospace works, and I think it makes a little more sense when you see it in a style-sheet (it's odd, but looks probably intentional, and it means you really, really want monospace).
I think that the ultimate problem is that the browsers have different font-size defaults/preferences for monospace font, than for other fonts. The main idea of "accessible responsive design" in regards to font-size is to let the user have control over font-size. But when we have several settings for font size (serif, sans-serif, monospace) then that's too many options for the user to set. The user just wants bigger text that they can read. But for the author: they just want the relative sizes of the fonts to be correct at whatever given size.
In case it's helpful to someone else, here are some examples (in the slick Eric Meyer style) showing that monospace, monospace fixes some of the problems I wrote about in my own answer below.
code:before {
content: attr(style);
border-bottom: 1px solid #AAA;
color: #575; margin-right: 0.5em;
}
p {
margin-bottom: 2em;
}
<p>This is a 'p' element with a <code>'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace, monospace">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-size: 100%">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace; font-size: 100%">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace, monospace; font-size: 100%">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace; font-size: 120%">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace, monospace; font-size: 120%">'code' element</code> contained within.</p>
I came across a similar issue where I used monospace and the sizes were different in Google Chrome and Edge & Mozilla Firefox. This is because different browsers have different font weights and sizes for standard fonts.
To resolve this issue I used Google fonts and then the fonts sizes were the same in all browsers.
Must be something basic I'm missing here. I thought that font-weight:bold should not change how much vertical space the text takes. Especially when the line-height is set to be higher than the font-size.
http://jsfiddle.net/Arkkimaagi/7xAyy/
On my OSX chrome those three text heights do not match. The second one with font-weight:bold is 1px higher than the rest. The third div is just an example of fixing the problem (poorly)
I'm trying to set the line-height to something specific (18px) here, to have "vertical rhythm"
My question is, how can I have bold and normal text both with same line-height as in the example?
[edit:]
here's what I see on my mac
Also, here is what I ment by "vertical rhythm": http://www.alistapart.com/articles/settingtypeontheweb
- the baseline grid is more visible in the example: http://www.alistapart.com/d/settingtypeontheweb/example_grid.html
Sometimes adding top vertical align will solve this (depending on font size/family).
strong { vertical-align: top; }
In your fiddle example, because you have set a line height on the container (div), you can simply add the following:
span { line-height: 1em; }
It completely depends on the fonts you are using. Nothing about OSX or Chrome text rendering would ensure that two different fonts (and Helvetica-neue and Helvetica-neue-bold are two different fonts) would have the same vertical space even at the same font-size and line height.
Even though that is too much to ask you might think that two different fonts from the same family might be consistent, and usually they are, but sadly the two fonts you have chosen are not.
Setting an absolute line-height on both the container and the bold text, or giving bold text a line height of 1em (as DaveC says above) both fix this, e.g. from the jsfiddle you just need to add line-height: 1em
.bolded span {
font-weight:bold;
line-height: 1em;
}
Or why not follow HTML standards and use the correct tags instead of bolded spans? E.g.
strong, em { line-height: 1em }
I've encountered very similar problem with Chivo font: http://www.fontsquirrel.com/fonts/chivo. Right now I'm using the ugliest hack (works on current Firefox and Chrome, IE untested yet):
strong { vertical-align: top; position: relative; top: -1px; }
I try not give up on Chivo quite hard as you see ...
I think this is a font issue. I found differing line heights for the italic variant of Nunito (Google Web Font). When I switched to a reworked version of that font called "Nunito Sans" the issue was resolved.