Highlighted

Early Test Page Keeps Breaking

New Here ,
Jun 15, 2018

Copy link to clipboard

Copied

Hi!

I'm in the process of designing my own web portfolio, and I have run into a problem I can't get past. I'm using a non-web font and started designing the front page at 4K native resolution and kept checking if it downscales properly while I was working. I only have three break points. The one I made myself, at 3840, the one Muse made at 960 and the one you can't do anything with at 320. I tried to remove the 960 breakpoint, but it doesn't seem like re-positioning does anything. It just keeps getting super large and break when the browser hits 960. Is this because I'm using a non-web font? Using Adobe Portfolio is not an option.

Here is my website as it is now: www.bjornmartin.no

Here is my Muse file: WeTransfer

Also, please don't rip the font. I'm the only one with a copy and the license to use it.

This can’t work, because you are using a system font. System fonts have to be converted to an image during output to make sure, because nobody can be sure, that these fonts are installed on every visitor’s machine/device. Web design is not print design! You are not free in the choice of the fonts, you want to use.

To avoid converting font containers to images you have to use standard fonts or web fonts.

Because system fonts are converted to images, they obviously scale like images in responsive layouts according to the size of the browser window – that is, what happens in your sample site.

Please read my answer 4 in this thread for better understanding the issue: https://forums.adobe.com/thread/2357163

More information about web fonts in Muse:

https://www.youtube.com/watch?v=2MIVaDuxc9A

https://www.youtube.com/watch?v=PUuqhSXUtoU

By the way;: What the hell do you need a breakpoint at 7680 px for? Are you using a screen with the dimensions of a soccer field?

Views

213

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Early Test Page Keeps Breaking

New Here ,
Jun 15, 2018

Copy link to clipboard

Copied

Hi!

I'm in the process of designing my own web portfolio, and I have run into a problem I can't get past. I'm using a non-web font and started designing the front page at 4K native resolution and kept checking if it downscales properly while I was working. I only have three break points. The one I made myself, at 3840, the one Muse made at 960 and the one you can't do anything with at 320. I tried to remove the 960 breakpoint, but it doesn't seem like re-positioning does anything. It just keeps getting super large and break when the browser hits 960. Is this because I'm using a non-web font? Using Adobe Portfolio is not an option.

Here is my website as it is now: www.bjornmartin.no

Here is my Muse file: WeTransfer

Also, please don't rip the font. I'm the only one with a copy and the license to use it.

This can’t work, because you are using a system font. System fonts have to be converted to an image during output to make sure, because nobody can be sure, that these fonts are installed on every visitor’s machine/device. Web design is not print design! You are not free in the choice of the fonts, you want to use.

To avoid converting font containers to images you have to use standard fonts or web fonts.

Because system fonts are converted to images, they obviously scale like images in responsive layouts according to the size of the browser window – that is, what happens in your sample site.

Please read my answer 4 in this thread for better understanding the issue: https://forums.adobe.com/thread/2357163

More information about web fonts in Muse:

https://www.youtube.com/watch?v=2MIVaDuxc9A

https://www.youtube.com/watch?v=PUuqhSXUtoU

By the way;: What the hell do you need a breakpoint at 7680 px for? Are you using a screen with the dimensions of a soccer field?

Views

214

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 15, 2018 0
LEGEND ,
Jun 15, 2018

Copy link to clipboard

Copied

This can’t work, because you are using a system font. System fonts have to be converted to an image during output to make sure, because nobody can be sure, that these fonts are installed on every visitor’s machine/device. Web design is not print design! You are not free in the choice of the fonts, you want to use.

To avoid converting font containers to images you have to use standard fonts or web fonts.

Because system fonts are converted to images, they obviously scale like images in responsive layouts according to the size of the browser window – that is, what happens in your sample site.

Please read my answer 4 in this thread for better understanding the issue: https://forums.adobe.com/thread/2357163

More information about web fonts in Muse:

https://www.youtube.com/watch?v=2MIVaDuxc9A

https://www.youtube.com/watch?v=PUuqhSXUtoU

By the way;: What the hell do you need a breakpoint at 7680 px for? Are you using a screen with the dimensions of a soccer field?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 15, 2018 0
New Here ,
Jun 15, 2018

Copy link to clipboard

Copied

Thanks for clarifying that. My guess was it would behave like a font, not like an image. Looks like I have to use a web font then. I forgot to change the resolution before saving. The idea was to start designing for 8K UHD and scale down, but I figured I could optimise the site for it later, when the resolution becomes more of a standard.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 15, 2018 0
LEGEND ,
Jun 16, 2018

Copy link to clipboard

Copied

You should google „logical/physical resolution“!

Just imagine: If you place images in „8K“ resolution, it has roundabout 10 MB!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 16, 2018 0