Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Why fonts in Qt are appearing blurry or pixelated?



  • All my fonts are appearing pixelated, so I used AntiAliasing but it isn't helping. As you can see in the image itself:

    Capture.PNG

    This is the code I am using:

    butt1 = QtWidgets.QLabel("""Scrappr""")
    font = QtGui.QFont()
    font.setStyleStrategy(QtGui.QFont.PreferAntialias)
    font.setPixelSize(22)
    font.setFamily('Segoe UI Bold')
    butt1.setFont(QtGui.QFont(font))
    

    Edit 1: I also tried different combinations of ClearType text but It didn't work out. I think because for me, by default all the text appears good on windows and chrome but with Qt, it becomes pixelated. So it's probably not a windows problem...

    BTW I have:
    1360 X 768 resolution.
    PySide2 version is (5.14.2.1)


  • Banned

    @Abhay-Salvi I am not sure why your implementation of this was not working but this MUC of your code works just fine -- note I am not sure why you triple quoted the word but that worked as well

    from PyQt5.QtGui     import *
    from PyQt5.QtWidgets import *
    
    class MyWindow(QWidget):
        def __init__(self):
            QWidget.__init__(self)
            Top=300; Left=700; Width=250; Hight=150
            self.setGeometry(Left, Top, Width, Hight)
            self.setWindowTitle('Test MUC')
    
            font = QFont()
            font.setStyleStrategy(QFont.PreferAntialias)
            font.setPixelSize(22)
            font.setFamily('Segoe UI Bold')
    
    #        self.lblScrap = QLabel("""Scrappr""")
            self.lblScrap = QLabel('Scrappr')
            self.lblScrap.setFont(font)
            
            HBox = QHBoxLayout()
            HBox.addStretch(1)
            HBox.addWidget(self.lblScrap)
            HBox.addStretch(1)
            
            self.setLayout(HBox)
    
    if __name__ == "__main__":
        MainEventHandler = QApplication([])
    
        MainApplication = MyWindow()
        MainApplication.show()
    
        MainEventHandler.exec()
    

    Missed seeing that you use PySide2 -- however all you should need to do is replace PyQt5 reference to PySide2 -- of course if you are still having the issue within PySide2 with the above code then it is most likely an issue with PySide2 which is known to have various little inconsistency and such



  • It didn't work @Denni-0 I copied your code and pasted it, but still, it's giving me the same pixelated output : (

    You can see here:

    Capture.PNG

    By the way thanks for your help.
    I think, maybe there's something wrong with my PC...
    If it's working for you then why not for me??


  • Banned

    Okay I am not sure about that specific Font Family -- keep in mind certain fonts work better with video and others work better for printing, perhaps the reason it looks pixelated is because it is not a Video friendly Font Family -- try using one of the Font Families that work well with Video displays and see what one of those looks like. Also check this out HERE so you have a better understanding of what to and not to expect when it comes to displaying any font.

    Here are a few of the most popular options constantly used in a variety of videos.

           Helvetica
           Source Sans Pro
           Lato
           Futura
           Impact
           Arial
           Gill Sans
           Gotham
           Univers
           Trade Gothic
    


  • Oh my god! None of them are working. I tried all the fonts and all are pixelated!
    Even basic fonts like Arial & Impact also : (
    See the result with Impact font:

    Capture.PNG



  • Hi, Qt on Windows7 can have this problem if you have set the resolution for the screen for text size not 100% in the control panel but something bigger like 125% or 150%.
    Also you can try switch to Windows 7 Classic Desktop or Windows 7 Basic Desktop instead of Aero Desktop.



  • @hskoglund hey thanks for answering...
    I have one more question. If this is the problem with QT for windows 7 Aero then why other software like Adobe illustrator's font isn't messed up like mine.
    I don't think they are built on electron/Html like VSCode or slack.
    I simply don't get it.
    However thanks for answering...



  • @hskoglund also tried all of your methods but none of them are working : (



  • Hi, I just tested on my Windows7 PC with the Impact font and I think it looks better if you use
    font.setPointSize(36) instead of
    font.setPixelSize(38), here's a screenshot:

    36vs38.png

    On the top you see Notepad's version, then Qt first using .setPointSize(36) then using .setPixelSize(38).

    Note that 36 looks much better than 38. Why? If you look in the font settings for Notepad, you'll see that not all font sizes, for example when using the Impact font, are present. On my Windows 7 I can see 22, 24, 26, 28, 36, 48 and 72. So I think if you select a number between those you'll get a more ugly look.



  • @hskoglund Okay, so you mean this is windows 7 problem. Is it there on windows 10 also?
    Lastly please suggest the right thing to do in such a situation. I am building a SaaS app using QT and setting fonts at this problematic size where pixels are still there will make the UI more messed up. What should I do now?
    Any of your suggestions will be helpful...



  • Just tested on Windows 10, Notepad (with size 36) and setPointSize(36) look the same but setPixelSize(38) looks better I think:
    Screenshot 2020-05-13 at 05.10.58.png



  • So, if you can set the font size in points and only use those available in Notepad's list of sizes you should be ok.



  • This post is deleted!