In the TailwindCSS docs 1rem is commented as being equivalent to 16px, even though (as far as I know) this is just the browser default and may be changed by the user.
Are the comments in the docs just an indication of what those rem are likely to be in px, or does TailwindCSS actually have some logic that makes our given 1rem equivalent to the rendered 16px no matter what the user does?
Related
After upgrading Wordpress from 5.3.12 to 6.0.1, the page-wide line-height is about 30% larger than before. I am using a custom theme that does not specify a value for line-height anywhere.
Adding line-height: normal, inherit, initial or unset on the body element has no effect. Without that, computer line-height is set to normal. The only thing that seems to work is setting a value-based line-height like 120%, but I would like to avoid that.
I am using a Proxima Nova font from the Adobe Typekit.
Has anyone encountered this?
NOTE: I have not changed anything in the theme, of course, and it looks fine on our production website which is still Wordpress version 5.3.12.
I was wondering if there are pre-defined/standardized font-sizes that even though not being a must it is still a good idea to follow when designing a website. I am aware that this might also highly depend on the font that a particular website is using, but let's assume that all fonts are equal and take a popular font like Arial or Helvetica as our base font. For example, what px size would you put for the following font-sizes:
--fs-xx-small =
--fs-x-small =
--fs-small =
--fs-medium = 16px (1rem)
--fs-large =
--fs-x-large =
--fs-xx-large =
In addition I assume that for math's sake we can take the default font-size and just use a rem unit based on that default size. However, in that case are there any pre-defined/standardized rem values?
Last but not least, I managed to get the default font-size value on Chrome by creating a div and then inspecting it via the DevTools panel in the "Computed" section, which revealed that the default unit value is 16px. Therefore, I have set the fs-medium to be 16px, but feel free to correct me if I am wrong.
Thank you in advance and I really look forward to hear what you think on this topic, as well as what is your solution to using different font-sizes.
I'm currently working on a page with internationalization and just for the japanese language all of the fonts should be reduced by 20% (because japanese kanjis are really big compared to alphabeth characters).
I already have the css rule that changes the fontsize only when it changes to Japanese, but I can't just shrink it with EM because i have headings, paragraphs and many other sizes of texts and using (0.8em) shrinks all of them differently and not in the expected behavior.
I tried using font-size: 80%. font-size: calc(auto - 20%) and none of them worked.
Do you have any other ideas? i'm using Sass ( scss) in case it might be handy. if it's not possible with Scss how can i accomplish it with JS (can be vanilla or vue)
If % is not working for you for some reason, why don't you try using font-relative units?
I would recommend you use ch or ex.
ch compares the width of the letter 0 (zero) in the font.
ex compares the x-height of the element's font. On fonts with the "x" letter, this is generally the height of the lowercase x letter in the font.
Both of the units should work fine with a Japanese font.
Although my other answer should work fine, one more thing you can do to fix your problem is to wrap all Japanese text in span with class="jp" and apply font-size: 80% to .jp.
I’m experiencing an issue with Safari where a block of text using webfonts (not sure webfonts are the issue) is wrapping differently in Safari than it is in any other browser. In this particular instance, we’re designing these blocks to look like they’re set to text-align: justify; but they’re actually set to text-align: left;. text-align: justify; is undesired in this setting as it does a poor job of calculating the space between words.
Important things to know:
As I mentioned, the layout uses webfonts. It doesn’t matter which webfonts (I’ve reviewed hundreds and it happens for all).
The entire page, including padding and font-size, uses viewport width (vw). The idea here is that the block of text scales equally for all browser sizes and retains it’s layout, including rags.
A visual aid:
Details about the layout and dimensions:
Frame 1: Safari desktop.
Frame 2: Chrome desktop.
Frame 3: Chrome at 50% opacity over Safari.
Window width in this screenshot is 1220px.
Left/right padding is padding: 0 calc(129 / 1220 * 100vw); which computes to 129px.
That leaves the available content space of 962px.
letter-spacing is set to 0 by default for all content.
So, anyone have any idea why Safari seems to have exaggerated tracking/letter-spacing?
EDIT
We just launched the site in question, so you can see the issue in action here: https://www.typography.com/fonts/hoefler-text/overview
Well, there's a bunch of stuff at play.
First of all Chrome and Safari use different defaults for rendering text, But in addition to that Chrome on different versions of MacOS or Windows will render text differently too because of how the system font rendering works.
You can typically make Safari and Chrome (on the same system) feel a bit closer by setting your text CSS to:
text-rendering: optimizeLegibility Since this is the default on Chrome but Safari defaults to optimizeSpeed
It might also be wise to explicitly set: font-feature-settings: "kern"; and font-smoothing: antialiased (note those both need vendor prefixes)
Next, make sure to specify a numeric font weight. Eg: font-weight: 400 for "regular". (The browsers might not pick the same weight for the normal/bold keywords)
Finally, make sure you're serving up the most optimized version of a webfont (Typekit & Google usually do this for you, but it's an issue if you're self-hosting the fonts)
Edit:
It might be worth forcing both Chrome and Safari to create a "compositing layer" (basically means its GPU accelerated). You can do that with backface-visibility: hidden. Though I suspect this is a MacOS specific thing and there may not be a solution in the browser.
Adding font-feature-settings: "kern"; to the element for the fonts solved my problem with Safari not rendering the letter-spacing properly.
I had the similar issue while building an html banner using a .woff font: Safari was applying an exaggerated tracking/letter-spacing.
Bryce's suggestion to use font-weight: 400; fixed the issue.
Is it possible to set a different font-size according to font availability?
Currently my problem is that Verdana is too big, and if the user don't have Verdana installed, I will end up with a very small font-size
Is there is any way to set a font (Verdana in my case) to 13px and if the user don't have that font installed, try with another font (Arial for example) but with bigger font-size?
Notes:
Preferably CSS only
CSS hacks allowed
As was answered just a minute ago by someone else (but already deleted?), you could use Font Detector Javascript solution:
http://jsfiddle.net/FHnJw/1
This might take some work to implement (I have not ever actually done it myself), but it seems that the font-size-adjust property helps "equalize" font's by standardizing the x-height. See http://www.w3.org/TR/css3-fonts/#propdef-font-size-adjust for the official description.
Font-size adjust only works with Firefox
The standalone 'font' css declaration only allows you to state font-size, style and weight once before declaring the different font families in succession so that's a no-go either
I'm sorry to say this cannot be done through css alone
As for the JS alternative, here's the one I recommend:
http://www.lalit.org/lab/javascript-css-font-detect/
Good luck